Quincer AI
Get started
Customize appearance
All visual settings live under Widget → Customize. The right-hand panel shows a live preview as you edit, so every change is visible before you save.
Auto-extract from your site
If you entered a website during onboarding, Quincer AI already scanned it for your primary brand color, accent, and typography when the brand was set up. On the Website tab of Customize, the Import from website card (below) confirms what was imported and lets you scan more.
To pull in another URL, type a domain into the field — the panel below shows the example.com placeholder — and click Extract. Quincer scans the page, and the Extracted from… result card lists the detected Primary and Accent swatches plus any font chips it found. The style is saved to the widget and added to your style library; a hard refresh picks it up.
Enter your website URL to auto-detect colors, fonts, and brand name.
Extracted from acme.com
Style saved to widget and added to your style library.
The Import from website card — paste a URL, hit Extract, and review the detected Primary/Accent swatches and font before it’s applied.
Brand identity
On the Appearance tab, the Branding card holds your public name and messaging. In the panel below, Brand name is what shows in the chat header, Tagline is the short line beneath it, and Welcome message is the first thing the visitor reads. Each field feeds the live preview on the right the moment you type. The exact fields and purposes are:
The Branding card — Brand name, Tagline, and Welcome message all update the live preview as you type.
| Field | Purpose |
|---|---|
| Brand name | Shown in the chat header. |
| Tagline | A short line under the brand name, e.g. Ask us anything. |
| Avatar | A URL to an image, an emoji, or initials. Square images look best. |
| Welcome message | The first message the visitor sees. Supports emojis. |
Colors
Colors live in the Appearance card below the Branding card. It opens in Simple mode — one Brand color picker, from which Quincer derives the rest (the swatch row under it previews the derived Accent, Background, Input, Agent bubble, and Text). Click Advanced (top-right of the card) to fine-tune each color individually: Primary color, Accent color, Chat background, Input background, Agent bubble, Text color, and Header text. The tokens map as follows:
Pick a brand color — we’ll derive the rest
The Appearance card — Simple mode derives every color from one Brand color; Advanced exposes each token. Position and Bubble style pin and shape the launcher.
Quincer AI separates the header bar from the accent used for buttons and links:
| Token | What it controls |
|---|---|
primary | Header + launcher bar background. |
accent | Send button, links, typing dots. |
accentText | Text color on top of the accent (usually white). |
text | Body text inside the chat panel. |
background | Chat panel body (defaults to primary if unset). |
inputBackground | Background of the message input field. |
botBubble | Background of bot message bubbles. |
Quincer AI derives hover states, border colors, and muted text from these seeds automatically. You usually only need to set primary and accent.
Position & layout
| Option | Values | Notes |
|---|---|---|
position | bottom-right, bottom-left | Corner of the viewport where the launcher pins. |
bottomOffset | integer (px) | Pixels from the bottom edge. Defaults to 28. |
sideOffset | integer (px) | Pixels from the left/right edge. Defaults to 28. |
bubbleStyle | bar or button | bar shows an input + send button launcher. button is a minimal circular icon. |
Persona avatar on the launcher
When Bubble style is set to Compact button, a Show persona avatar on the button checkbox appears right under the picker. Turn it on and the circular launcher shows the avatar of the persona assigned to the page the visitor is on — so the face that greets them in chat is the same face they clicked. If the active persona has no avatar, the launcher falls back to the classic ? icon automatically, so it never renders empty.
The compact button is much larger on desktop — big enough for a portrait to read as a real face — and shrinks to the usual small launcher size on phones.
Pick Compact button and the Show persona avatar on the button checkbox appears beneath the picker.
Voice UI layout
When voice is enabled on a widget, a Voice UI layout card appears on the Appearance tab. Its dropdown (below) decides how a call is presented: Hybrid (recommended), Takeover, Inline composer, or Compact strip. A live visual preview renders the chosen layout right under the picker, and the card note reminds you that mobile widths auto-promote Hybrid to Takeover. If voice isn’t enabled yet, the card instead links you to the AI agent tab to turn it on.
Mobile widths auto-promote Hybrid to Takeover.
The Voice UI layout picker — choose Hybrid, Takeover, Inline composer, or Compact strip; a live preview renders your pick.
Full breakdown of each layout — with screenshots and when to pick which — on the Voice chat → UI layouts page.
Behavior
Proactive mode
Turn on Proactive mode and the widget opens itself after a configurable
delay (default 5000ms) with a context-aware greeting. You can write a custom
greeting per page or let the agent auto-detect the page topic.
Greeting bubble width
The proactive greeting pops up as a toast beside the launcher before anyone clicks — and its width is yours to set. On Customize & Deploy → Appearance, under Widget size, drag the Greeting bubble width slider anywhere from 200 to 640 px; the live pixel value updates next to the slider as you drag. The default is 336 px — 40% slimmer than the old fixed bubble — so the greeting reads like a message, not a banner.
Height is automatic: a longer greeting simply wraps and gets taller, so no width setting can cut your text off. Phones ignore the slider and use a fixed 280 px — a desktop-width bubble would crowd a 375 px screen.
Height is automatic — a longer greeting simply gets taller. Phones use a fixed 280px.
The Greeting bubble width slider under Widget size — 200–640px with a live pixel readout; the default 336px is 40% slimmer than before.
The preview on the Customize page won’t reflect the new width — open your live site to see it.
Visitor identification
Provide a Google Client ID to enable Google One Tap, which captures the visitor's name and email before the conversation starts. This dramatically improves lead enrichment and CRM sync quality.
Conversation persistence
By default the widget persists the active conversation in localStorage, so
returning visitors pick up where they left off. Disable this per-persona if you want a
fresh session on every visit.
Save & publish
Changes are saved per widget, per workspace, and take effect immediately for all visitors.
The widget fetches the latest config from /api/embed/config on page load, with
a 5-minute CDN cache. Hard refreshes will pick up changes instantly.
If you rename a persona or change URL patterns, visitors mid-conversation keep the old persona until they reload.
Overriding from code
Every field in the Customize tab can also be passed directly to the widget via
window.ChatWidgetConfig. Values passed in code win over dashboard settings.
Useful for A/B testing or per-page overrides:
window.ChatWidgetConfig = {
apiKey: "cw_live_...",
apiUrl: "https://chat.quincer.com/api",
brand: "Acme Pricing",
welcomeMessage: "Questions about enterprise pricing? I can help.",
colors: { primary: "#0a0a14", accent: "#eb8424" },
position: "bottom-right",
proactiveGreeting: "Looking at enterprise? I can pull up pricing for your team size."
};