Appearance

Make the widget look like it belongs on your site. Set any of these on the tag (data-*) or save them against the key in the Embed tab.

Theme

html

<script src="https://digitorn.ai/embed.js" data-key="dk_…" data-theme="auto"></script>

data-theme	Meaning
auto (default)	Follows your page's own light/dark — it reads the colour actually painted behind the widget, not the visitor's OS.
light / dark	Pinned.
site	Match my site — borrows your site's font, accent and corner radius as well as its light/dark, while keeping the chat's own validated contrasts so it always stays readable.

Full theme override

When you want more than an accent, the Embed tab has a Full theme editor that recolours every part of the chat — surfaces, text, borders, your visitor's message bubble, radius, fonts. It's saved on the key, so it applies to this embed only: it can never affect another embed, another agent, or Digitorn itself.

• Presets — one click for a coherent look (Midnight, Ivory, Ocean, Mono).
• Tokens — tune each colour individually.
• Custom CSS — a raw escape hatch for anything the tokens don't reach, injected inside the chat's own document only.

The AI stylist

In the same tab, AI stylist turns a plain-language brief into a matching theme:

"sleek and dark like Linear, brand colour #FF6600"

Or paste your site's URL and it reads the page and matches its palette. You can tweak every token afterwards, then Save to key.

Accent, font, radius

For a lighter touch than the full override:

Attribute	Default	Notes
data-accent	(Digitorn's)	#hex — buttons, selection, your visitor's bubble.
data-font	(Digitorn's)	A CSS font stack from your own site.
data-radius	16	Corner radius in px, 0–32.
data-bubble	(accent)	#hex for the visitor's own message bubbles.
data-brand-logo	—	Image URL shown in the panel header.
data-tone	accent	accent (a brand button) or neutral (borrows your page's surface).

Layout

html

<script src="https://digitorn.ai/embed.js" data-key="dk_…" data-layout="corner"></script>

• data-layout="dock" (default) — a full-height side drawer, flush to the edge, like docs.digitorn.ai. On a phone it takes the whole screen.
• data-layout="corner" — a floating card in the corner.

data-position="right" (default) or "left", and data-offset (px from the corner) place it. data-width / data-height size it (a corner card; a dock is full-height). data-resizable="false" locks the size.

Launcher

The button a visitor clicks to open the chat.

Attribute	Default	Values
data-launcher	bubble	bubble · pill · bar · tab · none
data-icon	chat	chat · sparkle · help · none
data-size	56	Launcher height in px, 36–96.
data-label	—	Short text next to the icon (pill/bar).
data-badge	—	A dot, or a short count, until first opened.
data-hide-launcher	dock: on	Fade the launcher out while the panel is open.

Use data-launcher="none" when you open the chat from your own button — see Behaviour & triggers.