Theme, accent and placeholder

Appearance is set in two places. The dashboard styles the assistant itself. Your page styles the launcher, which shows before the assistant loads.

Setting	Dashboard (Appearance tab)	Page option
Theme	Default theme of the assistant	`theme` overrides it, unless `"auto"`
Accent	Buttons and highlights inside the assistant	`accent` colours the bar’s magnifier and focus ring
Prompt	Placeholder of the bubble panel’s input	`placeholder` is the bar’s placeholder

Theme

Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar", theme: "dark" });

<concatflow-assistant site-token="st_YOUR_SITE_TOKEN" launcher="bar" theme="dark"></concatflow-assistant>

Value	Effect
`"auto"` (default)	Uses the dashboard’s theme. If that is `auto` too, follows the visitor’s system setting.
`"light"`	Always light.
`"dark"`	Always dark.

If your app has its own dark mode toggle, pass the current mode. In React, the assistant is recreated when theme changes:

import { ConcatflowAssistant } from "@concatflow/embed/react";

<ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" theme={isDark ? "dark" : "light"} />;

Accent

Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar", accent: "#0E7C66" });

accent is any CSS colour. It colours the bar’s magnifier and its focus ring. Without it, they use the text colour. Inside the assistant, the accent comes from the dashboard. Concatflow darkens it, keeping its hue, until white text on it reaches a 4.5:1 contrast ratio. A light brand colour stays readable on buttons.

Placeholder

Concatflow.init({
  siteToken: "st_YOUR_SITE_TOKEN",
  launcher: "bar",
  placeholder: "Search listings, prices, neighbourhoods…",
});

The bar is drawn by widget.js in your page, before the assistant has loaded. So its placeholder comes from your page, not from the dashboard.

The default placeholder is in French: Posez une question…. Set placeholder if your product is in another language. The bubble panel uses the prompt from the dashboard’s Appearance tab, with the same default.

What you cannot change

The assistant renders in an iframe, inside a Shadow DOM. Your CSS cannot reach it. This is on purpose: your styles cannot break it, and it cannot break yours. Size and place the bar through its container. The bubble always sits in the bottom-right corner.

Embedded assistant

Private databases

Theme, accent and placeholder

Theme

Accent

Placeholder

What you cannot change

​Theme

​Accent

​Placeholder

​What you cannot change

Theme

Accent

Placeholder

What you cannot change