Website Chat Quick Start

Prerequisites

In order to deploy your bot on your website:

Have a live and publicly accessible HTTPS-secured website
Ability to add custom scripts to the website's HTML source code

Setup

From your bot account

Go to Integrations
Select Website

Enter basic details to set up the chatbot widget on your website

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

https://mywebsite.com
https://app.mysoftware.com
https://temp123.ngrok.io

If you do not add your domains, the chatbot displays an error message like this

You can enter multiple domain URLs for the chatbot to be on multiple websites.

Install

You will be presented with some customized HTML code to copy.

Copy and paste the code into your website's HTML source code, just before the closing </head> tag

<head>
...
...
...
<!-- PASTE SCRIPT HERE -->
</head>

Your bot widget will appear as soon as you refresh the page.

Customize

Customize the website chat widget:

Field

Used For

Primary Color

Keeping your website's branding consistent

Terms of Use

Giving visitors a checkbox to consent to before they use the chatbot widget

Privacy Policy

Giving visitors a checkbox to consent to before they use the chatbot widget

Custom CSS

Overwrite BotDistrikt's chatbot widget styles with your own custom CSS

Event Webhook

Receive message response events at your own webhook. This is useful for consuming admin-generated messages and broadcasts.

It is recommended to have a privacy policy set up to keep compliant with GDPR and other data privacy regulations around the globe

Default Language

The default langugage setting allows you to set the default language of all UI elements of the chatbot widget like the Get Started button, Input Placeholder, and the Send button.

To select a default language:

Navigate to the website chat widget by going to Integrations > Website

Select a default language to automatically change the language of UI elements.

Default Language also presets the user profile's "Language" option with its value, so the Story Translations will work automatically.

Default Open determines whether the chatbot widget window will be open by default.

Collect Message Reactions toggle determines whether or not the chatbot allows collecting 👍 and 👎 message reactions.

Collect Ratings toggle determines whether or not the chatbot allows collecting ratings.

Show Popup Message toggle determines whether or not the chatbot will display a popup message. Upon activating the toggle, you can customise the popup message text and delay duration (in seconds) before the text bubble shows up.