Appearance

The orb is the only UI the widget renders. You have four knobs.

The four knobs

Setting	Values	Default
Color	Any hex	`#C4973B` (warm gold)
Position	`bottom-left`, `bottom-center`, `bottom-right`	`bottom-center`
Size	`small`, `medium`, `large`	`medium`
Edge glow	`true` / `false`	`true`

Editing

Dashboard → Appearance → adjust → Save. Changes propagate to live sessions within ~60 seconds (the config is cached at that granularity).

You can preview each change before saving — the dashboard embeds a live copy of the widget so you see the orb as visitors will.

Color

Accepts any hex value. The color applies to:

The orb itself (radial gradient from lighter to darker of your color)
The edge glow when the AI is speaking
The “Speaking” / “Listening” status text
Accent lines in the optional caption panel

Pick a color with sufficient contrast against your site’s background. Avoid very light colors on white or very dark colors on black — the orb disappears visually.

Color swatches (starter set)

Vibe	Hex
Warm gold (default)	`#C4973B`
Deep blue (professional)	`#1E40AF`
Forest green	`#14532D`
Coral	`#FB7185`
Electric violet	`#8B5CF6`
Charcoal	`#27272A`

Position

Three presets: bottom-left, bottom-center, bottom-right. No custom X/Y — that’s a deliberate constraint (we want the orb on the horizon of every page, never in unexpected spots).

bottom-center is the default. It’s maximally visible and reads as “call to action.” It also doesn’t conflict with the chat bubbles that many support tools anchor to bottom-right.

bottom-right is conventional for chat widgets but crowds the space if you already have Intercom / Drift / Zendesk.

bottom-left is uncommon and draws more attention. Good if you’re running a promo or want the orb to feel prominent.

Size

small — 48px diameter. Unobtrusive. Good for sites where the orb is supplemental.
medium — 64px. Default. Balanced.
large — 88px. Makes the orb feel inviting and centered-stage.

Size doesn’t affect legibility of the edge glow (the glow uses the viewport, not the orb size).

Edge glow

When the AI is speaking, a soft inset glow appears around the viewport edges, pulsing with the audio waveform. It’s Spelo’s signature UI flourish.

Turn it off (edge_glow: false) if:

Your site uses heavy fixed-position overlays (video players, full-screen modals). The glow can clash.
Your brand is very minimalist.
Your site has a lot of content at the viewport edges (full-bleed heroes, edge-pinned navs).

Z-index

The orb renders at z-index: 2147483647 (the max). It sits above every element on your site. If the orb is hidden behind something, that something is ALSO at the max z-index — a rare CSS bug in your site, not in the widget. See widget conflicts.

Shadow DOM

The widget renders inside a Shadow DOM root, so your site’s CSS cannot affect its styling, and the widget’s CSS cannot leak into your site. You don’t need to audit class names or worry about * { box-sizing: border-box } style resets.

Custom appearance (Enterprise)

The Enterprise plan supports a custom-rendered orb (your own SVG, your own animation). This requires a custom JavaScript bundle shipped from the Spelo CDN. Contact sales@spelo.ai.

Accessibility

The orb is focusable via keyboard (tab to it, press Enter to open).
It exposes aria-label="Start voice assistant" in the default state and "Assistant is listening" / "Assistant is speaking" during sessions.
Reduced-motion users get a static orb (no pulse animation) — controlled by prefers-reduced-motion media query.