Chatbot Styling
Use Agent Style Settings for standard theming, then optionally add advanced CSS
in agent.metadata.customCss for brand-level control.
Standard styling (UI controls)
In the dashboard, open Agent Settings → Style.
The built-in tabs cover most common customization:
- Colors: primary, secondary, accent, muted, foreground pairings.
- Popup Chatbot: launcher button copy, position, proactivity, header banner.
- Full-size Chatbot: welcome text and welcome background CSS.
- Suggestions Bar: marquee behavior and suggestion chip styling.
These controls are the safest option and are recommended as a baseline.
Advanced styling (metadata.customCss)
For complete control, use the Advanced CSS section in Style Settings.
- The value is saved on the agent as
metadata.customCss. - The chat widget injects that CSS inside the widget shadow root at runtime.
- Leaving the field empty disables advanced overrides.
Advanced CSS is only sourced from agent metadata. It is not configured through web-component attributes or runtime window APIs.
Available CSS options
Use these selectors/tokens to target the chatbot:
| Option | What it controls |
|---|---|
:host | Widget host element. Set global font, base variables, and reset rules. |
.applied-chat-root | Main chat wrapper. Apply global chat-scoped overrides. |
:host(.dark), .dark | Dark-mode specific overrides. |
--background, --foreground | Default surface + text colors. |
--primary, --primary-foreground | Primary actions and user bubble colors. |
--secondary, --secondary-foreground | Agent bubble + secondary surfaces. |
--muted, --muted-foreground | Supporting surfaces and low-emphasis text. |
--accent, --accent-foreground | Hover/interactive accent styling. |
--border, --input, --ring | Border, input chrome, and focus ring styles. |
--radius | Shared corner radius used across chat components. |
.applied-chat-root button, input, textarea | Detailed control of control geometry, casing, spacing, and typography. |
.applied-chat-root a | Link color and decoration in messages/footer/markdown. |
Example
:host {
--radius: 0;
--background: #f3f3f1;
--foreground: #080808;
--border: #d3d2cd;
--primary: #0a0a0a;
--primary-foreground: #f4f3ef;
--secondary: #e8e6df;
--secondary-foreground: #0d0d0d;
font-family: var(--font-body), 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.applied-chat-root button,
.applied-chat-root input,
.applied-chat-root textarea {
letter-spacing: 0.02em;
text-transform: uppercase;
}Related
Last updated on