Appearance
Open in CMSThe Appearance screen sets how the chat looks to your users. Pick a ready-made look, use your brand colors, or write custom CSS: the screen offers these as three steps, and you can use whichever fits you. Found in the agent sidebar under Persona → Appearance.
Step 1: Just make it pretty
| What does your chatbot do? | A row of use-case chips: Patient care, Staff operations, Data & analytics, Document Q&A, Lead & intake, Field & logistics, Finance & IR. Picking one shows a short description and the preset looks made for that use case. |
| Preset cards | Ready-made looks. The Qlar look is pinned first on every use case except Patient care. Selecting a card applies its four brand colors and also sets the Header bar color, Color scheme and Background from Step 2. Any colors you fine-tuned by hand are cleared. |
Step 2: Use my colors and style
Your brand colors
Set these four and everything else follows. Click a color row to open its editor (color picker, suggested swatches and the generated shade scale; click a shade to copy its hex value).
| Primary | Drives buttons, the top bar, the send button and primary call-to-action buttons. A note tells you whether white button text reads clearly on it; if not, Use a darker shade picks the nearest darker shade that does. |
| Accent | Optional. Drives links, reference text and suggestion arrows. Add it with Add a different accent color; without it, these follow your Primary color. If the accent looks almost the same as Primary, Fix it shifts it away while keeping its brightness. Use primary instead removes the accent again. |
| Neutral | Optional. Drives text, borders, icons and disabled states. Shades adapt to light or dark mode. |
| Surface | Optional. Drives backgrounds and card fills. Shades adapt to light or dark mode. |
| Changed your base colors? | Appears when you change a brand color after fine-tuning individual colors. Update colors re-syncs every component to the new brand colors (locked colors are kept). You can close the notice to keep your fine-tuned colors. |
Display options
How the chat looks to visitors. These options don't show in the preview pane; save your changes to see them in the live chat.
| Background | Plain (a flat background), One color or Two colors (a soft gradient in your brand colors). Visitors can turn the gradient off for themselves; pick Plain to remove it for everyone. |
| Intensity | How strong the gradient looks: Subtle, Balanced or Vivid. Hidden when Background is Plain. |
| Header bar color | Style of the chat's top bar: Glass (frosts whatever scrolls behind the bar), Subtle or Brand. |
| Color scheme | The look new visitors see first: Light, Dark or Auto. Visitors can still switch in the chat. |
| Font family | Optional. Choose from the suggestion list (popular Google fonts and system fonts) or type any font name. Leave blank for the default font. |
| Size (px) | Optional base text size, from 10 to 40 pixels. |
| Add font URL | Reveals a Font URL field for a hosted web-font stylesheet (for example a Google Fonts link). If the font family is empty, it is filled in from a Google Fonts URL. Remove clears and hides the field. |
Fine-tune individual colors
Optional and collapsed by default. Every color is derived from your brand colors unless you change it here.
| Light mode / Dark mode | Choose which mode you are editing. Each mode keeps its own colors. |
| Color sections | General (Background, Scrollbar), Introduction (Text), Top bar (Background, Text), References & citations (Link color, Hover), User bubble (Background, Text), Input box (Background, Text, Border, Focus border, Mic icon), Send button (Icon bg, Icon, Hover bg, Disabled bg, Disabled icon), Suggestions (Chip bg, Hover bg, Chip text, Arrow), Uploads (Chip bg), Tables (Header bg, Header text). |
| Unset | A color showing "Unset" uses the automatic value from your brand colors. |
| Section re-sync | The button next to a section title re-syncs that section to your brand colors, except locked colors. |
| Lock | Inside a color's editor. A locked color is kept when you use Update colors, a section re-sync, or reset. Applies to both light and dark mode. |
| Reset (per color) | Inside a color's editor. Clears that color back to the automatic value. |
Step 3: I know my CSS
For developers. Collapsed by default.
| Theme CSS | Read-only CSS generated from Steps 1 and 2. Copy copies it to your clipboard. |
| Custom CSS | Your own extra CSS rules. They are kept separate from the generated Theme CSS, so they stay intact when brand colors or other settings regenerate it. |
Action Bar
The bar sticks to the bottom of the screen.
| Reset | After confirmation, discards all unsaved changes and restores your last saved appearance. |
| Save | Asks you to confirm, then saves the appearance. It might take a few minutes for the live chat to show the change. Saved changes go to the agent's draft; publish the agent to make them live for users. |
| Preview | Updates the preview pane with your current, unsaved colors and CSS. |
Related guide: Appearance