Widget appearance

Everything about how the chat looks lives in one place: open your client and go to Settings → Widget appearance. The form on the left and the Live preview on the right update as you type — tweak until it matches your site, then press Save widget settings. An "Unsaved changes" badge reminds you when the preview differs from what visitors currently see, and Reset discards your edits.

Quick themes

Seven curated combinations — Indigo, Midnight, Ocean, Forest, Sunset, Rose and Graphite — each set primary color, background, text color and corner radius in one click. All presets pass the readability checks below, so they're a safe starting point you can then fine-tune.

Content

These three can be translated per language on the Languages tab, and support {{name}}-style tokens filled by CompentChat("identify", …) — see Widget installation.

Brand

• Primary, Background and Text color pickers.
• Two live contrast checks watch your choices: "text on background" (aim for at least 4.5:1) and "white on primary" (at least 3:1). A yellow "!" warns you before visitors squint.
• Corner radius slider (0–32 px) — from sharp corners to fully rounded.
• Font family — leave empty to match the website's font, or pick from suggestions (system-ui, Inter, Georgia, Verdana, Courier New) or type your own.

Placement

Choose Bottom left or Bottom right for the floating popup. (The inline block ignores this — it sits wherever the page puts it.)

Inline embed layout

Used only by the inline snippet (see Widget installation):

• Height slider (320–900 px).
• Max width in px — 0 means fill the container.
• Alignment: Left / Center / Right.
• Frame the block — off removes the border and shadow so the chat blends into the page.

Visitor controls

• Let visitors move the chat window (popup only) — visitors drag it by the header; their placement is remembered on their device.
• Let visitors resize the chat window (popup only) — a resize grip appears in the corner; the size is remembered too.
• Clear chat on page reload — the current conversation is kept only until the page reloads. Leave it off when visitors should return to the same conversation in this browser.
• Show sources under answers — answers grounded in your uploaded files list them as small downloadable reference chips. This is the same switch as on the Knowledge base tab — changing it in either place changes both.

Advanced: custom CSS

Open the Advanced: custom CSS section for pixel-perfect control. Your CSS applies inside the widget only (it renders in a shadow DOM, so it cannot affect the rest of the page — and the page cannot affect it).

Style these classes: .cw-launcher, .cw-panel, .cw-header, .cw-msg.cw-bot, .cw-msg.cw-user, .cw-input, .cw-send.

Ready-made snippet buttons ("Bigger launcher", "Softer shadow", "Roomier messages") append working examples to the box. Unsafe rules (external URLs, imports) are stripped when you save — the platform sanitizes custom CSS server-side.

.cw-launcher { padding: 16px 26px; font-size: 15px; }
.cw-panel { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }

Runtime control from your website

Everything above is saved on the platform and applies to every visitor. Your website can additionally adjust the widget per page with the JavaScript API — for example to follow the site's own dark/light mode toggle live, or to place it differently on one page:

CompentChat("theme", { backgroundColor: "#0b1220", textColor: "#e2e8f0" }); // any subset of the brand settings
CompentChat("position", "bottom-left");
CompentChat("showSources", false);

These overrides live only on that page — nothing is saved, and a reload returns to the settings on this tab. The full command list is in Widget installation.

The live preview

• Toggle Popup / Inline to preview both embed modes.
• Toggle Light site / Dark site to check your colors against both page backgrounds.
• The preview runs the real widget stylesheet inside a mock browser frame — click the launcher to open and close it, exactly like a visitor.

Checklist before saving

1. Both contrast checks show a green ✓.
2. The welcome message reads well in both languages you use (Languages).
3. Checked the preview against a dark page background if your site has one.
4. Pressed Save widget settings — the change is live for visitors immediately (a page reload on their side picks it up).

Want to try changes on a realistic page with real answers — without visitors seeing them? The Playground has its own copy of this studio that saves your edits as an unpublished draft: preview them on the real widget, then publish (or discard) when you're ready.