# Widget customization

Customize the Annot8 feedback widget’s theme, brand color, launcher label, position, and pin style from your project dashboard.

Source: https://docs.annot8.app/docs/widget/customization



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 [#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` |

<Callout type="info">
  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.
</Callout>

## Corner [#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 [#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 [#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 [#theme]

```html
<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                                    |

<Callout type="info">
  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.
</Callout>

## Three worked examples [#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 [#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`