The widget studio

The widget studio is where you design the chat widget your customers see on your site. It pairs a live preview with a palette of controls and an inspector, so every change is visible before you ship it. The studio supports zoom, undo, and side-by-side light and dark preview.

Themes and presets

A widget's theme mode is one of:

• Light or Dark: a fixed scheme.
• Match: follows the visitor's system preference, switching automatically.
• Custom: you override individual palette tokens on top of a generated base.

To start fast, the studio ships named presets (for example, Clean SaaS, Friendly support, Enterprise, Minimal, Bold, Help center, Dark, and High contrast). Applying a preset sets a coherent look you can then adjust.

Palette and accessibility

You choose a primary color and Hark derives a full, accessible palette from it. Text, borders, and muted tones are computed to clear WCAG AA contrast on their own backgrounds, so a bold brand color never lands as unreadable text. The palette generation is deterministic: the same settings always produce the same widget.

Branding

Set the widget's title, greeting, and brand assets so it feels like part of your product. Attribution ("Powered by Hark") is shown by default and is reserved to be removable on a future whitelabel plan.

The launcher

The launcher is the bubble a visitor taps to open the widget. You control its position (bottom-right or bottom-left), its style (circle, rounded, pill, a labelled button, a custom image, or text), its size, its glyph (chat, help, sparkles, bolt, or smile), and an optional open animation (pulse, fade, slide, or bounce). The launcher glyph is drawn inline, so it never waits on an asset download.

The window

The window is the panel that opens. You choose its size and its behavior: floating, a side panel, an overlay, or a modal. Density and shape controls (comfortable, compact, or spacious, plus corner rounding and shadow) let the window match your site's feel.

Typography

Typography can use Hark's own font, the system font, inherit your site's font, or a self-hosted web font by URL. For security the font is never an uploaded file, and a value that could break the surrounding CSS is rejected.