back to tutorials

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

Learn how to utilize the meta-data feature in the ChatBotKit Widget to tag and track your conversations effectively. Improve user interactions and behavior analysis. Follow the step-by-step guide to create a new website widget, embed it into your website, initialize the widget with meta-data, and use the meta-data for various purposes.

Welcome to our comprehensive guide on how to utilize the meta-data feature in the ChatBotKit 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 method you can use for that:

<!-- embedding via the widget SDK --> <script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{WIDGET_ID}" data-metadata="{&quot;userId&quot;: &quot;123&quot;}"></script> <!-- embedding via the widget instance --> <script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{WIDGET_ID}"></script> <chatbotkit-widget widget="{WIDGET_ID}" metadata="{&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.