Which chatbot themes are available?
Start with a preset, then change the supported appearance settings to suit the website. The editor and installed chatbot share the same styling.
| Theme | Appearance |
|---|---|
| Pearl | Light stone surfaces and charcoal text. |
| Linen | Warm paper colors, serif typography and tailored corners. |
| Sage | Soft green surfaces and humanist typography. |
| Ink | A dark monochrome palette with tailored corners. |
| Midnight | Deep slate surfaces and a solid header. |
| Plum | A muted dark purple palette and humanist typography. |
What can you customize?
Set eight color roles covering backgrounds, messages, text, buttons, borders and focus. Choose a font stack, text size, corner treatment, panel width, launcher position and header style. Edit the launcher text, message label and optional placeholder.
Apply an organisation default, then override it for a project or website. Restoring inheritance removes that layer’s override. If a workspace downgrades, premium settings are retained while the visitor chatbot uses the standard appearance.
What happens if a change hurts readability?
The editor checks eleven text, border and focus color pairs. Warnings identify the affected content, the measured contrast ratio and the required minimum. Hiding a visible label also produces a discoverability warning.
A theme with warnings opens a review dialog. Keep editing, use the repair action or explicitly save with warnings. Confirmation is checked on the server against those exact settings. Required accessible names cannot be removed, and arbitrary custom CSS cannot disable the protected interaction behavior.
An example warning
Text in assistant messages: the chosen colors do not meet the contrast target. Review the colors, use the repair action or acknowledge the specific risk before saving.
Source references
How does the theme work for visitors?
The chatbot uses the website’s saved appearance. Preview colors, text and labels in the editor, then test the installed chatbot with your own content.
Supported themes keep keyboard interaction, visible focus, touch targets and reduced-motion and forced-color treatment. Customer pages, logos, content, zoom behavior and assistive technology still need complete integration testing. Saving with warnings is not an accessibility conformance claim.
How do you publish a theme?
Choose the scope
Open Settings and select the organisation, project or website to customize. Owners and administrators can save appearance changes.
Preview the conversation
Choose a preset, edit the details and inspect the sample messages, controls and labels.
Review and save
Resolve any required-field errors. Fix or explicitly acknowledge the listed accessibility risks, then save. Newly loaded widgets use the saved appearance without changing the embed snippet.
Common questions
Which Sairo plans include chatbot themes?
Pro, Agency, Growth and Scale include the full theme editor. Free and Starter retain basic branding and the standard chatbot appearance.
Can I remove the chatbot’s accessible labels?
Required accessible names cannot be removed. Hiding visible launcher or message text raises a warning while retaining the programmatic name.
Do I need to reinstall the widget after changing its theme?
No. Newly loaded widgets use the effective saved theme from their existing site configuration. The installation snippet stays the same.