How to Make a Click-Through Demo (Browser Extension or CLI)

A click-through demo is a sequence of real screenshots of your product, one per step, with a hotspot marking where to click. The viewer moves through it at their own pace instead of watching a video. Making one takes three steps: capture the flow, annotate each step, then share or embed it.

1. Capture the Flow

You have two ways to record with Stepshots.

• The Stepshots browser extension. Hit record, click through your product as you normally would, and every click becomes a step with a screenshot. When you're done, choose Upload to Stepshots in the extension and the recording opens in your workspace. Good for one-off demos and flows that change often.
• The open-source CLI. Describe the flow in a stepshots.config.json file and run stepshots record to capture it in headless Chrome. Then stepshots login once and stepshots upload output/<name>.stepshot to send it to your workspace (the quickstart walks through it). Because the flow is a file, you can re-record it after a UI change instead of clicking through again by hand.

2. Annotate Each Step

Open the recording in the editor and add overlays to each step:

• Hotspot to show where to click
• Highlight to draw attention to an element
• Blur to hide emails, keys or customer data
• Arrow to point at something
• Popup to add a sentence of explanation
• Zoom to focus on a small part of the screen

Keep the text short. One idea per step is usually enough.

3. Share or Embed It

Every public demo gets a share link, and you can embed it on your own site or in your docs with an iframe, a JS snippet, a web component or the React SDK, on the free tier too. The embedding guide covers all four. On the free plan the JS snippet shows a small "Made with Stepshots" link; Pro's custom branding removes it.

Pro also adds view analytics and per-step drop-off, so you can see which step people leave on.

When a Video Is the Better Choice

A click-through demo is best when the viewer should try the flow themselves: on a landing page, in onboarding or in a sales follow-up. If you need narration, motion or a story with a voiceover, a video is still the better format. Our comparison of interactive demo software covers tools for both.

Start Free

The free tier includes one hosted demo plus unlimited local recording with the CLI. No credit card needed.