Click & Record

Product demos · 5 min read

How to record a website walkthrough video clients and teammates can follow

Published · Click & Record team

To record a website walkthrough, plan the route through the site first, record just the browser tab with your microphone on, scroll slowly and pause at each section, narrate the reasoning rather than reading the page, then trim the dead time and add zooms and captions before exporting an MP4. A free Chrome extension can do all of it in one tool. This guide covers the planning, the recording technique and the edits that make a website walkthrough easy to follow.

When a website walkthrough video beats a meeting

A recorded walkthrough lets people review a site on their own time, rewind the parts they missed and share it with someone who was not in the room. Common uses:

  • Client handoff: show a client how their new site is structured and how to update it.
  • Design or content review: walk stakeholders through a staging site and point out what changed.
  • Site audit: explain usability, SEO or accessibility issues page by page.
  • Competitor teardown: walk your team through another site's funnel.
  • Internal documentation: record how an admin area or CMS works for new teammates.

If your goal is to sell a product rather than explain a site, you want a demo instead. See how to make a product demo video.

Plan the route before you record

Walkthroughs drift when you improvise. Write the route as a numbered list of pages and the one point you will make on each:

  1. Homepage: hero message and main call to action.
  2. Pricing: the new plan comparison table.
  3. Product page: the updated screenshots and FAQ.
  4. Checkout: the shortened form.
  5. CMS: where the client edits the homepage banner.

Open each page in advance so nothing has to load on camera. If the site is behind a login, sign in first. If it is a staging site with a long or internal URL, note it: you may want to replace it later with a clean mock browser frame.

Set up the browser for a clean recording

  • Record the tab, not the screen. Tab recording captures only the page, not your desktop, bookmarks or other tabs. See how to record a Chrome tab for the details.
  • Pick a realistic viewport. A window about 1280 to 1440 pixels wide is close to a common laptop view and keeps text readable after export.
  • Test the mobile layout separately. If the walkthrough must show the mobile site, use Chrome DevTools device mode and record a second short clip.
  • Turn off notifications and close chat apps.
  • Use a headset or USB mic if you have one. Laptop mics pick up keyboard and fan noise.

More setup advice is in screen recording tips for crisp video.

Recording technique for a website walkthrough

Scroll like a viewer, not like a user

When you browse, you flick through pages. When someone watches, fast scrolling is a blur. Scroll in short steps, stop on each section and let it sit for a second or two before you speak. A trackpad or the Page Down key gives smoother movement than a notched mouse wheel. If a long page needs to be shown in full, scroll it steadily and speed that segment up in editing.

Point with clicks, not circles

Waving the cursor around a paragraph is hard to follow. Instead, click on or near the thing you are discussing (on an empty area if you do not want to trigger a link). With an auto-zoom recorder, that click becomes a zoom on that spot, which is a far clearer way to say "look here".

Click & Record works this way. It logs every click you make in the page while you record, with its position and timestamp, and turns each one into a zoom keyframe afterwards. Nearby clicks link into a single pan so the view glides across a section instead of zooming in and out repeatedly, and typing into a form holds the zoom while you type. Because zooms are added after recording, you can retime, strengthen, re-aim or delete any of them, or add your own.

Narrate decisions and actions

Do not read the page aloud; the viewer can read. Say why something is there, what changed, or what you want them to do: "We moved the pricing toggle above the table because most visitors were missing annual plans." If you stumble, pause, and repeat the sentence. You will cut the bad take later.

Pause instead of stopping

If you need to check notes or switch to a page that is not ready, pause the recording and resume. Click & Record supports pause and resume, and you can stop from the toolbar icon or with Alt+Shift+S. A 3-2-1 count-in runs before recording starts, so you never have to trim the first seconds of you reaching for the mouse.

Edit the walkthrough so it respects the viewer's time

EditWhen to use it
Trim and splitRemove false starts, loading screens and retakes
Speed 2x to 4xLong scrolls, form filling, waiting for builds
Manual zoomHighlight a detail you did not click on
Browser frameReplace a staging or internal URL with a clean one
SubtitlesReviewers who watch muted or skim
Append clipsAdd a separate mobile-view recording at the end

The mock browser frame is especially handy for client work: it draws a macOS or Windows style window around the recording with an editable URL bar, so you can show clientsite.com/pricing instead of a long preview link. Subtitles are generated on your computer by a built-in Whisper model, and you can export them as SRT or VTT if the client's platform needs a sidecar file.

Export and share

Export MP4 (H.264 + AAC) for the widest compatibility, at 16:9. The export dialog shows the resolution, bitrate and estimated file size first, so you can pick a smaller preset if you need to email the file. If you want a link, choose Save to Google Drive and share it from Drive. Nothing else leaves your machine: recording, editing, transcription and export all run locally in the browser, which matters when the site is unreleased.

Click & Record is free, works in Chrome, Edge and Brave, and needs no account. If you recorded the walkthrough with something else, open the file in the free browser editor to trim it, add manual zooms, a frame and captions. For walkthroughs that teach new users your product rather than review a site, see our guide to the SaaS onboarding video.

Frequently asked questions

What is a website walkthrough video?

It is a screen recording that guides the viewer through a website page by page, with narration explaining what each section does or why it was built that way. It is common for client handoffs, design reviews and site audits.

How do I record a website walkthrough for free?

Use a free browser-based recorder such as the Click & Record Chrome extension. Record the tab with your microphone on, then trim, add zooms and captions in its editor and export MP4.

How do I scroll smoothly in a screen recording?

Scroll with a trackpad or with the keyboard (Page Down or the space bar) rather than a notched mouse wheel, and pause at each section. You can also speed up long scrolls in the editor.

Should I record a tab or the whole screen for a website walkthrough?

Record the tab. It captures only the page at a clean size, hides your desktop and other tabs, and keeps the walkthrough focused on the site.