The chat widget is a small button on your website that opens a conversation with your AI sales agent when a visitor clicks it. Setting it up takes two steps: configuring the widget in the Admin Portal, then passing two code snippets to your web team to embed on your site.
In this article:
Turn on and configure the widget in the Admin Portal
Customize the widget appearance
Embed the widget on your website
Control which pages the widget appears on
Test the widget before going live
Before you begin
You need admin access in the Flex Admin Portal.
Embedding the widget requires access to your website's HTML. Have your web team ready before you start; you'll be giving them two code snippets to paste into your site.
The widget settings are per account, not per location.
Configure the widget in the Admin Portal
To access the chat widget settings, go to AI Hub > Settings and scroll down to the Chat widget theme and Chat widget embedding sections.
Customize the widget appearance
The Chat widget theme section controls how the widget looks on your site. Use the following fields to match it to your brand.
Field | What it controls |
Primary color | The color of the chat button and the accent color inside the chat pane |
Background color | The background color of the chat pane |
Navigation color | The color of the chat header |
Font family | A CSS font-family value, for example |
Font stylesheet URL | Optional. A link to a stylesheet that loads the font, typically a Google Fonts URL. Use this when the font isn't already part of your site's CSS. |
Embed the widget on your website
The Chat widget embedding section provides two code snippets for your web team. Both fields are read-only and pre-filled for your account. Use the copy button next to each field to copy the code.
Website Script: A <script> tag to paste into the <head> of every page where the widget should be available.
Page Embed Code: A small <ai-hub-widget …> tag to paste into the <body> of each page where the chat button should appear.
Note: Your web team needs to add both snippets. The Website Script loads the widget code; the Page Embed Code tells it where to render the button. Neither works without the other.
Control which pages the widget appears on
Once the snippets are in place, you can control exactly which pages the widget appears on using the rules in the Chat widget embedding section. This is useful if you want the script available site-wide, but the chat button to appear only on specific pages.
Field | Behavior |
Allowed hosts | The hostnames where the widget is allowed to render, for example |
Include paths | Paths where the widget should appear, for example |
Exclude paths | Paths where the widget should never appear. Exclusions always win — if a path matches both an include and an exclude rule, the widget is hidden. |
How path patterns work
The include and exclude path fields use glob patterns. Here's how they work:
*matches anything except a slash./pricing/*matches/pricing/teambut not/pricing/team/details.**matches anything, including slashes./help/**covers the entire help section.Everything else is matched exactly as written.
If a URL doesn't match your rules, the widget stays hidden without showing an error to the visitor.
Test the widget before going live
You don't need to embed the widget on a live site to test it.
In the Admin Portal, click Test AI Agent, select Chat as the channel, then click Open Chat Preview.
A sample page opens with the widget already loaded, so you can start a conversation exactly as a visitor would.
Use this chat preview to verify your agent's tone, qualification flow, and handoff messaging before sharing the code snippets with your web team.