Theme the launcher and conversation as part of your website's visual system. Use the site's fonts, colors, borders, and spacing while keeping the invitation, message text, and composer easy to use.
Publish a scoped stylesheet#
Use a public HTTPS CSS file. On hosted sites, deploy it as an asset and set the supported css_path through widget configuration. On an external installation, set css_path in the existing settings before loading the embed.
The embed loads the theme in the host page and the chat iframe. Scope every rule to the widget so a shared stylesheet does not restyle unrelated page buttons or text.
#llmo-chat-button,
#llmo-chat-iframe,
#llmo-chat-widget {
--ac-chat-font-family: system-ui, sans-serif;
--ac-chat-text: #1a1b1c;
--ac-chat-muted: #667085;
--ac-chat-panel: #ffffff;
--ac-chat-border: #d9d9d9;
--ac-chat-accent: #1a1b1c;
--ac-chat-on-accent: #ffffff;
--ac-chat-focus-ring: #0058ef;
--ac-chat-launcher-text: #1a1b1c;
--ac-chat-radius: 8px;
}
#llmo-chat-iframe {
--ac-chat-frame-width: min(420px, calc(100vw - 48px));
--ac-chat-frame-height: min(640px, calc(100dvh - 48px));
}
These values are a starting point. Compare them against the site's real surfaces and existing theme rather than stacking conflicting rules.
Keep the launcher readable#
Use a short visible invitation such as “Ask Example.” Check the label, placeholder, and icon against the actual input background. Set chat.button_text_color inside the nested chat settings; button_color is not a supported substitute for a complete theme.
Keep a visible keyboard focus indicator and comfortable touch targets. Preserve the widget's open/close behavior; avoid forcing its display, opacity, or pointer state with broad overrides.
Check the whole conversation#
Open the live widget and inspect an empty chat, a short exchange, and a long answer. The transcript should scroll while the composer remains available. Long URLs, code, tables, and images should stay inside the panel.
Make fonts available inside the iframe as well as the page. Keep the attribution visible, and style answer links separately from attribution controls. A slow or missing theme should still leave the stock chat usable.
Test keyboard focus, Enter to send, Shift+Enter for a new line, clear, close, and reopen. Check a 320px-wide viewport and a short viewport where the software keyboard reduces available space. Ensure text and control contrast remain readable in every supported theme.
A stylesheet that returns HTTP 200 has only passed delivery. Verify the actual launcher and iframe, then check that the rest of the host page retains its layout. See installation and chat troubleshooting.