How to Add Custom Chat Widgets in AI Studio

AI Studio Chat Widgets let you create a chat experience that looks like a natural part of your website. Just ask AI Studio to add a chat widget, and it builds one that matches your site's colors, fonts, and layout. You can customize everything from the greeting and placement to the overall appearance using AI prompts or by editing the code directly.

AI Studio builds the chat interface directly into your app's code, while Captivation Hub powers the messaging behind it. That means your widget can have a fully customized design while still connecting to your existing contacts, Conversations, and chat settings. You can even create multiple chat widgets within the same project for different pages or visitor experiences.

Note: AI Studio supports Live Chat and SMS/Email Chat. Voice Chat, WhatsApp, Facebook Messenger, and Instagram chat widgets are not currently supported.

How AI Studio Chat Widgets Work

When someone sends a message through the widget, it shows up in Conversations, where your team can read and reply. Replies are delivered back to the visitor through the chat widget, just like a standard Live Chat conversation.

The widget also supports existing Captivation Hub chat functionality, including conversation history, file attachments, message delivery status, business hours, and spam protection. Returning visitors can continue previous conversations, and the widget follows your configured chat settings.

Each widget you create in AI Studio also appears under Chat Widgets in your Captivation Hub account alongside your other chat widgets. If you open an AI Studio-created widget for editing from there, you'll be directed back to AI Studio to manage its settings.

Step 1 — Add a Chat Widget in AI Studio

AI Studio creates and connects chat widgets through a guided setup, so you don't need to manually install any embed code.

1. From within your AI Studio project, enter a prompt asking AI Studio to add a chat widget. For example: "Add a chat widget to my website."

2. Choose the chat type you want to add, then click Connect.

3. Answer AI Studio's design questions to customize the chat experience. You can set how the widget greets visitors, where it appears, and the tone of its messages.

4. Once AI Studio finishes, it creates a chat widget in your Captivation Hub account, names it after your project, and connects it to your application automatically. Open your app preview to see how it looks and interacts with visitors.

5. To make changes, simply ask AI Studio to update the widget's appearance. You can also edit the generated code for more control. For example: "Change the background color of the chat widget to yellow so it sticks out."

Step 2 — Configure Chat Widget Settings

AI Studio lets you manage your chat widget's settings without leaving your project. While AI Studio prompts handle the visual side, the Chat Widgets settings let you control what visitors see during conversations, what information they need to provide, and how the chat behaves overall.

To access these settings, open your AI Studio project and go to More → Chat Widgets. Select the widget you want to manage.

From here you can rename the widget and configure:

• Messaging: Welcome messages, inactivity timeouts, chat-ended messages, acknowledgements, and feedback prompts.
• Contact Form: What contact information visitors must provide before starting a conversation.
• Compliance Notice & Consent: Legal notices and consent options for privacy, marketing, SMS, and HIPAA requirements.
• Spam Protection: Suspicious lead handling, tagging, and optional Do Not Disturb (DND) settings.
• Live Chat Business Hours: When your team is available and what visitors see outside those hours.

Note: If your project doesn't have a widget yet, click Add a Chat Widget from the Chat Widgets page to have AI Studio create one.

Step 3 — Review Chat Widget Analytics

Chat Widget Analytics shows you how visitors interact with your chat widgets. You can track load and open rates, review visitor feedback and satisfaction ratings, and see which widgets are generating leads.

To view analytics, open your AI Studio project and go to More → Analytics → Chat Widgets.

The dashboard shows how many times each widget was Loaded or Opened, along with the Open Rate (the percentage of loads that led to an open) and Feedback from visitor chat ratings.

The All Leads table lists contacts generated through your chat widgets, including contact details, chat type, widget name, and the page where each conversation started.