Install ChatBot using Chat Widget

The chat widget in ChatBot is a default chat window that functions as your chatbot interface. You can customize its look and feel by adding a custom avatar or text. The upside of the chat widget is that you can add it to your website without coding. 

How to add ChatBot to your website

To add the chat widget to your website, start a free ChatBot trial.

To add the chat widget to your website, start a free ChatBot trial.

1. Log in to ChatBot.

2. To install the widget on your website, open your selected story, navigate to the Integrations icon, and click Connect next to the Chat Widget option.
   

3. Click on the Publish section.
   

4. Click Copy minify code to copy the code.
   

5. 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.

To get the source code, you can check our GitHub repository. There are two files; one of them has the Chat Widget code installed (widget.html), and the other uses the iframe element that loads it at a specific place on the page (index.html). The widget.html file also contains code that opens the plugin when the page loads.

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 tab of the Chat Widget integration window presented above.

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 tab of the Chat Widget integration window presented above.

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

The next steps 

• Customize the chat widget - design your bot’s visual appearance and make the widget style consistent with your website.

• Set up a catchy greeting - attract more website visitors to start chatting.

• Watch Visual Builder basics - learn how to design bot flows in ChatBot.

• Learn with ChatBot Academy - follow the video lessons on chatbot design and implementation.