Widget
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.
Setup
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.
Features
Theme Designer
The Theme Designer feature allows you to fully customize the appearance of your widget to match your brand identity. You can modify colors, fonts, spacing, and other visual elements to create a cohesive look that integrates seamlessly with your website. The designer provides real-time preview capabilities so you can see how your changes will appear before deploying them.
Markdown
Both the intro and each individual message support markdown formatting. This means that you can include links, images, tables and other embeddable content. The following syntax is supported.
| Element | Markdown Syntax |
|---|---|
| Heading | # H1 |
| Heading | ## H2 |
| Heading | ### H3 |
| Bold | **bold text** |
| Italic | *italicized text* |
| Blockquote | > blockquote |
| Ordered List | 1. First item |
| Unordered List | - First item |
| Code | code |
| Link | [Link text](https://path/to/link) |
| Link Button | [Button text](https://path/to/link#button) |
| Link Button (open in frame) | [Button text](https://path/to/link#frame) |
| Text / question suggestion button | [Button text]() |
Themes
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.
Layouts
The ChatBotKit AI Widgets supports a number of different layouts. A layout indicates how the widgets needs to be rendered on the screen. The default layout is popover, meaning that the popup is over the widget button. You can also selected the popout layout where the popup is in the middle of the screen.
The widget layout can also be controlled via the layout property that can be passed during the widget initialization. It can be also setup manually when creating the widget component.
Layouts allow to create more interesting interfaces to support various types of scenarios such as AI-native search interfaces and more.
Icons
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.