# Website feedback widget

Learn how the Annot8 widget collects pinned comments, bug reports, screenshots, recordings, and visitor messages on your website.

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



The widget is the part of Annot8 your reviewers actually touch: a launcher in
the corner of your site that opens a panel for annotating the page, recording
the screen, inspecting an element, or messaging your team.

## Anatomy [#anatomy]

### Launcher [#launcher]

A floating button in the corner. Its colour, corner, and label come from
**Project → Settings → Appearance**. Visitors can drag it out of the way of
anything it overlaps, and that position is remembered per browser. It shows an
unread badge when an agent replies in live chat.

### Panel [#panel]

Opening the launcher reveals a tabbed panel:

* **Home** — quick actions: annotate the page, record your screen, inspect an
  element, or message the team
* **Messages** — live chat with your team, shown when
  [Live chat](/docs/chat/overview) is enabled (**Pro**)
* **Feedback** — every thread on the current page, with filters, replies, and
  resolve/reopen

### Pins [#pins]

Markers showing where feedback was left. Click one to open its thread. Open pins
use your brand colour; resolved pins are green. Pins render either numbered or
as the author's avatar, depending on the **pin style** setting.

### Composer [#composer]

Where a comment gets written. It attaches a screenshot automatically, accepts an
optional screen recording or voice note, and supports `@` mentions and `/`
commands for priority, status, type, and label.

## What each thread captures [#what-each-thread-captures]

Enough for a developer to reproduce the problem without a follow-up message:
the element's selector, the page URL and title, the viewport and device, console
errors, failed network requests, performance timings, and any attachments.

The full list is in [What gets captured](/docs/widget/capture).

## Keyboard shortcuts [#keyboard-shortcuts]

| Shortcut       | Action                                             |
| -------------- | -------------------------------------------------- |
| <kbd>C</kbd>   | Toggle annotate mode (opt-in)                      |
| <kbd>I</kbd>   | Toggle element inspect mode (opt-in)               |
| <kbd>Esc</kbd> | Exit the current mode, go back, or close the panel |

<kbd>C</kbd> and <kbd>I</kbd> are **off by default**, so they never collide with
your site's own shortcuts. Turn them on with `data-shortcuts="true"` on the
script tag (see [Widget
configuration](/docs/widget/configuration#keyboard-shortcuts)). Even then,
they're ignored while someone is typing in an input, a textarea, or a
content-editable region on your page.

## Cost to your page [#cost-to-your-page]

* **Loader: 6 KB** (2.4 KB gzipped). The UI itself is fetched lazily, after the
  page goes idle.
* **Sandboxed first-party iframe.** All widget UI renders in an isolated frame,
  so your CSS can't break the widget and the widget's styles can never leak into
  your page.
* **No per-mutation work.** SPA route changes are detected on a debounced
  listener; nothing runs on every DOM mutation.
* **Async by default.** The tag never blocks rendering.

## Visibility rules [#visibility-rules]

The annotation widget deliberately does **not** appear for everyone:

| Situation                       | Widget UI                                          |
| ------------------------------- | -------------------------------------------------- |
| Hostname matches no environment | Nothing loads                                      |
| Non-production environment      | Visible                                            |
| Production environment          | Hidden, unless **Show widget in production** is on |

An environment counts as production if it's the project's default environment or
it's named "Production".

<Callout type="warn">
  The production toggle hides the **whole panel**, live chat included. If you
  want visitors on your live site to be able to message you, you have to turn on
  **Show widget in production** in **Settings → Features**.
</Callout>

[Analytics](/docs/analytics/overview) is the exception: when it's enabled and
consented, it collects on production whether or not the panel is shown.

## Browser support [#browser-support]

| Browser       | Version |
| ------------- | ------- |
| Chrome / Edge | 90+     |
| Firefox       | 88+     |
| Safari        | 14+     |

Screen recording additionally requires browser support for
`getDisplayMedia`, which rules out most mobile browsers. Annotation and comments
work fine on mobile.

## Next [#next]

<Cards>
  <Card title="Configuration" href="/docs/widget/configuration">
    Attributes, runtime API, redaction.
  </Card>

  <Card title="Customization" href="/docs/widget/customization">
    Colour, corner, label, theme.
  </Card>

  <Card title="What gets captured" href="/docs/widget/capture">
    Screenshots, recordings, diagnostics.
  </Card>
</Cards>