How to track website changes for client review
To track website changes for review, send the client a staging URL and walk them through what moved. For a cleaner handoff, use a visual diff tool to highlight exactly what changed — or put the revised site on a review link where the client pins notes to the specific element they want adjusted, without needing a login or an extension.
Send a staging link and describe what changed
The bluntest approach: push your changes to a staging environment (Vercel preview URLs, WP Engine staging, Netlify branch deploys all do this automatically), paste the link in a message, and bullet out what you changed. Works fine for small updates. The problem is that clients don't cross-reference your bullet list against the page — they reply 'looks good' without noticing the thing you actually moved, then spot it a week after launch and call it a regression. To make this more reliable, include a screenshot of the before and after the specific section you changed, not the whole page.
Take a visual diff with a browser tool
A visual diff captures the before and after as images and overlays them so differences are highlighted in red. Tools like Diffy, Percy, and Playwright's screenshot comparison mode all do this — Playwright is free and runs against any URL. The output is a side-by-side image with changed pixels marked. Send that to the client alongside the staging URL. Most clients understand 'red means changed' without any explanation. The catch: a visual diff shows pixel differences, not meaning — a font-weight bump shows up as a large red smear, while a nav link changing from /about to /about-us shows nothing unless you're also diffing the HTML.
Use a browser extension to compare versions
Extensions like Page Ruler Redux (Chrome) let you measure spacing before and after. For a more structured compare, Pastel and BugHerd both let clients add comments directly on a live or staging URL. You install a script tag or a browser extension on the staging site, send the URL to the client, and they click any element to leave a note. The limitation: most of these tools require the client to install the extension or join an account. In practice, clients don't install things for a one-off review — expect a few back-and-forth messages before they're actually looking at what you meant.
Share an annotated review link the client can comment on directly
The most friction-free flow for a designer-to-client handoff: wrap the staging URL in a review board, record a short Loom or add a text note saying 'I moved the hero CTA from left to center and changed the footer from 4 columns to 3 — click either element if you want to flag anything,' then send the link. The client clicks the exact element they want to question and leaves a threaded note — no account, no extension. You see comments anchored to the exact spot, not a paragraph that starts 'the bit near the middle.' This keeps the change-log in the same place as the feedback so you're not piecing together a Slack message with a screenshot with a Google Doc comment.
If the site is already built — a Webflow export, a Next.js deploy, a Framer preview — drop the URL into Drafty. It wraps the live site in a review board: share the link with the client, they click the element they want changed and leave a pinned note. No account, no extension. You see every comment anchored to the exact spot and can reply, resolve, and push the revised version to the same link. Beats a bullet list of what-changed every time.
Open a live demoQuestions
- How do I show a client what changed on a website?
- Send a staging URL with a short written summary of what moved, plus before/after screenshots of the specific sections. For a more reliable sign-off, use a visual diff tool (Playwright screenshot comparison, Diffy, or Percy) to show changed pixels highlighted in red — clients immediately understand red means changed without needing to hunt for differences.
- What is the best way to get client approval on website changes?
- Put the changes on a staging URL the client can open on their phone or laptop with no login. Ask them to comment on the exact element — not reply to an email describing it. Tools that let a client click an element and leave a pinned note remove the 'which bit near the top?' ambiguity before it becomes a revision round.
- How do I track what changes were made to a website?
- Git is the most precise answer — every change is in the commit log with a timestamp and the exact lines that changed. For a non-technical record a client can follow, staging deploy previews (Vercel, Netlify) keep a URL per commit so you can link to the exact version the client approved.
- How do I compare two versions of a website?
- Screenshot both versions and overlay them in Figma (Difference blend mode shows mismatches in colour). For automated comparison, Playwright's toMatchSnapshot() captures a screenshot on each test run and diffs against the baseline — any pixel change is flagged. Diffy and Percy are hosted versions of the same idea, with a UI for reviewing the diff without running code.
- Can a client leave feedback on a live website without an account?
- Yes — review tools like Drafty wrap a live URL in a comment layer the client opens in their browser. They click any element and pin a note to it with no login or extension. You see the note anchored to the exact element they meant.
- How do I stop clients from approving changes they haven't actually looked at?
- Give them a specific thing to react to, not a whole page. Instead of 'here's the updated site,' send 'I moved the CTA from left-aligned to centered — does that work?' and link directly to that section. When clients have a concrete question to answer, they look at the element instead of scrolling to the bottom and clicking Approve.
Keep exploring
Stop emailing files back and forth.
Share one link. They comment on the exact spot — no account, always the current version.