Designer & themes

The widget designer is a live-preview editor under Dashboard → Widget → Designer. Every change you make previews instantly on the right; nothing is saved until you click Publish. You can also create branded variants (e.g. a spring-sale skin) and switch between them with a toggle.

Brand colors

The widget picks up three colors: the primary (buttons, links, the launcher background), an accent for spark highlights, and a surface color for the chat bubble background. Every other color in the UI is derived from these three at the right contrast ratio — so the widget always hits WCAG AA, no matter the brand palette you pick.

Each color has three input modes:

• Hex — paste any 6-digit hex code.
• Auto-extract from logo — upload your storefront logo and we pull the dominant colors.
• Auto-match storefront (Shopify only) — we fetch your active theme’s CSS variables and use them.

Typography

Pick a family from the curated set (system stack, Inter, Manrope, IBM Plex Sans, Source Sans, DM Sans), or supply a Google Fonts URL for a custom face. The designer caps body text at 16 px and headers at 20 px so the widget stays compact on mobile.

Copy

Five copy slots are exposed in the designer:

• Launcher greeting — the one-line teaser that shows above the launcher (e.g. “Need help picking a gift?”).
• Welcome message — the AI’s first message inside the chat panel.
• Starter prompts — up to four canned questions rendered as chips below the welcome.
• Input placeholder — text inside the message field.
• Empty-handoff message — what the AI says when a handoff request is queued.

Every copy slot supports up to twenty locales. See Languages for how the widget chooses which locale to render.

Position and density

Two layout knobs round out the visual customization:

• Position — corner (bottom-right by default, bottom-left for RTL stores), offset in pixels, mobile vs. desktop separately.
• Density — compact, standard, or roomy. Density changes padding and font-size globally inside the widget.

Dark mode

The widget supports three dark-mode strategies:

Brand variants

Click + New variant in the designer to create a separate brand skin. Use cases: a holiday theme, a B2B portal vs. a DTC storefront, or A/B testing two different launcher copies.

Variants are routed by audience rules — a Shopify market, a URL pattern, a campaign UTM, or a percentage split.

Publish & rollback

Saved changes only show on the storefront after you click Publish. Every publish is versioned with the user and timestamp; revert with one click from Designer → History.