Website feedback widget

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.

AnatomyCopy Anchor Link

LauncherCopy Anchor Link

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.

PanelCopy Anchor Link

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

PinsCopy Anchor Link

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.

ComposerCopy Anchor Link

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 capturesCopy Anchor Link

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 shortcutsCopy Anchor Link

C and I 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). 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 pageCopy Anchor Link

• 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 rulesCopy Anchor Link

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 supportCopy Anchor Link

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

NextCopy Anchor Link