Theming

Four ways to make the widget look like your site, from a one-line colour override to full token control.

Start with the brand shortcuts — they cover most cases in a few lines. Move to a full theme object only when you need token-level control.

The quickest path — primaryColor, borderRadius, fontFamily.

Two curated themes — default and modern.

Full token overrides or partial merges.

Read the widget's theme from your own CSS.

Quick reference

Goal	What you pass
Change the brand colour	`primaryColor: "#4f46e5"`
Use a curated palette	`theme: "modern"`
Curated palette, one tweak	`theme: "modern", primaryColor: "#be123c"`
Override specific tokens	`theme: { colors: { primary: "#8B6F47" } }`
Change nothing	omit `theme` — you get `default`

Each row goes at the top level of your init() call, alongside apiKey.

Later layers win:

default — the starting point whenever you don't pass theme.

theme — a built-in name, full theme object, or partial override.

Brand shortcuts — primaryColor, secondaryColor, borderRadius, fontFamily.

Adjust all of them live in the Playground.