Connect your bot with Chat Widget
ChatBot.com

luiza jurczyk

Last update:

Chat widget is a ready-to-use chat window you can customize and directly paste into your website. The widget will create a chat window you can use on your homepage or a specific page of your site.

Now your visitors can use to talk to directly from their web browsers without using any additional messaging apps. With the simple creator, you can adjust the chat style and make your bot more personal.

What you can do with Chat Widget:

  • One Chat Widget can be connected to one story. You can create as many Chat Widgets as you need.
  • Customise the Chat Widget the way you want. Select your preferred colors, avatar, and the chat window shape.
  • Chat Widget works perfectly on desktops and mobile devices.
  • Need something else? Chat Widget can also be embedded on your website.
  • Check the Chat Widget API.

The ongoing chat is kept in the cookie. Your client can return to the conversation and continue it from the same point even after reopening the chat window or the webpage.

Installation

  1. Go to the Integrations panel and select Chat Widget.
  2. Select the Story that will be connected to your Chat Widget.
  3. Click on Create Widget button. Now you can see the JavaScript code, you can paste it directly in your website.
  4. If you wish to modify the personalize your bot, click on the Go to customize button.
    • Enabled You can disable your chatbot any time you want. Use this switch button to turn off the Chat Widget while you’re working on your scenario or doing some changes in the chat window appearance.
    • Connected story - Decide which Story should be followed by this chat.
    • Name - Your bot can have a human-like name or just display your company’s name.
    • Description - The description will be displayed on the Welcome Screen. Shortly describe your business and how can the bot help the clients.
    • Social media - Do you use any social media for your business? Add them to your bot chat
    • Appearance - You can change the colors, avatar and background theme.
  5. Go to the Install code section and copy the JavaCode. Paste the code into your website. Remember to save your widget by clicking on the Save button.

You can connect only one Story to one Chat Window. The maximum number of Chat Widgets isn't defined.

How to embed Chat Widget on a website

Some of you ask how to embed a chat widget directly as an element of the page, which is why we’ve prepared a very simple example. Our widget does not provide this option by default, but you can achieve this effect using some tricks. You can see the demo here.

The example above uses two files, one of them has the chat widget code installed (widget.html), and the other one uses the iframe element to load it at a specific place on the page (index.html). In addition, the widget.html file also contains code that makes the plugin open when the page loads.

You can find the source code of these files here.

Check also:

You can view live how your bot is going to look like in minimized version, full version and in the conversation.

Go to next article arrow_forward