What the script of an interactive demo is
In a product video, the script is a voice-over that runs while the pictures change. In an interactive demo, the script is spread over three kinds of text:
- The hotspot words on each step: the tooltip beside the button, field or number that matters on that screen.
- The chapters between steps: full-screen cards for a welcome, a choice, a form or the ending, each with a title, a line or two and buttons.
- The spoken line, if the demo has a voice: a sentence read aloud while the step is on screen, which can differ from the tooltip.
The viewer controls the pace. They can skip ahead, go back, or leave at any step, so each step has to make sense on its own and earn the next click. A video script can build to a point over thirty seconds; a demo step that does not pay off at once is where viewers stop.
The shape that works: open, show, prove, ask
Most good demos follow four parts.
- Open with a welcome chapter that says who the demo is for, what they will see, and how long it takes. "See how a support team answers a ticket in three clicks, in under a minute" is enough.
- Show the path: each step one action on one screen, in the order a real user would take them. Pick one job and leave out everything that is not on its path. Settings, edge cases and the second way to do the same thing belong in another demo.
- Prove it on the screen where the result appears: the report filled in, the message sent, the number that moved. This is the step people remember, so give it the most specific words in the demo.
- Ask with a closing chapter that offers one next step and, at most, one alternative: start free, or book a call. A demo that ends on its last screen with no button wastes the moment when interest is highest.
For a first demo on a website, six to twelve steps between the two chapters is a good size. Longer demos work in a help center or for onboarding, where the viewer came to learn rather than to decide.
How many words each step can carry
A tooltip is small, and the viewer reads it while looking at the screen beside it. Keep the hotspot words to one or two sentences, about 12 to 25 words. If a step needs more, it is usually two steps. On a phone, ShotDemo moves the words into a panel under the picture so they never cover the product, and that panel holds a few lines comfortably; a long paragraph scrolls there, which most people will not do.
Chapters can say a little more, because they are the only thing on screen: a title of three to seven words and a body of one or two sentences. Buttons should say what happens next, in two or three words: "Start the tour", "Book a call", "See the price".
If the demo speaks, the spoken line is best kept under about twelve seconds, around 25 to 30 words at a natural pace. It can add the reason while the tooltip names the action, so the viewer gets both without reading a paragraph.
How to write each step
Name the action, then the reason. "Click Publish: your demo goes live at its own address and every view counts from now on." The first half tells the viewer where to look; the second tells them why they should care. Put the name of a button in bold, spelled exactly as it reads on the screen, so the eye finds it.
Write what the user gets, not what the screen contains. "This is the dashboard, with a chart and a table" describes what the viewer can already see. "Every open invoice, oldest first, so nothing slips past thirty days" tells them what it does for them.
Use their words, not yours. Internal feature names mean nothing to a visitor. If your product calls it "Smart Sync" and customers call it "updating the spreadsheet", write the second, and mention the name once if they will need it later.
One idea per step. When a step's words need "and also", split it, or cut the second idea. A viewer remembers one thing per screen at best.
Be specific where it counts. Numbers, names and results persuade; adjectives do not. "Answers in four minutes instead of a day" beats "much faster responses".
Let the viewer choose a path
When different visitors care about different parts of your product, ask them early. A chapter after the welcome can ask "What do you want to see?" with a button for each answer, and each button leads to the first step of its own short branch. Keep each branch to a few steps, and bring them back together at the proof step or the closing chapter, so every path ends with the same clear next step. In ShotDemo, a hotspot or a chapter button can lead to any step, so a branch is a matter of where each click goes.
The template
Copy this and fill in the brackets. Each line is one step or chapter.
Welcome chapter
Title: [Product] in [number] steps
Body: See how [who] [does the job] in [time]. Click the pulsing dots, or use the arrow keys.
Button: Start the tour
Step 1 [Where the job starts]: [what the user has in front of them, in their words].
Step 2 Click **[Button]** to [what happens]: [why it matters].
Step 3 [Type or pick something]: [what it saves them].
Step 4 [The step most people get wrong elsewhere]: [how your product makes it easy].
Step 5 [The result appears]: [the specific outcome, with a number if you have one].
Step 6 [Where they share or use the result]: [who sees it, and what they do next].
Closing chapter
Title: [Do the job] with your own [data]
Body: [The price or the free start, in one sentence].
Buttons: [Start free] [Book a call]
Then read it aloud from start to finish without the screens. If the story still makes sense, the steps are doing their job; if it sounds like a list of buttons, rewrite the steps that only name a button.
A real demo, line by line
ShotDemo's own tour, on the example page and on the home page, follows this shape. Its words:
- Welcome: "How ShotDemo works. A one-minute tour, made with ShotDemo from its own screens." Button: "Start the tour".
- Step 1: "Start from screenshots of your product, your website's address, or a recording made with the ShotDemo Chrome extension: each screen becomes a step."
- Step 2: "Every step has a hotspot: put it on the button or the number that matters, write what it does, and choose where a click leads."
- Step 3: "Blur a name or cover a figure. It is burnt into the picture viewers get, so what is under it never reaches them."
- Steps 4 to 6: the design, the chapters, and sharing, one idea each.
- Proof: "See how many people opened it, who went all the way and where the others stopped. With a lead form, you also see who they are."
- Closing chapter: "Make your product's demo. Free to try with one live demo, no card." Buttons: "Make a demo" and "See the price".
Each step names one thing on the screen in bold and says what it means for the person making a demo. The proof step is the analytics screen, because seeing who watched is the result a buyer of a demo tool wants.
Read the numbers, then rewrite
A demo's script is never finished on the day it goes live. Once it has had a hundred or so views, look at where people stop. In ShotDemo, each demo's analytics show how many viewers reached each step, so the step with the biggest drop is easy to find. Usually its words are too long, it asks the viewer to understand two things at once, or it is a step the demo did not need. Rewrite it or cut it, publish again, and compare the next hundred views. ShotDemo keeps your earlier versions, so a change that makes things worse is easy to undo.
The demo check in ShotDemo's editor also catches the mechanical problems before anyone sees them: steps without words, hotspots that sit on nothing, a last step with nowhere to go. Fix those first; the rewriting is easier on a demo that works.
Mistakes to avoid
- A tour of the menu. Showing every section of your product teaches navigation, not value. Follow one job.
- Paragraphs in tooltips. If it needs a paragraph, it needs a chapter, or a second step.
- Ending without an ask. The last screen of a demo is where interest peaks. Always end with a button.
- Words that repeat the screen. If the tooltip says what the viewer can read on the button, it has said nothing.
- Writing for yourself. Ask someone who has never used your product to click through it and say what they think each step is for. Wherever they hesitate, the words need work.
When the script reads well, the same words can also make a narrated video of the demo: the guide on demos and videos covers when that is the better choice.