←back to tutorials

How to make an AI Widget with Contact Assignment

Learn how to integrate the ChatBotKit Widget into your website and assign user contact information for a personalized AI-powered experience.

This tutorial guides you through integrating the ChatBotKit Widget into your website specifically for environments where users are already authenticated. The process involves embedding the widget and automatically assigning user contact information from the session to the widget.

Step 1: Embedding the ChatBotKit Widget

First, embed the ChatBotKit widget in your website by placing the following JavaScript snippet either in the <head> section or at the end of the <body> section of your HTML.

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

Make sure to replace {YOUR_WIDGET_ID} with the actual ID provided by the ChatBotKit platform.

Step 2: Assigning Contact Information from User Session

Assuming the user is already authenticated, you can collect their contact information (such as name and email) directly from the user session. Here's how you can initialize the ChatBotKit widget and assign the user's contact details:

The function chatbotkitWidgetInit is called when the widget is initialized, pulling user information from the session and assigning it to the widget.

<script>
function chatbotkitWidgetInit() {
    const widget = chatbotkitWidget.instance;

    // Hypothetical example to fetch user details from a user session
    const userName = "John Doe"; // This should be dynamically fetched from the session
    const userEmail = "john.doe@example.com"; // This should be dynamically fetched from the session

    // Assign contact information to the widget
    widget.assignContact({
        name: userName,
        email: userEmail
    });
}
</script>

And we are done!

Key Points to Remember

  • Replace {YOUR_WIDGET_ID} with your actual widget ID in the script tag.
  • The function chatbotkitWidgetInit will be called once the widget is fully loaded, enabling us to customize it according to our specifications.
  • Ensure that Contact Collection feature is enabled.
  • Adjust the script to dynamically fetch user information from your session management system. This example uses placeholder data.

This streamlined approach enhances the user experience by eliminating the need for manual data entry and utilizes the existing authentication system to personalize interactions through the ChatBotKit AI Widget.

chat widgetAIcontact collection