Themes and the expanded view

The chat widget ships with fourteen designed themes, an expanded view for long conversations, a phone layout that behaves like a real app, and full formatting of the answers your AI writes. This page explains what each piece does and how to control it. Everything lives in the site's Appearance tab and applies to visitors within a minute of saving, with no change to the embed snippet.

Premade themes#

A theme is a named bundle of appearance settings: colors for light and dark mode, font, shape, spacing, header and bubble styling, shadows, motion and launcher style. The gallery at the top of the Appearance tab shows a miniature of each theme in light and dark. Every theme meets WCAG AA contrast (4.5:1) for text and message bubbles in both modes, uses only fonts already on the visitor's device, and contains no images or external files.

Choosing a theme fills in the settings it owns. Your texts and labels, behavior, page rules, page events, window size and position, mobile and expanded-view layout, design tokens and custom CSS are never touched. The result is ordinary, explicit settings that you can keep editing, so the theme is only a starting point: the editor shows "customised" once you change something and offers Reset to theme. The id of the starting theme is stored as theme.preset.

Editor tools#

• Search. Type "radius", "mobile" or "shadow" to filter the long list of settings down to what matches.
• Live preview with a device switch (phone, tablet, desktop at the real screen size, scaled to fit), compact or expanded, light or dark, and states such as an answer with a table or the pre-chat form.
• Contrast hints next to every text color, in light and dark mode.
• Undo and redo for your edits, and per-section Revert and Reset to defaults.
• Export and import. Download the settings as JSON, or paste or choose a file to load. Imports are validated by the server and loaded into the editor without saving; anything that was ignored is listed. This is also how you copy a look from one site to another.

The expanded view#

Long answers, tables and code read better in a bigger window. When the expand button is on, a button in the chat header switches the small window to a large view and back, with a short animation (skipped when the visitor prefers reduced motion).

• On a computer the large view is a centred panel with the page dimmed behind it. The messages sit in a comfortable reading column (reading_width, 720 px by default) and, on wide screens, a side panel offers the conversation starters and up to five links you define. Choose layout dock for a full-height drawer at the screen edge instead.
• On phones and small tablets (below fullscreen_below, 760 px by default) it becomes true full screen: the page behind stops scrolling, the layout respects the notch and home indicator, it follows the on-screen keyboard so the message box is never covered, and it uses the dynamic viewport height so browser toolbars do not cut it off.
• Keyboard and screen readers. The window is announced as a modal dialog while expanded, focus stays inside it (Tab and Shift+Tab wrap), and Esc collapses it before a second press closes the chat.
• Remembered per visitor. By default the choice is kept in the browser (turn remember off to forget it). default_state decides the first view: compact, expanded, or auto, which expands on screens at least auto_min_width wide.

Sites saved before this feature keep their old look: the button appears when you switch expand.enabled on (new sites have it on). Control it from your own page with SiteTrellis('expand'), SiteTrellis('collapse') and SiteTrellis('toggleExpand'), and listen for the expand and collapse events: see the JavaScript API.

Phones and tablets#

The small window is responsive on its own: it never exceeds the screen, the message box uses 16 px text on touch devices so browsers do not zoom the page, and a phone held sideways is treated as a phone. Under mobile.layout choose fullscreen (the default behavior), a sheet that covers the lower part of the screen, or a small floating window. The phone breakpoint is configurable (520 px by default), and tablets can have their own width, height and offsets.

Design tokens#

For small adjustments that the settings do not cover, override individual design tokens, one per line in the form --st-gap: 12px. Only the names below are accepted, each value is validated for its type (colors, lengths in px, rem or em within a sensible range, numbers, shadows), and anything else is dropped when you save. Tokens are not custom CSS: they work on every plan.

--st-gap: 12px
--st-bubble-radius: 18px
--st-header-bg: linear-gradient(135deg, #0b5f94, #0a6c77)
--st-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)

For anything beyond tokens, plans with white-label can add custom CSS: see Custom CSS and Shadow DOM.

Formatted answers#

AI models answer in Markdown, and the widget shows it as formatted text rather than raw symbols: headings, bold, italic and strikethrough, inline code and fenced code blocks, links, quotes, bullet, numbered, nested and task lists, tables (which scroll sideways inside the bubble when they are wide), and horizontal rules. The same renderer is used in the dashboard inbox and the apps. It is safe by construction: every piece of text is escaped before it is wrapped in a tag the renderer writes itself, only http, https and mailto links are made clickable, images are shown as links (nothing is fetched on the visitor's behalf), and a visitor's own messages always stay plain text. All of it follows your theme in compact and expanded view, in light and dark.

Accessibility notes#

• Pick colors with at least 4.5:1 contrast: the editor shows the ratio, and the premade themes already pass.
• Animations stop for visitors who prefer reduced motion, including the launcher attention animation and the expand transition.
• If you turn on translucent glass, test it against your busiest pages; the contrast of text over a see-through window depends on what is behind it.
• The expand and close buttons have text names for screen readers and can be relabeled in the text settings for other languages.