How to annotate a live website
You want to point at something on a website and say what should change, or ask someone else to. There are four common ways to do it. Here is what each one is good for, and where it falls short.
Updated
What a good annotation has
An annotation is only useful if the person who reads it can act on it without asking a question. That takes more than a circle on a picture:
- The exact spot, meaning the element or area on a named page, not "the button near the bottom".
- A screenshot of what the writer saw, because the page looks different on every screen.
- Their browser and screen size, so a layout problem can be seen again.
- A place to answer, so "done" or "did you mean this?" sits next to the note, not in a new email.
Four ways to annotate a website
1. Mark up a screenshot
Take a screenshot, draw on it with the built-in tool on your computer or phone, and send it. There's nothing to set up, and everyone knows how. It works for a one-off comment, but each note takes several steps, arrives without the page address or browser, and lives in an email or chat thread. Ten notes become ten attachments that someone has to match to pages by hand.
2. A browser extension
Annotation extensions let you comment on any site you can open, with no code on it. That suits reviewing a site you don't control, or a quick personal checklist. The catch is that everyone who comments needs the extension installed, which is a real hurdle for clients and colleagues outside your team.
3. A shared review link
Some tools load the website inside their own page and give you a link to share. Reviewers open the link and comment, with nothing to install. The site runs inside someone else's page, so logins, cookie banners, embedded checkouts and single-page apps don't always behave as they do on the real site. Reviewers are also looking at a copy rather than the page their customers will see.
4. A feedback widget on the site
A short script adds a Feedback button to the site itself. Reviewers click it, click the thing they mean and type. The tool attaches the screenshot, page, element and browser for them, and the conversation stays next to the note. It needs one line of code on the site, usually on a staging copy, and in return it's the only method that captures everything above without asking the reviewer to do anything extra.
Side by side
| Method | Setup | For reviewers | What arrives |
|---|---|---|---|
| Marked-up screenshot | None | Several steps per note | A picture, by email or chat |
| Browser extension | Everyone installs it | Easy once installed | Varies by tool |
| Shared review link | Paste the address | Open a link | Pinned notes on a copy of the site |
| Feedback widget | One script tag | Click the button on the real site | Pinned notes with screenshot, element, page and browser |
Annotating a website with Pinnote
Pinnote is a feedback widget, with an extension for the sites you can't add code to.
- Add the script tag to the site, or to its staging copy. Install guides cover WordPress, Webflow, Framer, Shopify, Squarespace, Wix and Next.js. Until you choose otherwise, only the people you invite see the Feedback button.
- Invite reviewers by email, or send your share link. They click it and start commenting, with no account and no extension.
- Reviewers click any element to pin a note, drag to mark an area, draw on the page, or leave a general note about the whole page.
- Each note arrives with a screenshot, the element and its text, the page, the screen size, the browser and any recent console errors. Your reply shows up next to the note on the page.
Can't add code to the site? The Pinnote extension for Chrome and Edge loads the same tools on it for the people you invite.