Website Chat Integration

Launch your BotDistrikt bot as a widget on your website

It is possible for your BotDistrikt bot to appear as a widget on a website that you authorise. The end product will look like this:

Website Chat Widget

Creating a Website Integration

A Web Integration is created the same way as adding any other messaging channel. To create a Website Integration, navigate to Integrations > Website

Go to Integrations > Select Website

Setup

You will have to enter basic details to set up the chatbot widget on your website

Domains

Under the Domains field, enter the domain URL(s) the websites that you wish to install the widget on. Some examples of domain URLs are:

  • http://mycompany.com

  • https://app.mysoftware.com

  • http://localhost:8080

You must add the domain that you wish the widget to be present on. If you do not add your domains, the chatbot widget, it will not load on your website and you will get an error widget that looks like this:

Error if you do not add your website's domain

You can enter multiple domain URLs if you plan on installing the chatbot widget on multiple websites.

When you click Link to Website and a script, you have successfully created the Website Chat Integration.

Installing the Chat Widget

When you set up the Website Integration on BotDistrikt, you will be presented with some customised script code. You will need to copy and paste the code into the <HEAD> tag of your website, just before the closing </HEAD> tag.

Website Integration

Your BotDistrikt chatbot widget will appear on your website after you have copied and pasted the code

How it will look on your website

The website widget icon will appear on the bottom right of your website with width and height padding of 2vh. The's icon's image is taken directly from your bot's Personality page.

The website widget icon

On Desktop

When clicked on a desktop-sized screen, a chat window will pop up above the icon for your users to chat with. The window will show the Get Started screen, where your bot's profile picture, name, and description will appear. A user has to click on the Get Started button to initiate a conversation with your chatbot.

Desktop Screen Chat Widget

On Mobile

When the chat widget icon is clicked on a mobile-sized screen, the chat window will cover the entire screen's contents.

Mobile Screen Chat Widget

Managing Users

Identification information is not provided by default on the website integration. Therefore, on the backend, your users will be given a random name in format of Website Guest 12345.

Users Dashboard of users of the Website Widget

Each new user who messages your chatbot widget will have two attributes present:

  1. webchat_id: A unique ID generated for that specific user

  2. source: the domain URL of the website they messaged the chatbot from