1. Setup Webchat Interface
  2. Embedding Webchat

Setup Webchat Interface

Embedding Webchat

Explains embedding the Stubber Webchat component on a website. Useful for adding floating, embedded, or manually placed chat interfaces.

Basic Implementation

Step 1: Add Script Tag

Include this script tag in the <head> of your HTML document to initialize the Stubber Webchat module:

script tag 
        <script type="module" src="https://webchat.notifications.stubber.com/v2/client/index.js"></script>

Step 2: Add HTML Tag

Add the Webchat component where you want the chat window to appear:

html tag 
        <stubber-webchat profile_uuid="0c7b4df1-6d5b-5c94-be7d-738e0814XXXX"></stubber-webchat>

Replace the profile_uuid with the UUID of your Webchat profile.

Note: To avoid overlay issues, place the Webchat tag within the <body> tag.

Display Modes

Webchat offers several display modes to suit different website integration needs.

Default Mode

Adds a floating button in the bottom right corner that opens a chat window when clicked. The standard support or assistant widget for a site.

html tag 
        <stubber-webchat profile_uuid="0c7b4df1-6d5b-5c94-be7d-738e0814XXXX"></stubber-webchat>

Inline Mode

Places the chat UI inside a custom location on your page. The webchat grows to fit any div it is placed in, making it ideal for in-page assistants, portals, and app layouts.

html tag 
        <div style="height: 500px; width: 350px; border: 1px solid #ccc;">
    <stubber-webchat profile_uuid="0c7b4df1-6d5b-5c94-be7d-738e0814XXXX" mode="inline"></stubber-webchat>
</div>

Manual Mode

Positions the chat window freely within your page layout. Rather than being fixed to the bottom right, the webchat grows to fit any div you place it in.

html tag 
        <stubber-webchat profile_uuid="0c7b4df1-6d5b-5c94-be7d-738e0814XXXX" mode="manual"></stubber-webchat>

Advanced Configuration

Passing Custom Data

To pass custom data from the Webchat to your stub, add the pass_through_data attribute to the stubber-webchat tag:

html tag 
        <stubber-webchat
  profile_uuid="0c7b4df1-6d5b-5c94-be7d-738e0814XXXX"
  pass_through_data="{'customer_id':'12345','source':'homepage'}"
></stubber-webchat>

This data is available in your stub at:

pass through data on stub 
        {
    "_incoming_webchat_data": {
        "webchat_configuration": {
            "pass_through_data": "{'customer_id':'12345','source':'homepage'}"
        }
    }
}

Using Stubref Instead of Profile UUID

If you've configured webchat via stub.data, you can use the stubref instead of a profile UUID:

html tag 
        <stubber-webchat stubref="YOUR_STUBREF"></stubber-webchat>

Complete Example

complete example 
        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webchat Example</title>
    <script
      type="module"
      src="https://webchat.notifications.stubber.com/v2/client/index.js"
    ></script>
  </head>
  <body>
    <h1>Welcome to Our Website</h1>
    <p>Click the chat icon in the bottom right to start a conversation.</p>

    <stubber-webchat
      profile_uuid="0c7b4df1-6d5b-5c94-be7d-738e0814XXXX"
      pass_through_data="{'page':'home'}"
    >
    </stubber-webchat>

    <button onclick="document.querySelector('stubber-webchat').open()">Open Chat</button>
  </body>
</html>
Previous <- Setup Webchat Interface
Next Stubber-Hosted Interface ->