←back to tutorials

How to use AI Widget Notifications

This guide covers setting up notifications, retrieving them dynamically, and managing their display order in your AI Widget integration.

The ChatBotKit AI Widget allows you to dynamically insert interactive messages and notifications into the conversation. These notifications are managed by the widget and will appear in the order they are added. Removing a notification from the notifications object will also remove it from the conversation.

Prerequisites

Before you start, make sure you have the ChatBotKit Widget SDK embedded in your application:

<script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{YOUR_WIDGET_ID}"></script>

Step 1: Retrieve Available Notifications

Create a function to retrieve the notifications you want to display in the widget. This could involve making an API call to fetch notifications from your backend. For this example, we'll simulate it with a mock function:

async function getNotifications() {
  // Simulating a network delay
  await new Promise((resolve) => setTimeout(resolve, 1000));

  // Generate a unique ID for the notification
  const uniqueNotificationId = Math.random().toString(32).slice(2);

  // Return the notifications
  return {
    [uniqueNotificationId]: {
      text: 'Hi Sara, your device has been offline for 12 hours\\n\\n[What is the current status of my device]() [How can I get my device back online]()'
    }
  };
}

Step 2: Set Up Notifications

Create a function to assign the retrieved notifications to the widget instance:

async function setupNotifications() {
  // Get the notifications
  const notifications = await getNotifications();

  // Wait for the widget instance to be available
  const instance = await window.chatbotkitWidget.instancePromise;

  // Assign the notifications to the widget
  instance.notifications = notifications;
}

Step 3: Call the Setup Function

Call the setupNotifications function to add the notifications to the widget:

setupNotifications();

That's it! The notifications will now appear in the ChatBotKit AI Widget in the order they were added. Removing a notification from the notifications object will also remove it from the conversation.

The end result looks like this.

Tips

  • Use unique IDs for each notification to easily manage them.
  • Notifications support markdown formatting, so you can include links and other interactive elements similar to the way messages are rendered.
  • You can dynamically update the notifications at any time by assigning a new object to instance.notifications. The order of the notifications is automatically managed for you.
widgetAI widgetnotificationsSDK