Widget customization

Match the widget to your brand — set once in the dashboard, applied everywhere it's embedded.

Appearance is configured server-side, in Project → Settings → Appearance. Changes reach every site embedding that project on the next page load, with no code change and no redeploy.

Primary colour

One colour drives the whole widget: the launcher, the panel header, buttons, focus rings, comment pins, and the annotation cursor.

Text on top of your colour is chosen automatically for contrast using WCAG relative luminance, so a pale brand colour gets dark text and a dark one gets light text. You don't need to pick a foreground.

	Hex
Blue	`#3B82F6`
Indigo	`#6366F1`
Purple	`#8B5CF6`
Green	`#10B981`
Red	`#EF4444`
Orange	`#F97316`

Custom branding is a Pro feature. On the Free plan the widget renders in the default Annot8 orange regardless of what's saved here — your setting is kept and takes effect the moment you upgrade.

Corner

Bottom-right (default) or bottom-left. Visitors can drag the launcher out of the way of anything it overlaps, and their choice is remembered per browser. On small screens the position is clamped so it can't be dragged off-screen.

Launcher label

A short pill shown next to the launcher on load, which collapses after a few seconds. Leave it empty for a launcher-only look.

Override it per site with data-label on the script tag — useful when one project serves several surfaces and you want "Report a bug" on the app and "Give feedback" on the marketing site.

Pin style

Style	Looks like
`numbered` (default)	Pins numbered in creation order
`avatar`	Pins showing the author's avatar

Numbered reads better on dense pages; avatars read better in a client review where knowing who said it matters most.

Theme

<script
  src="https://www.annot8.app/widget.js"
  data-project-id="pj_xxxxxxxxxxxx"
  data-theme="auto"
  async
></script>

Value	Behaviour
`auto` (default)	Follows the visitor's OS light/dark preference
`light`	Always light
`dark`	Always dark

There is intentionally no custom-CSS hook. The widget UI runs in a sandboxed iframe, which is what guarantees your site's CSS can't break it and its styles can never leak into your page. Use the Appearance settings instead.

Three worked examples

Vibrant. Colour #8B5CF6, label Give feedback, bottom-right, theme auto, avatar pins. Reads as friendly and personal; good for a consumer product.

Enterprise. Colour #1E40AF, label Report issue, bottom-left, theme light, numbered pins. Stays out of the way and matches a conservative admin UI.

Minimal. Colour #111111, empty label, bottom-right, theme auto. Launcher only, no pill — the least visually intrusive option.

Responsive behaviour

The panel never exceeds the viewport height
Touch targets meet mobile hit-area sizes
The launcher stays reachable and clamped on small screens
All animation respects prefers-reduced-motion