Skip to content

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. 1

    Open it

    Click the gear, then First message.

  2. 2

    Write the greeting

    Type it in Message. The Preview shows it as a chat bubble.

  3. 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. 1

    Open it

    Click the gear, then Widget style.

  2. 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. 3

    Target the right parts

    Under Classes you can target, click a class to copy it.

  4. 4

    Save

    Click Save, then Preview or Publish in the header.

ClassStyles
.AI.widgetThe widget body
.widget-headerThe top bar
.widget-content-chatThe message area
.widget-content-chat .message-textMessage bubbles
.message.inbound .message-textThe AI's bubbles
.answer-inputThe text box
.widget-footerThe bottom area
Example: brand colors
.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.