Make a clickable demo from a recording

A clickable demo lets viewers step through your product themselves, one click at a time. When you already have a narrated demo video, TurtleScene can build the clickable demo from it: every click it found in your recording becomes a step. Use the clickable demo when viewers should try the flow themselves. Use the narrated video when they should sit back and watch it.

#Before you start

You need a narrated demo video with its steps detected. That happens when you create one from a screen recording (see Create a narrated video).

• You don't need to render the video first. The build uses the steps and the script, not the finished MP4.
• Building a clickable demo from a narrated video doesn't use a credit.
• Tooltips are taken from your script, so edit the script before you build if you want different wording. See Script & voice.

#Build it from the create wizard

The wizard makes the narrated video first. You then build the clickable demo from its editor.

1. In the sidebar, click New capture.
2. Choose Record screen and record your flow, or choose Use a recording you already made and pick one.
3. On the Choose an output step, click Demo video + interactive demo.
4. Enter a Demo title, pick a Demo kind and click Create demo. The narrated video editor opens once the recording is analysed.
5. In the top bar, click Make interactive demo.

#Build it from a narrated video

1. In the sidebar, click Library, then the Demo videos tab.
2. Open the video you want to use.
3. In the top bar, click Make interactive demo. The button shows Building interactive demo… with a timer while it works.
4. Wait for the build to finish. The clickable demo opens in its editor.

The button is greyed out when the video has no steps yet.

#What the clickable demo contains

• An intro chapter. A full-screen title card with the demo's name, a one-line summary and a Start the tour button.
• One step per click. Each step shows the screen just before the click, at the recording's full resolution.
• The clicked element outlined. When TurtleScene finds the exact element, it draws an outline around it (the Outline hotspot style).
• A tooltip with Back and Next. The tooltip text is that step's line from your script. Steps without a script line get short AI-written guidance that names the element to click. Viewers can move through the demo from the tooltip.

Each step's autoplay time is set from the length of its tooltip, so longer text stays on screen longer.

#Check every step

Detection is good but not perfect, especially in long recordings. Before you share the demo, click through each step in the steps list on the left and compare the hotspot with the screenshot.

Look for these problems:

• A plain marker instead of an outline. When TurtleScene can't confirm which element was clicked, the step gets a round marker (the Pointer style) at the click point instead of an outline.
• The wrong element outlined. The outline sits on a similar-looking button.
• The wrong moment. The screenshot doesn't show the element yet, for example because the page was still scrolling.

#Fix a step that got a plain marker

1. In the steps list, click the step.
2. In the toolbar, make sure Hotspot is selected.
3. On the screenshot, drag the marker onto the element that was clicked. You can also click anywhere on the screenshot to move the hotspot there.
4. To outline the element, open Hotspot Style and choose Outline.
5. Under Hotspot, set Shape to Rectangle and drag Size until the outline fits the element.
6. Read the tooltip under Tooltip › Body and correct it if needed.

Size changes width and height together. For a wide element such as a long button, a Pointer marker in the centre can read better than a square outline.

#Fix a step with the wrong screenshot

1. Take a screenshot of the right moment in your product.
2. Select the step and click Replace image under the canvas.
3. Choose the file. Then move the hotspot onto the element again.

If a step shouldn't be there at all, hover over it in the steps list, click the ⋮ menu and choose Delete.

#Rebuild after changing the video

The clickable demo is a separate copy. Changes you make later to the narrated video's steps or script don't flow into it.

1. Open the narrated video.
2. In the top bar, click the circular arrow next to Interactive demo.

This builds a new clickable demo from the current steps. The earlier one is kept, so you can compare them and delete the one you don't need from the Library. Clicking Interactive demo itself opens the latest one.

#Next steps

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