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

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

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 is enabled (Pro)
• Feedback — every thread on the current page, with filters, replies, and resolve/reopen

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

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

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.

Keyboard shortcuts

Single-letter shortcuts are ignored while you're typing in an input, a textarea, or a content-editable region on your own 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

The annotation widget deliberately does not appear for everyone:

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

Analytics is the exception: when it's enabled and consented, it collects on production whether or not the panel is shown.

Browser support

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

Next