How to use the messages feature in the ChatBotKit Widget

Welcome to our comprehensive guide on how to utilize the messages feature in the ChatBotKit AI Widget. This feature allows to add additional messages at the beginning of the conversation session to convey contextual information about the user. For example, you may want to preempt your bot with some user information such as their name or even the kind of problem they are experiencing.

Below, we will walk you through the process from creating a new website widget, to embedding it into your website, initializing the widget with some message. Let's get started!

Step 1: Create a new website widget

1. Navigate to Integrations and click the Create Widget Integration button.
2. Fill in the name and optional description.
3. Connect to an existing Bot or select a Backstory, Model, Dataset and Skillset.
4. Save the integration by clicking the Create button.

Step 2: Embed the widget into your website

1. Click the Install button.
2. Copy the widget snippet (code).
3. Paste the snippet into your website.

Step 3: Initialize the ChatBotKit Widget with Messages

Once you have the widget installed on your website, you can initialize it with custom messages. This can be done programmatically using the chatbotkitWidget.instance object.

Here's an example of initializing the widget with metadata:

chatbotkitWidget.instance.messages = [
  {type: 'user', text: 'My name is Bob!'}
  // other relevant messages
]

In the above example, we only create a single message that communicates to the bot that the current user’s name is Bob. We can add more messages but beware that the widget can only initialise chat sessions with just the user message type. This is done for security reasons.

You can also pass the messages right inside the properties when embedding the widget SDK. Here are two additional methods you can use for that:

Embedding via the Widget SDK

With this method we pass a JSON encoded object directly into the meta data attribute of the Widget SDK. The information will be picked up automatically and used to initialise the widget.

<script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{WIDGET_ID}" data-messages="[{&quot;type&quot;:&quot;user&quot;,&quot;text&quot;:&quot;My name is Bob!&quot;}]"></script>

Embedding via the Widget Element

With this method we pass a JSON encoded object directly into the meta attribute of the Widget HTML element. Notice that we include the SDK but we initialise the widget manually using HTML.

<script src="https://static.chatbotkit.com/integrations/widget/v2.js"></script>
<chatbotkit-widget widget="{WIDGET_ID}" meta="[{&quot;type&quot;:&quot;user&quot;,&quot;text&quot;:&quot;My name is Bob!&quot;}]"/>

Just like that we now can automatically communicate to the bot some additional information that may become relevant in the conversation.