Quickstart
Create a project, install the widget, and collect your first thread.
You need an Annot8 account and the ability to add a script tag to your site. Sign up free — no card required.
Create a project
In the dashboard, click New project and give
it a name. A project represents one site or app, and it comes with a project key
that looks like pj_....
Every new project starts with a Production environment. Add the hosts you
actually develop against — go to Settings → Environments and create a
Development environment with a pattern like:
localhost *.local 127.0.0.1The widget refuses to load on a hostname that doesn't match any environment, so this step is what makes it appear on your machine.
Copy the snippet
Open Settings → Installation. The snippet is generated for your project and already contains the right project key and backend URL:
<script
src="https://www.annot8.app/widget.js"
data-project-id="pj_xxxxxxxxxxxx"
data-convex-url="https://your-deployment.convex.cloud"
data-dashboard-url="https://www.annot8.app"
async
></script>Copy the values from your own dashboard. A snippet borrowed from another project or another workspace will fail the origin check and load nothing.
The same Installation page has an agent prompt tab: a ready-made instruction block you can paste into Claude Code, Cursor, or any coding agent, which tells it to wire the tag into your framework correctly.
Add it to your site
<body>
<!-- your content -->
<script
src="https://www.annot8.app/widget.js"
data-project-id="pj_xxxxxxxxxxxx"
data-convex-url="https://your-deployment.convex.cloud"
async
></script>
</body>Leave a comment
Reload the page. A launcher appears in the corner.
- Open it and choose Annotate this page — or just press C.
- Click the element you want to talk about.
- Type your feedback and submit.
The thread shows up in Project → Inbox immediately, with a screenshot, the element's selector, the page URL, the viewport, and any console or network errors from the session.
A note on production
By default the annotation widget is hidden on production hosts so real visitors never see it. Your team still sees it everywhere else.
When you're ready to collect feedback from live traffic, turn on Show widget in production in Settings → Features.