How to use the meta-data feature in the ChatBotKit Widget

Welcome to our comprehensive guide on how to utilize the meta-data feature in the ChatBotKit AI Widget. This feature allows you to tag and track your conversations effectively, leading to improved user interactions and behavior analysis. Below, we will walk you through the process from creating a new website widget, to embedding it into your website, initializing the widget with meta-data, using and updating the meta-data. 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 Metadata

Once you have the widget installed on your website, you can initialize it with metadata that can be used to tag your conversations. This can be done programmatically using the chatbotkitWidget.instance object.

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

chatbotkitWidget.instance.meta = {
  userId: "1234",
  email: "user@example.com",
  // other relevant details
}

In the above example, userId and email are the metadata properties. You can replace these with any relevant details that you want to associate with the conversation.

Alternatively you can pass the meta-data 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-meta="{&quot;userId&quot;: &quot;123&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;userId&quot;: &quot;123&quot;}"/>

Step 4: Use the Metadata

You can use the metadata for various purposes such as retrieving specific conversations, personalizing user interactions, and tracking user behavior. This can be done programmatically using filter constraints when retrieving conversations. The following example demonstrates how to do that with the Note SDK.

import ChatBotKit from '@chatbotkit/sdk'

const cbk = new ChatBotKit({ secret: process.env.CHATBOTKIT_API_SECRET })

for await (const conversation of cbk.conversation.list({ meta: { userId: '123' } })) {
  // do something with the conversation
}

By following these steps, you can effectively use ChatBotKit's metadata feature to enhance your chatbot's functionality and have better way to retrieve conversations associated with your users.