Skip to main content
Annot8

Built for developers.Invisible to users.

Add context-aware collaboration to any web app with a single script tag. Auto-capture DOM selectors, viewport data, and route information with every comment.

5kb gzippedAsync loadingFramework agnostic

Drop-in integration

Annot8 runs inside a shadow DOM overlay. Your styles never conflict, your bundle stays untouched, and everything loads async.

1

Create a project

Generate your unique Project ID in the dashboard.

2

Paste the snippet

Add to your <head> or <body> — works with any framework.

3

Allowlist your domain

Add localhost, staging, or production URLs.

index.html
1<!-- Annot8 Widget -->
2<script
3src="https://beta.annot8.app/widget.js"
4data-project-id="proj_abc123"
5async
6></script>
Ready — paste into <head> or <body>

Configuration API

Customize the widget with data attributes on the script tag.

data-project-idRequired
string
Your unique project identifier. Required for all widget functionality.
data-public-slug
string
Enables public (unauthenticated) commenting if configured in dashboard settings.
data-theme
'light' | 'dark'
Force light or dark mode. Defaults to the visitor's system preference.
data-position
'bottom-right' | 'bottom-left'
Controls the position of the floating widget launcher button.
data-disable-analytics
boolean
Set to true to disable automatic session tracking and event capture.
data-disable-chat
boolean
Set to true to hide the live chat channel from the widget.

Webhooks & events

Subscribe to real-time events to pipe feedback into your existing workflows — CI pipelines, Slack bots, ticketing systems, or custom dashboards.

thread.created

Fires when a new feedback thread is pinned

thread.resolved

Fires when any thread is marked resolved

thread.assigned

Fires when a thread is assigned or re-assigned

comment.created

Fires on every new comment in a thread

chat.message

Fires on live chat messages from visitors

webhook payloadPOST 200
{
"event": "thread.created",
"project": "proj_abc123",
"thread": {
"id": "thr_92f3a1",
"page": "/pricing",
"selector": "#cta > button",
"priority": "high"
}
}

How the widget works

Zero conflicts with your styling or JavaScript. Annot8 uses modern isolation techniques so it stays out of your way.

Shadow DOM isolation

The widget renders inside an isolated shadow root so your global CSS and JS never interfere — and vice versa.

encapsulation: closed

Async & deferred

The script loads asynchronously with no parser-blocking. It won't delay your page's FCP or LCP.

0ms blocking time

Smart selector engine

Comments anchor to the nearest stable parent using a multi-strategy selector engine with fallback heuristics.

CSS → ARIA → XPath

Tree-shakable

Unused features are never loaded

SSR compatible

Safe to include in server-rendered pages

TypeScript types

Full type definitions for window.annot8

CSP friendly

Works with strict Content-Security-Policy

Enterprise-grade security

Encrypted at rest and in transit. Compliant with the standards your security team expects.

Domain locking

Prevent unauthorized usage with strict origin allowlists per project.

SOC 2 compliant

Infrastructure provider is SOC 2 Type II certified with annual audits.

GDPR ready

Full data export, deletion, and EU-compliant data handling.

Start building today

Add Annot8 to your project in under 2 minutes. Free for up to 3 projects.

View pricing
No credit card 5-minute setup