How to make an interactive product demo, step by step
-
Pick one flow to show
Choose the one thing a new user most needs to see — creating a booking, sending an invoice, publishing a page — and write down the clicks from start to result. One demo, one flow: a second flow is a second demo.
-
Take a screenshot of every screen
Click through the flow in your product and capture the screen before each click, plus the result at the end. Keep the window the same size for every shot so the demo doesn't jump between steps.
-
Add the screenshots to the editor
Open the Demo Maker editor, choose New demo and drop the screenshots in, paste them with Ctrl + V, or choose them from a folder. Each picture becomes a step; drag them into order.
-
Place a hotspot on each screen
Click the button, link or field the viewer should click. A pulsing dot lands there; drag it to fine-tune. For a screen that only shows a result, choose Pressing Next instead of a dot.
-
Write a short hint for every step
Type the hint in the panel on the right. It appears beside the dot on the side with the most room, or on the side you choose. Keep it to one action: "Pick a free time slot."
-
Blur private data and add a start and end
Switch to the Blur tool and drag over names, emails or numbers. Under Whole demo, set your colour, a start screen with a title, and an end screen with your own button, such as "Start free trial".
-
Preview, export and share
Press Preview to click through it on a desktop or phone size, then Export to download the ZIP. Put it online, share the link, or embed it on your website.
How to take screenshots for a demo
Every computer and phone has a screenshot shortcut. Capture just the app window or the area that matters, not your whole desktop.
| Device | Shortcut | What it captures |
|---|---|---|
| Windows | Win + Shift + S | An area or a window, copied to the clipboard — paste it straight into the editor |
| Mac | Cmd + Shift + 4 | An area; press Space after it to capture one window |
| Mac, to clipboard | Cmd + Ctrl + Shift + 4 | An area, copied instead of saved — ready to paste |
| iPhone | Side button + volume up | The whole screen, saved to Photos |
| Android | Power + volume down | The whole screen, saved to the gallery |
- Use example data. A test account with believable names reads better than real customers — and needs no blurring.
- Hide the clutter. Close notifications, side panels and the bookmarks bar before you capture.
- Same size, same zoom. Screenshots of one size make the demo feel like one product, not a slideshow.
How to write hints people follow
The hint is the whole script of your demo. Viewers read one line, click, and move on — so each line has one job.
- Start with a verb. "Pick a time slot", "Send the invite" — the action, not the feature name.
- One action per step. If a hint needs "and then", it is two steps.
- Say why when it isn't obvious. "Turn on reminders — guests get a text the day before."
- Keep it short. Under fifteen words fits beside the dot without covering the screen.
- End on the result. Make the last screen a Next step that shows what the user gets.
How long should an interactive demo be?
Five to ten steps. That is long enough to reach a real result and short enough that most people finish. If the flow needs more, split it into two demos — "Create a booking" and "Manage your calendar" — and link the second from the first one's end screen. Demo Maker allows up to 40 steps per demo.
Publish and share your demo
Export gives you a ZIP: one page, a small script for embedding, and your screenshots. It is a complete website, so
any web host can serve it. On Dplooy, drop the ZIP on the dashboard and choose
ZIP to site — you get a link like your-demo.dplooy.com to send or put behind a button.
To show the demo inside your own website, paste the two-line embed code from the export dialog. The embedding guide covers WordPress, Webflow, Squarespace and more.
Your demos are saved in this browser. To edit a demo on another computer, open its exported ZIP in the editor — everything comes back except the unblurred originals, which never leave the browser they were made in.