Guides Knowledge AI
Chatbot integrations / Chatbot widget

Chatbot widget

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 pre-built chatbot widget on my website?
Go to Settings → Chatbot widget and use the generated embed snippet. After you assign an API key on the API integration tab, the product provides a ready-to-use script tag you can paste into your site’s HTML. The widget appears as a floating chat icon that expands into a full conversation interface.
How does API integration work for the chatbot widget?
On the API integration tab, you assign an API key to the widget. Once assigned, Guides Knowledge AI generates both an embed snippet for client-side use and an Answer API cURL command for server-side integrations. For security, the API key is masked in the displayed snippets.
How can I customize the chatbot widget’s appearance?
In the Appearance settings, you can set an accent color (including entering a hex value) and choose a display mode: Popup or Sidebar. You can also add Custom CSS to override default styles. The custom CSS is applied inside the widget’s iframe.
How do I control where the chatbot widget is allowed to load?
Use the Allowed URLs setting to specify which origins can load the widget. Add URLs to an allowlist, and you can use wildcards such as https://*.example.com. If you don’t configure any URLs, the widget will not load on any site.
What JavaScript controls 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.