Chat Widget

The Chat Widget lets you embed your chatbot directly on your website. Visitors will see a chat icon they can click to start a conversation, and the widget will appear on all pages where you add the embed code.

Three Steps to Deploy

The Chat Widget setup is organized into three tabs: Content, Style, and Embed. You'll see a live preview of your chatbot on the right side as you make changes.

Content Tab

Customize what visitors see and hear when they interact with your chatbot:

Display Name

The name shown at the top of the chat window
This is how visitors identify your chatbot (e.g., "Support Assistant", "Sarah")

Initial Messages

Messages that appear automatically when someone opens the chat
Think of these as your chatbot's greeting
You can add up to 4 initial messages
Use these to welcome visitors, set expectations, or guide the conversation

Suggested Messages

Quick action buttons that appear at the bottom of the chat
Help visitors know what they can ask or do
Examples: "Check order status", "See pricing", "Talk to a human"
You can add up to 4 suggested messages

Input Placeholder

The text that appears in the message input box before someone types
Default examples: "Type your message...", "Ask me anything..."

Dismissible Notice

An optional message banner that visitors can dismiss
Useful for announcements, promotions, or important information
Visitors can close it, and it won't appear again for them

Style Tab

Make the widget match your website's look and feel:

Theme

Choose between Light or Dark theme
Pick what best matches your website's design

Chat Icon

The icon that appears on your website to open the chat
Upload a custom image (max 2MB) or use the default
This is what visitors click to start chatting

Profile Icon

The chatbot's avatar that appears inside the chat window
Upload a custom image (max 2MB) to personalize your chatbot's appearance

Primary Color

The main color used throughout the chat widget
Affects buttons, links, and accent colors
Use your brand color to keep things consistent
Click the reset button (↻) to return to last saved color

Chat Icon Color

The background color of the chat icon button
This is separate from the primary color
Make sure it stands out against your website background

Chat Icon Alignment

Choose whether the chat icon appears on the left or right side of the screen
Right is most common (default), but left can work better for some layouts

Embed Tab

Get the code to add the widget to your website:

Widget vs Iframe

You'll see two options:

Widget (Recommended): The full-featured version that enables all your chatbot's advanced features. This is the best option for most websites.
Iframe: A simpler embedded version if you need basic chatbot functionality in a specific location.

Getting Your Embed Code

Select your preferred method (Widget is recommended)
Copy the code snippet shown
For Widget: Paste it into your website's <head> or <body> tag
For Iframe: Paste it where you want the chatbot to appear on the page

The code is already configured with your chatbot's unique ID, so it will work immediately once you add it to your site.

For advanced integration options, JavaScript APIs, and programmatic control of the widget, see the Widget API Reference in the Developer Guides.

Live Preview

As you make changes in the Content or Style tabs, you'll see them reflected immediately in the preview on the right side of the page. This lets you see exactly how your chatbot will look and behave before deploying it.

Saving Your Changes

After customizing your widget:

Make your changes in the Content and Style tabs
Click "Save Changes" at the bottom of the form
Your changes will be live once you add or update the embed code on your website

The embed code only needs to be added once to your website. After that, any changes you make to Content or Style settings will automatically appear on your live widget without needing to update the code again.

Best Practices

Keep initial messages concise - One or two short messages work better than a long paragraph
Use suggested messages strategically - These are great for guiding visitors to common questions or actions
Match your brand - Use colors, icons, and styling that align with your website's design
Test on mobile - Make sure the chat icon is easily tappable on phones and tablets
Choose the right theme - Light theme for light websites, dark theme for dark websites