1. Setup Webchat Interface
  2. Embedding Webchat

Setup Webchat Interface

Embedding Webchat

Learn how to embed the webchat interface in your website

Basic Implementation

Step 1: Add Script Tag

First, include the following script tag within the <head> section of your HTML document:

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

This script initializes the Stubber Webchat module.

Step 2: Add HTML Tag

Next, add the Webchat component to your webpage by including the following HTML tag 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:

Advanced Configuration

Passing Custom Data

If you need to pass custom data from the Webchat to your stub, add the attribute pass_through_data 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 will be 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>

Styling Your Webchat

You can customize the appearance of your webchat by setting the primary color CSS variable:

html tag with custom css 
        <stubber-webchat
  profile_uuid="0c7b4df1-6d5b-5c94-be7d-738e0814XXXX"
  style="--primary-color: #0967d2;"
>
</stubber-webchat>

Note: Setting the primary color is completely optional. You can configure this color in your webchat profile settings instead of setting it inline. This approach is recommended for consistency across all instances of your webchat.

Complete Example

Here's a complete example of embedding webchat in a webpage:

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'}"
      style="--primary-color: #0967d2;"
    >
    </stubber-webchat>

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