Quick Start

Chat

Put an AI chat widget on your site and build the conversation workflows behind it.

4 min readSidebar: ChatSwitch to Complete Manual
Who can see this: Hidden from agents and supervisors.

Chat is the AI chat widget you embed on your website, plus the conversation workflows it runs. The sidebar section is Chat, and its pages are Widgets, Test Widgets, and Workflows.

Chat is the fastest thing to get live in FloGPT — under 30 minutes is normal. Do the Start here guide first if you have not created a knowledge base yet, because that is what makes the answers yours.

Step 1 — Create a widget#

Go to Chat → Widgets and press Create Widget.

1
Step 1. The Widgets page. Each card carries Appearance, Code, Config, Survey, and Edit.

Four fields, two of which matter:

  • Widget Name — internal, up to 60 characters.
  • Allowed Domains (comma-separated) — the sites permitted to load this widget, e.g. example.com, https://www.example.com. Leave a site out and the widget will not appear there.
  • Workflow (Optional) — leave as No Workflow for now.
  • Knowledge Base (Optional) — pick the knowledge base you built. Do pick it. Without one the AI answers from general knowledge instead of from your business.

Press Create.

Step 2 — Install it on your site#

On the widget's card press Code. The Widget Configuration dialog opens with an Integration Code section containing a <script> block.

Copy that whole block and paste it into your site's HTML just before the closing </body> tag. It is one snippet, it loads asynchronously, and it needs no build step.

Reload your site. The launcher appears in the corner.

If it does not appear, the cause is almost always Allowed Domains — the domain you are testing on has to be in that list, and www.example.com and example.com are different entries.

Step 3 — Make it look like your brand#

Back on the card, press Appearance. This opens the customizer with a live preview beside the controls.

The groups you will actually use on day one:

  • Themes — start from a preset rather than a blank slate.
  • Colors — Primary Color, Secondary Color, Message Text Color.
  • Shape & Layout — Border Radius, Widget Position (any of the four corners), Theme Mode (light, dark, or auto).
  • Logo — upload a file or point at a URL.
  • Widget Text — Title, Subtitle, Welcome Message, Greeting Text, Placeholder Text.
  • Floating Button — the launcher itself: style, animation, colours, and greeting.

There is also Custom CSS if you need to go further, using .chatflow-* selectors.

Two save buttons, and the difference matters. Save stores your work. Publish pushes it to the live widget your visitors see. You can save as often as you like without changing anything publicly.

Step 4 — Test changes safely#

Before you change a widget that real customers are using, clone it. Go to Chat → Test Widgets and press Create Test Widget.

4
Step 4. Test Widgets. A sandbox clone of a live widget, so experiments never touch real traffic.

Pick a Source Widget, then choose what to bring across under Include in Test Widget:

  • Workflow — clones the workflow into a separate test copy.
  • Knowledge Base — references the same knowledge base.
  • Prompt Overrides — copies prompt override settings.
  • Appearance — copies theme, colours, and styling.

Test widgets are marked with a TEST pill and have a Reset Session button so you can start a conversation over from scratch.

Step 5 — Add a workflow when the AI needs to follow a script#

A widget with a knowledge base answers questions well. A workflow is for when the conversation has to do something in a defined order — qualify a lead, collect a booking, look up an order, escalate to a person.

Go to Chat → Workflows and press New Workflow.

5
Step 5. The Workflows list. Production workflows and their test drafts.

You get two choices:

  • Start from Scratch — a blank canvas.
  • Choose a Template — pre-built flows including Customer Support, Lead Qualification, Product Recommendation, FAQ Bot, Order Tracking, Feedback Collection, Newsletter Signup, Technical Support, Product Inquiry, User Onboarding, Welcome & Routing, and Out of Office.

Start from a template. It is far easier to delete nodes than to invent a flow.

In the builder you drag nodes from the Components panel and connect them. The ones you need first are Start, Message, Button Message, Condition, LLM Process, Human Handoff, and End. Tick Show Advanced Components for the rest.

When it works, press Save, then Publish, then Activate. Finally go back to your widget's Edit dialog and set Workflow to the one you just published.

Where to go next#

  • Every field in the customizer, every node type, and the test-draft promotion flow: Chat manual.
  • Grounding answers in your own content: Knowledge.
  • When the AI hands a conversation to a person: Support.
  • Per-widget performance: Insights → Widget Analytics.

Chat supports 50+ languages. That is a different figure from the 16 voice languages in AI Calls — the two are not the same list.