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:

Default Mode

The default mode displays the webchat as a floating button in the bottom right corner of the screen. When clicked, it opens a chat window.

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

Embedded Mode

Embedded mode positions the webchat UI in a custom position within your website. The webchat will grow to fit any div it is placed in.

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

Manual Mode

In manual mode, the webchat will not be fixed to the bottom right. Instead, the webchat window will grow 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

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 Stubber-Hosted Interface ->