Install ChatBot using Chat Widget

The Chat Widget in ChatBot is a default chat window that functions as your chatbot interface. Adding a custom avatar or text can customize its look and feel.

You can install the bot on your site without coding - just paste the provided code into your site’s source code.

Remember to publish your bot flow once your changes are done. Otherwise, the changes won’t be visible when the bot is installed on the site, and an example flow will be available in the chat window.

Remember to publish your bot flow once your changes are done. Otherwise, the changes won’t be visible when the bot is installed on the site, and an example flow will be available in the chat window.

How to install a bot on your website

Before you install the bot on your site, you must ensure that all the changes in the bot flow are made. Before you paste the code, you can configure and customize the Chat Widget. The changes will be visible when you save them and publish the bot.

Check out how quick and easy it is to install the ChatBot Chat Widget on your website in our video tutorial.

Check out how quick and easy it is to install the ChatBot Chat Widget on your website in our video tutorial.

1. Open your bot and go to the Integrations icon. Click Connect next to the Chat Widget option.
   

2. Go to the Publish section and copy the code.
   

3. Paste the code to your website’s source code before the /body closing tag.

How to embed Chat Widget on a website

By default, the Chat Widget can’t be embedded as an element of the page. However, there is a workaround that lets you do it. See how it can look here.

You can check our GitHub repository for the source code. There are two files:

• widget.html - contains the installed code to open the plugin when the page loads

• index.html - contains the iframe element to load it at a specific place on the page

Files from the repository contain an example code. To make it work on your site, you must change the Chat Widget ID in the widget.html file. You can find the ID in the Publish section of the Chat Widget integration window.

Files from the repository contain an example code. To make it work on your site, you must change the Chat Widget ID in the widget.html file. You can find the ID in the Publish section of the Chat Widget integration window.

Embed the ChatBot’s chat widget on other stores and platforms

ChatBot provides free and ready-to-use integrations that allow you to add a bot to e-commerce platforms or connect it with popular web builders. Follow the following tutorials to learn more: 

Add ChatBot to Shopify 

Add ChatBot to WordPress 

Connect ChatBot with any service using Zapier

How to temporarily disable the Chat Widget on your site

To disable the bot without erasing it completely from your site, go to the Chat Widget integration and switch the integration toggle to the off position.

How to delete the Chat Widget from your site

To delete the integration from your site, delete the tracking code from the source code or go to the Chat Widget integration and delete the integration using the button in the General section.

Read more:

• Customize the chat widget

• Set up a catchy greeting

• Watch Visual Builder basics

• Learn with ChatBot Academy