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.

Embedding the Webchat

To embed the Stubber Webchat, follow the instructions below:

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;

html tag

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

Replace the profile_uuid with the unique identifier provided for your account.

Step 3 : Styling the Webchat

To customize the appearance of the webchat, you can use the following CSS styles:

css

        stubber-webchat::part(host) {
    --primary-color: #34C759;
    --border-color: #34C759;
    --text-color: #ffffff;
}

primary-color: Sets the main color of the webchat interface.
border-color: Defines the border color of the webchat window.
text-color: Specifies the text color within the webchat.

Adjust these values as needed to match the branding of your website.

Final Steps

Once you’ve added the script and HTML tag, and styled the webchat to your preference, your webchat should be fully operational on the website.