Walkthrough Video: How to Make One for Your Web App
A walkthrough video shows someone how to do one thing in your product, start to finish, at the pace of a person following along. To make one for a web app: pick a single task, list its steps (5 to 15 is enough), write a short caption for each step that says why it matters, record the flow without mistakes, and export it in the format of the page it will live on. With Klevo, the AI does the recording: you describe the task to Claude or ChatGPT, it clicks through your app in a browser on Klevo’s servers, and you get an MP4 with a smooth cursor, zooms on the key clicks and your captions.
What makes a product walkthrough video different from a demo?
A demo sells: it shows the best moment fast. A walkthrough teaches: it shows every step a user needs, in order, so they can repeat it. That changes three things.
- Pace. A walkthrough holds a little longer on each screen, so the viewer can find the same button.
- Completeness. No skipped steps. If the user has to pick a plan before the export button appears, the video shows it.
- Captions. Each one names the action and the reason: “Choose Weekly so the report lands every Monday”, not “Click here”.
The same recording can serve both jobs. Software demo video examples covers the selling side.
Why do app walkthrough videos go stale so fast?
Because they are full of UI. Rename one button or move a menu, and every walkthrough that shows it is now wrong. Users notice first: they follow the video, the button is not there, and they open a support ticket instead. If each walkthrough is a screen recording, keeping a help center current means re-recording every one, so most teams stop updating them.
The fix is to treat a walkthrough as steps, not as footage. Demo videos that never go stale explains how a saved script turns the update into a re-render.
How do you make a walkthrough video step by step?
- Pick one task. “Invite a teammate”, not “Team features”. One video, one outcome.
- List the steps as a user would do them, starting from a screen they can already reach.
- Write the captions. One per step, up to a short sentence, in the words of your UI. Captions that explain a demo has examples.
- Prepare clean data. A demo account with believable names, nothing private on screen (demo videos without real customer data).
- Record. With Klevo, paste the URL, the steps and the captions into Claude or ChatGPT and ask it to record the walkthrough. It dismisses cookie banners and welcome tours before the video starts, takes one step at a time and checks the screenshot after each.
- Choose the output. 16:9 in a browser frame for a help article, 9:16 in a phone frame for a social post, with or without AI narration read from the captions.
- Re-render when the UI changes. The script is saved; ask for the same walkthrough again, or edit one step’s caption or target on Pro.
Which format fits which walkthrough?
The page the video lives on decides the shape and how many steps it can carry:
| Where it lives | Format | Frame | Steps |
|---|---|---|---|
| Help center article | 16:9 | Browser | 5 to 15 |
| Onboarding email | 16:9 or 1:1 | Browser | 3 to 8 |
| In-app tip or empty state | 16:9 | No frame (Pro) | 3 to 6 |
| Social post or story | 9:16 | Phone | 5 to 10 |
| Full product tour | 16:9 | Browser | up to 120 on Pro, 240 on Ultra |
More on where each format goes: demo video formats and device frames by channel. For help centers and onboarding emails specifically, see demo videos for onboarding emails and help centers.
What about software that is not a web app?
Klevo’s live recording opens public URLs, so it covers web apps (staging included, localhost not). For a desktop app or a flow behind two-factor, record your screen once, upload the file, and the AI picks the moments that tell the flow as prints. Klevo then adds the same cursor, zooms and captions.
What does it cost?
| Plan | Price | What you get |
|---|---|---|
| Free | $0 | 3 videos a month, 720p, up to 20 steps, small watermark, 10 voice credits to start |
| Pro | $19 a month or $149 a year | 1080p without the watermark, device frames, your brand, caption styles, step editing, up to 120 steps |
| Ultra | $49 a month or $399 a year | Everything in Pro, up to 240 steps for full tours, more voice credits |
Your first Pro or Ultra subscription is free for 14 days, then $19 or $49 a month; cancel before the trial ends and you pay nothing. See the pricing section.
What is the next step?
Open your most visited help article and list the steps it describes. Create a free account, connect Klevo to the AI you use, paste those steps and ask for a walkthrough video. You get the MP4 in the chat, ready to embed above the text.
FAQ
How long should a walkthrough video be?
As long as the task, no longer. Count steps, not seconds: how long should a demo video be.
Can I add a voice-over?
Yes. AI narration reads your captions and spends voice credits; Free starts with 10, Pro adds 200 a month.
Does it work for apps behind a login?
Yes, with the login saved as a secret: record a demo of an app behind a login.