Embedded

Initiating chat via event

Explains starting an embedded Webchat conversation from your webpage with a browser event, optionally sending the user's first message. Useful for hero input bars, prompt chips, and guided entry points.

# Overview

Dispatch a stubber_webchat_initiate_chat event on the window to enable the widget, open it, connect, and send a first message on the user's behalf. Unlike opening the chat, this seeds the conversation with a message the visitor has already given you (hero input bars, prompt chips, guided entry points).

# Usage

Dispatch a CustomEvent named stubber_webchat_initiate_chat. Pass the first message in detail.data.message:

        window.dispatchEvent(
  new CustomEvent("stubber_webchat_initiate_chat", {
    detail: { data: { message: "What plans are available in my area?" } },
  })
);

      

On this event, the webchat widget will:

1. Enable the webchat if it is not already enabled
2. Open the chat window and establish a connection
3. Send detail.data.message as the first message

Each dispatch starts a new chat — if a conversation is already open, it is replaced.

# Example

Send the visitor's input from a hero bar into an already-started chat:

        <input id="hero-input" placeholder="Ask us anything" />
<button id="hero-send">Start chat</button>

<script>
  document.getElementById("hero-send").addEventListener("click", function () {
    window.dispatchEvent(
      new CustomEvent("stubber_webchat_initiate_chat", {
        detail: { data: { message: document.getElementById("hero-input").value } },
      })
    );
  });
</script>