Quickstart: collect website feedback

Create a projectCopy Anchor Link

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.1

The 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 snippetCopy Anchor Link

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>

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

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

Reload the page. A launcher appears in the corner.

1. Open it and choose Annotate this page.
2. Click the element you want to talk about.
3. 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.