In addition to the Slack, Discord and WhatsApp, ChatBotKit also offers a Widget integration, which allows users to embed ChatBotKit directly on any website or other platforms where iframe embedding is allowed. This feature allows users to engage with AI chatbots directly from a website, providing a convenient and seamless experience for customers. The widget integration is fully customizable, allowing users to tailor the appearance and functionality of their chatbot to fit their specific needs.
Follow these steps to create a new website widget:
- Go to Integrations and then click the Create Widget Integration button.
- Fill in the name and optional description.
- Connect to an existing Bot or select a Backstory, Model, Dataset and Skillset.
- Save the integration by clicking the Create button.
Now that the integration is saved you can embed it into a website.
- Click the Install button.
- Copy the widget snippet (code).
- Paste the snippet into your website.
Both the Intro and each individual message support markdown formatting. This means that you can include links, images, tables and other embeddable content.
The widget integration offers a variety of themes to choose from. By default, the theme is set to "light". You can customise the primary color. Additional themes are available in the Examples and you can even build your own via the Theme Builder.
Themes are an extremely useful tool for crafting bespoke chat user experiences without the need for coding. By personalizing the look and feel of your chat interface, you can enhance the user experience and create a more engaging and interactive environment for your users. With themes, you can easily tailor your chatbot to match your brand's aesthetic, incorporating your company's logo, color palette, and fonts. Additionally, you can experiment with different themes to identify which designs are most effective at engaging your target audience. With the ability to customize every aspect of your chat user experience through themes, the possibilities for creating an immersive and engaging chatbot are endless.
The widget integration allows you to customize the icons displayed within the chatbot interface. There are four types of icons that can be customized: the bar icon, the user icon, the bot icon and the button icon. Each of these icons can be set to a custom image.
To customize the icons:
- Go to the Integrations page and select your widget integration.
- Scroll down to the "Icons" section.
- Customize the icons by selecting the icon files from your disk.
By customizing the icons, you can create a more personalized and engaging chat experience for your users. Incorporating your brand's iconography or using fun and expressive emojis can help to create a chatbot that feels more like a natural conversation partner.
Your Widget can be configured to only run on specific websites. This is a recommended security feature to ensure that chat sessions can only be initialized from your website alone.
The origin is the web page address without the path (referred to as the "base URL" or "root URL."). It is the portion of the URL that includes the protocol (e.g. "http" or "https"), the domain name, and any subdomains (e.g. "www"), but not the specific page or resource being accessed (the path).
It is advisable to use this feature to ensure that your Widget can only be used from specific locations.
You can use comma (,) to specify multiple origins.
streaming feature allows for continuous updates to the chatbot user interface. This is useful for scenarios where the chatbot is being used for real-time communication, such as customer support. To enable this feature, simply toggle the
stream option when updating your widget integration.
When the verbose option is turned on, the widget will display additional context information such as what the chatbot is searching for or what actions it executes. This option improves the overall user experience.
ChatBotKit's widget includes a set of auxiliary tools that can be included with each message produced by the AI bot. These tools include the ability to copy the message to the clipboard, as well as a thumbs up and thumbs down rating system.
Enabling the Tools feature can be done by toggling the "Tools" option in the widget configuration. When enabled, each message produced by the bot will include a small toolbar with the auxiliary tools. This allows users to easily copy important information from the chat interface or provide feedback on the quality of the AI bot's responses.
The copy to clipboard feature is particularly useful for chatbots that are used for customer support or e-commerce, as it allows users to easily copy important information such as order numbers or tracking information without having to leave the chat interface. Additionally, the thumbs up and thumbs down rating system can be a useful tool for gathering feedback from users on the quality of the AI bot's responses. This feedback can be used to improve the chatbot over time and ensure that it is providing the best possible experience for users.
URL unfurling is a feature that allows the ChatBotKit widget to display a preview of a URL that has been shared in the chat. This preview typically includes a title, description, and image associated with the URL. This feature is particularly useful for chatbots that are used for customer support or e-commerce, as it allows chat bots to easily share product pages or other relevant information in a graphical way without forcing the user to leave the chat interface.
To enable URL unfurling, simply instruct the bot to include the URL in a message. The ChatBotKit widget will automatically detect the URL and generate a preview.
ChatBotKit's widget also offers a Contact Collection feature, which allows customers to collect the name and email address of visitors who are using the widget.
When enabled, the Contact Collection feature will prompt visitors to enter their name and email address before starting a chat session with the chatbot. The collected information will be stored in ChatBotKit's conversation and can be accessed by the customer.
The Contact Collection feature is particularly useful for businesses that want to collect leads or customer information. By collecting the name and email address of visitors who are using the chatbot, businesses can follow up with potential customers and build a relationship with them over time.
Turning Branding Off
Customers on our Pro, Team, and Ultimate tiers have the option to turn off the "Powered By ChatBotKit" branding in their Widget integrations. This option can be found in the "Advanced Options" section of the Widget configuration. To turn off the branding, simply toggle the switch.
⚠️ Please note that this option is only available to customers on our Pro, Team, and Ultimate tiers.
Use of Media
The ChatBotKit widget supports the display of images and videos as long as they are generated by the chatbot in markdown format. The markdown image embedding syntax applies for both cases. Customers who wish to display media need to instruct the chatbot to output images, YouTube videos, or any other form of video and audio content using the markdown image embedding format:
By using this syntax, chatbot creators can easily integrate visuals and multimedia into their chatbots. This can be particularly useful for chatbots that are used for e-commerce or customer support, as it allows chatbots to easily share product images or instructional videos without forcing the user to leave the chat interface. Additionally, by incorporating multimedia into your chatbot, you can create a more engaging and interactive experience for your users, helping to improve customer satisfaction and engagement.
All conversations initiated through the widget can be associated with specific meta-data. This meta-data can include information about the user, the context of the conversation, or any other relevant data. The meta-data is passed to the widget during its initialisation and can be used to personalize the chat experience or to provide context for the AI bot.
Detailed instructions on how to pass meta-data to the widget will be covered in the following section of this documentation page.
Embedding The Widget
The Widget can be easily embedding with a script tag like this:
Additional parameters (see next section) can also be passed as data attributes. For example:
If no data-widget property is present then the SDK will be initialised but no widget will be instantiated. In this case you will need to instantiate the widget using its HTML custom tag. For example:
Embedding The Frame
You can also embed the Widget frame directly. This method gives you to a greater degree of control over the widget without the need to include the SDK. For example:
The following parameters can be passed to the frame or the custom HTML tag no matter the method of embedding:
|Boolean property to indicate if widget should be open|
|The session for this frame.|
|The URL for the bar icon|
|The URL for the user icon|
|The URL for the bot icon|
|The URL for the button icon|
|Placeholder text for the main chat input area|
|A meta data field to pass to the conversation|
Here is a quick example how to embed the Widget iframe directly:
Use your own widget integration id instead of
A working example of this embedding technique can be found here.
It is also possible to embed the widget iframe with the SDK. Follow the same steps as normal widget setup but do not specify the widget id. For example:
Notice that we simply include the ChatBotKit SDK but we do not indicate which widget we want to load. Now we can include the widget anywhere on the page by using a custom tag like this:
The custom widget tag also supports several built-in methods which allow you to interact with the widget. For example:
The following methods are supported:
|Restarts the current conversation|
|Send user message|
|Hide the widget|
|Show the widget|
The following getters and setters are also supported:
|Getter / Setter||Description|
|Open or close the widget|
Developers can also subscribe to the following events:
| Triggered when a message is sent. | |receive
}` | Triggered when a message is received. |
A working example of this embedding technique can be found here.
Widget Frame Direct Communication
Developers can use the
postMessage API to send messages to the ChatBotKit Widget frame. This allows for an alternative programmatic interaction. To use this API, developers must have access to the iframe element containing the Widget frame. Once access is granted, developers can use the following code to send a message:
postMessage API can be used to trigger various actions and events within the Widget frame.
The following event types are supported:
|Restarts the current conversation|
|Send user message|
Similarly, developers can receive events via the
postMessage API as well. Here is an example:
Continuous Chat Sessions
The ChatBotKit Widget supports continuous user sessions. A single session is one continuous conversation with a chat bot. Sessions are preserved across tabs and windows and automatically synchronized. This means the user can continue the conversation even when navigating to a different part of your website or switching tabs.
This is often the expected best possible experience for your end customers. Still, there are times when you may want to control when and how to chat sessions are created. In these situations, you can use the
session parameter to define your unique identifier to distinguish between separate continuous conversations.
session parameter can be any value - an id or just a random sequence of characters. By default each user gets a unique session every day. Once you set up the
session, conversations will continue on the same conversation channel. For example, you may want to distinguish chat sessions that have started from one area of your website from others. Or perhaps, your landing pages might need a completely new chat session. In this case, you can use the
session parameter to start separate continuous chats.
It is also equally possible that every page has its own chat session. This means the session will not be preserved when navigating different pages. To do so, use the current page address for the
session, for example.
You can also pass the special value
none. This means that you don’t want any session. This is means that no matter how many times a user visit the widget they will have a fresh conversation window.
In summary here is a table for all possible
|When no value provided the session is pinned to the current day|
|The session is pinned to the provided string.|
|No session - no history|