Make a clickable demo from screenshots

You don't need a recording to make a clickable demo. Upload a set of screenshots, and TurtleScene turns each one into a step with a hotspot and a tooltip. This suits flows that are hard to record in one take, or screens you already have from a design tool.

#Before you start

• Take one screenshot per step of the flow, showing the screen just before the viewer should click.
• Use PNG, JPG or WebP files.
• Keep them the same size where you can, so the demo doesn't jump between steps.
• Crop or edit out anything private before you upload, or take the screenshots in a test account with demo data. The editor can't remove something from a screenshot once it's uploaded.

#Upload screenshots in the create wizard

1. In the sidebar, click New capture.
2. Choose Upload screenshots.
3. Drop your files on Drop screenshots here, or click the area to browse. You can add more files the same way.
4. Drag the thumbnails into the order of the flow. The order you set here is the order of the steps.
5. Click Next.
6. On the Choose an output step, click Interactive demo.
7. Enter a Demo title.
8. Leave AI-powered setup ticked if you want AI to set up the steps (see below).
9. Click Create demo. TurtleScene uploads the screenshots, runs the AI setup and opens the editor.

#What the AI setup does

With AI-powered setup ticked, AI looks at all your screenshots together and, for each step:

• writes a short step title,
• picks the element the viewer should focus on and places the hotspot there,
• writes a tooltip title and a one- or two-sentence instruction.

It can also change the order of the steps if another sequence reads more logically, and it can add a voiceover to each step. Check the order in the steps list and drag steps back if needed.

Without AI setup, each step gets a hotspot in the centre of the screen and the tooltip "Click to continue". You then place the hotspots and write the tooltips yourself.

#Run the AI again from the editor

You can run the same analysis at any time, for example after adding screenshots or product context.

1. Open the demo in the editor.
2. In the top bar, click Enhance with AI. A message shows Analyzing screenshots, generating tooltips & voiceovers…
3. Wait for the editor to reload with the new titles, hotspots, tooltips and voiceovers.

#Add screenshots to an existing demo

1. Open the demo in the editor.
2. In the toolbar, click Upload.
3. Click Upload Image and choose one or more files. Each image becomes a new step at the end of the list.
4. Drag the new steps into place in the steps list.

Upload Video in the same menu splits a video file into image steps, one every 3 seconds, and then runs the AI setup on them. To build a demo from a screen recording with real click detection, see From a recording instead.

#Replace one screenshot

1. Select the step in the steps list.
2. Click Replace image under the canvas and choose the new file.

The hotspot and tooltip stay as they are, so check that the hotspot still sits on the right element.

#Screenshots or a recording?

• Screenshots give you full control over each frame and never use a credit. You place and describe every step, with help from AI.
• A recording captures the real flow, detects each click and its exact element, and also gives you a narrated video, social cuts and a help article from the same take. It uses a credit.

See Plans, credits & limits for how credits work.

#Next steps

• Using the editor: tooltips, hotspots, chapters and annotations.
• Share & embed: publish the demo and put it on your site.