Webchat

Webchat Embedding

The Stubber Webchat allows seamless integration with any website, enabling real-time communication between users and your support team. Once the webchat is published live, it can be easily embedded into any customer's website.

Step 1 : 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 : HTML Tag

Next, add the Webchat component to your webpage by including the following HTML tag where you want the chat window to appear

To avoid overlay issues put the Webchat tag into the <body> tag:

Replace the profile_uuid with the uuid of your Webchat profile.

html tag

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

Initializing Webchat with 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="{'some','data'}" ></stubber-webchat>

In stub.data._incoming_webchat_data.webchat_configuration.pass_through_data will be your custom data

pass through data on stub

        {
    "_incoming_webchat_data": {
        "webchat_configuration": {
            "pass_through_data": "{'some','data'}"
        }
    }
}

Webchat Embedding

Step 1 : Script Tag

Step 2 : HTML Tag

Initializing Webchat with custom data

On this page