# Quickstart: collect website feedback Create an Annot8 project, install the website feedback widget, and collect your first bug report or pinned comment. Source: https://docs.annot8.app/docs/quickstart You need an Annot8 account and the ability to add a script tag to your site. [Sign up free](https://www.annot8.app/sign-up) — no card required. ## Create a project [#create-a-project] In the [dashboard](https://www.annot8.app/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 snippet [#copy-the-snippet] Open **Settings → Installation**. The snippet is generated for your project and already contains the right project key and backend URL: ```html title="Paste before " ``` 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 [#add-it-to-your-site] ```html title="index.html" ``` ```tsx title="app/layout.tsx" import Script from "next/script"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ``` ```astro title="src/layouts/Base.astro" ``` ## Leave a comment [#leave-a-comment] 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. ## A note on production [#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**. ## Next [#next] Workspaces, projects, environments, threads. Roles, invitations, and who can do what. Connect the tools you already use. The usual causes, in order.