Skip to main content
Where styling lives. The Concierge renders in a closed shadow DOM, so your page’s CSS cannot reach inside it and its styles cannot leak out. Everything is customized through CSS custom properties, set two ways:
  1. From the Bonsai dashboard (preferred) — your brand colors are fetched per-tenant at load time and applied automatically.
  2. Inline on the element — set any variable in the tag’s style attribute to override it for that embed.
Because the shadow root is closed, an inline style on the tag is the only way page-side CSS can reach the component. A stylesheet rule like bonsai-chat-bubble { --bonsai-agent-brand: red } will not take effect.

​
Setting variables

Inline values are re-applied after the dashboard response arrives, so anything you pin here survives a later dashboard change.

​
Color reference

​
Conversation

​
Panel and shape

​
Launcher reference

The launcher has its own token set, so you can restyle the button without touching the panel.
Minimum sizes are accessibility floors, not suggestions. --bonsai-agent-bubble-min-height and --bonsai-agent-bubble-min-width default to 44px because that is the smallest reliably tappable target. A design that specifies a shorter button will render at 44px unless you lower these explicitly — and lowering them makes the launcher harder to hit on a phone.

​
Responsive behavior

The launcher adapts to the viewport at two breakpoints. Both apply automatically — there is nothing to enable. 380px is the threshold so that an iPhone SE (375px wide) collapses while an iPhone 12 through 16 (390px) keeps its text label.

​
Your pinned values always win

A tier only changes a value you have not pinned. Because inline styles beat the component’s own rules, any variable you set on the tag survives every breakpoint. This works per variable, not per install. If you pin the font size but not the minimum height, your font size holds everywhere and your minimum height still grows on tablets:
The collapse at 380px is not a variable override — it changes which elements are visible — so it applies whatever you have pinned.

​
The icon shown when the label collapses

At 380px and narrower the launcher shows its icon in place of the label, including when launcher-content="text". Which icon that is depends on what you configured:
  1. launcher-icon-url, if set
  2. Otherwise the built-in glyph named by launcher-icon — mark (the Bonsai mark, the default), sparkles, or chat
Set launcher-icon-url if you do not want the Bonsai mark on your storefront. With no launcher-icon-url and no launcher-icon, a text-only launcher collapses to our mark on small phones. header-icon-url is a separate attribute for the panel header and is not reused here — set launcher-icon-url explicitly even if it points at the same file.
If launcher-icon-url points at an image that fails to load, the component falls back to the built-in glyph rather than rendering an empty button.

​
Dark mode

Set theme="dark" to use the dark palette. It adjusts the background, foreground, muted, border, surface, input, card, and hover variables; brand and launcher colors are unchanged, since those are yours.
Any value other than dark resolves to the light palette. The component does not follow the operating system setting on its own — to do that, set the attribute from your own theme switcher.