How to markup a web page for client review
To markup a web page, take a screenshot and annotate it in Figma or Preview, use a browser extension to pin notes to the live page, or paste the URL into a review tool and send your client a shared link they click to leave pinned notes — no extension required on their end. Which method fits depends on who is doing the marking up: if it's just you, a screenshot or extension works. If your client needs to mark it up and send feedback back, a shared link is the only approach that doesn't hit a friction wall.
Screenshot + annotate before a call
Take a full-page screenshot (GoFullPage for Chrome, or DevTools → Cmd+Shift+P → 'Capture full size screenshot'), open it in Figma or Preview, and add arrows, boxes, and text labels. Useful when you're flagging questions on your own Webflow build before a client call. The limit: it's static. The moment you push a change, the image is stale, and when you hand it to a client they're comparing a PNG to their live browser. Use it for your own prep; use a review link for anything round-trip.
Browser extension for your own QA pass
Extensions like Marker.io or BugHerd attach a panel to the live page, let you click any element, write a note, and capture the URL, browser, and OS automatically. Good for your own QA pass on a staging build. The problem: you cannot hand an extension to a non-technical client in 30 seconds. They'd need to install it, and it may need a project token to connect. For a client signing off before launch, this turns a 10-minute task into a support call. Extensions are the right tool when you are the reviewer. When your client is the reviewer, use a link.
Share a link your client opens and clicks
Proxy-based review tools — Drafty, Pastel, AnnotateWeb — load the page through a special URL so anyone can hover an element, click, and pin a note. You paste the live URL, get a review link, send it. Your client opens it on their laptop or phone, clicks the heading they want shortened, and the note lands in your thread anchored to that element. No extension, no account on their end. One thing to test first: if the page is behind HTTP basic auth (common on staging), the proxy can't get through — temporarily drop the auth gate, share the link, and put the gate back after.
What to do when the notes arrive
Pinned notes solve the location problem, but a client who clicks a CTA and writes 'this feels off' has told you where, not what. When you reply, restate what you heard — 'are you saying the button colour doesn't stand out, or the label doesn't match the action?' — and resolve the thread once you've made the change. The pattern that works: markup the page before the call to surface your own questions, then share the review link after the call so the client confirms the changes landed. Two rounds, same link.
If your client is the one reviewing — not you — the review-link approach does all the work. Drop the URL into Drafty, share the link, and they click the exact element they mean and pin a note right there. No extension for them to install, no description of 'the button near the top with the blue background.' Their note arrives located, you reply and push the fix, and the updated version lives on the same link. They open it again and see the change in place.
Open a live demoQuestions
- What does it mean to markup a web page?
- In the design context, marking up a web page means adding annotations — arrows, circles, text callouts, or pinned comments — to point at specific elements you want to change or approve. It's distinct from HTML markup (code). The goal: precise, located feedback without a call.
- Can I markup a web page without downloading anything?
- Yes. Paste the URL into a proxy-based review tool and share the link. No extension, no software — on your end or your client's. You need an account to create the link; the reviewer doesn't need one to annotate.
- How do I markup a Webflow or Squarespace site for client feedback?
- Paste the published URL into a link-based review tool. As long as the URL is publicly accessible (no HTTP auth, no IP restriction), your client can click any element to leave a note. Works regardless of how the site was built — Webflow, Squarespace, WordPress, or hand-coded.
- What's the difference between a screenshot markup and a web page markup?
- A screenshot markup is a static image that goes stale the moment the live page changes. Web page markup pins notes to elements on the live page, so feedback stays in context through revisions. For multi-round reviews, web page markup saves the 'which version were you looking at?' round.
- Do reviewers need an account to markup a web page?
- With a link-based tool, no. They open the review URL and click to pin a note — no signup, no login, no extension. On the creator side, you need an account to generate the link.
- Does web page markup work on mobile?
- Browser extensions don't work on iOS or Android. A proxy link does — your client opens it in Safari or Chrome on their phone, taps the element, and leaves a note. Clients often review on their phone outside work hours; this is the method that works when they do.
Keep exploring
Stop emailing files back and forth.
Share one link. They comment on the exact spot — no account, always the current version.