AI Flows
AI flow settings
Set the first message an AI flow sends and style its website chat widget with CSS.
Open the settings#
On the AI flow's canvas, click the gear in the header (AI flow settings). It lists:
- First message: what people see when a chat starts.
- Widget style: custom CSS for the AI chat widget.
- Knowledge: the website pages and files your agents search. See Knowledge step.
- Knowledge from your website: shown when the flow was built from a website scan, with how much of the site is covered.
First message#
- 1
Open it
Click the gear, then First message.
- 2
Write the greeting
Type it in Message. The Preview shows it as a chat bubble.
- 3
Save
Click Save, then Preview or Publish in the header to save it to the flow.
Keep it short and say what the bot can help with, for example: Hi! I'm Dana from Bloom Flowers. Ask me about delivery, orders or returns. If you leave it empty, the flow uses a default greeting.
Widget style#
Style changes the AI chat widget people see through the flow's chat link and website embed.
- 1
Open it
Click the gear, then Widget style.
- 2
Edit the CSS
Change the CSS in the editor. The Live preview updates as you type. Reset to default brings back the original style.
- 3
Target the right parts
Under Classes you can target, click a class to copy it.
- 4
Save
Click Save, then Preview or Publish in the header.
| Class | Styles |
|---|---|
.AI.widget | The widget body |
.widget-header | The top bar |
.widget-content-chat | The message area |
.widget-content-chat .message-text | Message bubbles |
.message.inbound .message-text | The AI's bubbles |
.answer-input | The text box |
.widget-footer | The bottom area |
.AI.widget {
background-color: #FFF4F0;
}
.AI .widget-content-chat .message.inbound .message-text {
background-color: #E4572E;
color: white;
}Settings inside a chatbot#
When you open an AI flow from a chatbot's AI Agent step, the gear opens AI settings instead:
- Knowledge: add or update the flow's website pages and files.
- Conversation: the First message (sent when this AI flow starts a conversation on its own) and Files from customers (let customers attach files in the AI chat).
These changes save automatically and go live when you publish the chatbot. Widget style isn't here because the chatbot's own widget is used. To style the AI chat widget for the flow's own link, open the flow from the AI Flows page.
Common mistakes#
- The new greeting doesn't show. Settings are saved with the flow: click Preview or Publish after saving the sheet, and Publish again if live chatbots use the flow.
- CSS has no effect. Copy the class from Classes you can target; the widget's classes are case sensitive.
- Styled the flow but the chatbot looks the same. Inside a chatbot, the chatbot's widget is used. Style it in the chatbot's settings.