Embed a pre-built chatbot widget directly into any website. The widget provides a floating
chat icon that expands into a full conversation interface. Configure the widget under
Settings → Chatbot widget
.
On the API integration tab, assign an API key to the widget. Once assigned, Guides
Knowledge AI generates a ready-to-use embed snippet (a script tag you paste into your
website's HTML) and an Answer API cURL command for server-side integrations. The API
key is masked in the displayed snippets for security.
Customize the widget's visual style:
- Accent color — pick a color or enter a hex value to match your brand.
- Display mode — choose Popup (floating overlay) or Sidebar
(anchored panel).
- Custom CSS — inject custom CSS to override the widget's default styles. The CSS
is applied inside the widget's iframe.
Set a custom heading (defaults to the domain name) and a logo URL to brand
the widget header.
Choose between Streaming (tokens appear in real time as the model generates them)
and Standard (the full answer is displayed once generation is complete).
Specify which origins are permitted to load the widget. Add URLs to the allowlist
(wildcards are supported, e.g. https://*.example.com). If no URLs are
configured, the widget will not load on any site.
The CSS reference tab documents available CSS custom properties
(e.g. --fb-color) and class names you can target with custom CSS. The
JavaScript reference tab documents programmatic controls:
FlamebackWidget.open(), .close(),
.toggle(), and the fb-widget-ask custom event for
triggering questions from your own code.
FAQ
How do I embed the chatbot widget on my website?
Go to Settings → Chatbot widget and use the pre-built widget that provides a floating chat icon expanding into a full conversation interface. In the API integration tab, assign an API key to the widget. After you assign the key, the product generates a ready-to-use embed snippet (a script tag) you paste into your site’s HTML.
What do I get on the Chatbot widget API integration tab?
You assign an API key to the widget on the API integration tab. Once assigned, Guides Knowledge AI generates both an embed snippet for client-side embedding and an Answer API cURL command for server-side integrations. The API key is masked in the displayed snippets for security.
How can I customize the chatbot widget’s appearance?
In the Appearance section, you can set an accent color by picking a color or entering a hex value. You can choose a display mode: Popup (floating overlay) or Sidebar (anchored panel). You can also add custom CSS to override default styles; this CSS is applied inside the widget’s iframe.
How do Allowed URLs work for the chatbot widget, and what happens if I don’t configure any?
Allowed URLs let you specify which origins are permitted to load the widget by adding URLs to an allowlist. Wildcards are supported, such as https://*.example.com. If no URLs are configured, the widget will not load on any site.
What JavaScript controls and events are available for the chatbot widget?
The JavaScript reference documents programmatic controls for the widget: FlamebackWidget.open(), .close(), and .toggle(). It also documents the fb-widget-ask custom event, which you can use to trigger questions from your own code. These references are available under the CSS & JavaScript reference section.