Use the clickable demo editor

Every clickable demo opens in the same editor, whether you made it from a recording or from screenshots. The steps list is on the left, the selected step is in the middle, and its settings are on the right. The toolbar above the canvas switches which settings you see.

Changes save automatically. The top bar shows Saving…, then Saved with the time.

#Reorder, add and delete steps

• Reorder: drag a step up or down in the steps list.
• Add a step: click + Add Step between any two steps. The new step is added at the end of the list with no image, so drag it into place and click Replace image under the canvas to give it a screenshot.
• Delete a step: hover over it, click the ⋮ menu and choose Delete.
• Rename a step: type in Step title at the top of the right panel.

To add several screenshots at once, use Upload › Upload Image in the toolbar.

#Place the hotspot

The hotspot is the spot viewers click to move on.

1. Select a step and click Hotspot in the toolbar.
2. Drag the hotspot on the screenshot, or click where it should go. It snaps to guides at a quarter, half and three quarters of the width and height.
3. Under Hotspot Style, choose Pointer (a pulsing marker), Callout (a dashed box with a "!" badge) or Outline (a frame around the element).
4. Under Hotspot, set the Shape (Circle or Rectangle), Size, Pulse and Color.
5. Set Action to Next step, Open URL (then enter the URL) or None.

To change the default colour, shape and pulse for the whole demo, click Personalize in the toolbar and open the Hotspots tab. Apply to all steps sets every step to the default shape.

#Write tooltips

With Hotspot selected, the Tooltip section holds:

• Title and Body: the text viewers read.
• Position: Auto, Top, Bottom, Left or Right of the hotspot.
• Style: Default, Dark or Minimal.
• Back / Next buttons: lets viewers step through from the tooltip.
• Max Width: how wide the tooltip can grow.

Click Generate with AI to have AI write the title and body from the screenshot.

#Add chapters

A chapter is a full-screen card between steps, such as an intro or a section title. It shows over a blurred copy of the next step's screenshot.

1. Click Add Chapter at the top of the steps list. The chapter is added at the end.
2. Drag it to where it belongs.
3. Edit the title and subtitle on the canvas or in the Chapter section.
4. Set Style (Light or Dark), Blur (Off, Soft or Medium) and Align.
5. Under Buttons, edit each button's label, add a link and pick Primary or Secondary. Click Add button for more.

A button with a link opens it in a new tab. A button without a link moves to the next step.

#Label and call out parts of a screen

1. Select a step and click Annotate in the toolbar.
2. Click + Text for a short label, or + Callout for a box with a title and body.
3. Edit the text, and set X and Y (percent across and down the screenshot) to place it.
4. Click the bin icon to remove one.

Annotations appear in the preview and the shared demo but not on the editor canvas, so use Preview to check where they land.

#Hide private details with blur

Use blur to hide a name, email address, balance or anything else on a screenshot that viewers shouldn't see.

1. Select the step and click Annotate in the toolbar.
2. Click + Blur. A box is added in the middle of the screenshot.
3. Set X and Y to move the centre of the box, and W and H to set its width and height. All four are percentages of the screenshot.
4. Click Preview and check that the box covers everything you want hidden. Add another + Blur for each separate area.

Blur replaces that area of the published image, so viewers can't see what was under it. When the demo saves, TurtleScene makes a copy of the screenshot with each blurred area destroyed, and the shared link, embeds and exports (video, GIF and PDF) all use that copy. The editor keeps your original, so you can move, resize or remove a blur later and the copy is made again. While the copy is being made the header shows Blurring for viewers….

If a copy can't be made, the header shows Blur failed · retry, and viewers see a placeholder instead of that screen until it works. They never get the original. Exports of the demo stop with an error rather than include it.

#Zoom, cursor and transitions

Click Animate in the toolbar.

• Zoom & Pan: tick Zoom in on this step, then set Scale and the focal point (Focal X%, Focal Y%). Focus on the hotspot centres the zoom on it.
• Cursor: Show cursor and its Speed (Slow, Normal, Fast).
• Transition: the Type (Fade, Zoom, Slide left, Slide right, None) and Duration into this step.

#Set timing and autoplay

By default viewers click through at their own pace. With autoplay on, the demo moves through the steps by itself, and viewers can still pause and click around.

1. Click Personalize in the toolbar and open the Autoplay tab.
2. Turn on Enable autoplay.
3. Set Seconds per step. This sets every step.
4. Turn on Loop demo to start again at the end.

To change one step, select it, click Timing in the toolbar and pick a value under Time on this step when the demo autoplays.

#Add a voiceover to a step

1. Select a step and click Voiceover in the toolbar.
2. Click Generate script, edit the text, then click Generate voice.
3. Or click Upload audio to use your own recording.

Remove audio takes it off the step.

#Add background music

1. Click Personalize and open the Background Music tab.
2. Turn on Background music and pick a built-in track, or click Or upload your own (MP3).
3. Set Volume. Keep it low so any voiceover stays clear.

Music starts when a viewer first interacts with the demo, because browsers block sound before that, and loops quietly until the end.

#Add an end call to action

1. Click Settings in the toolbar and open the End CTA tab.
2. Tick Show CTA at end of demo.
3. Fill in Title, Body, Button label and Button URL.
4. Click Done.

The end screen also has a Replay button. The same window holds the Lead Form and Password tabs: see Lead capture & passwords.

#Set the title, description and SEO

Click Personalize in the toolbar.

• General: Demo title, Description (shown under the title on the share page) and Status (Draft, Published, Archived).
• SEO: Meta title, Meta description, OG image URL (the preview image when the link is shared), and Hide from search engines (noindex).

Without an OG image, the share preview uses the demo's thumbnail or first screenshot.

#Preview the demo

Click Preview in the top bar. The demo opens in a new tab so you can click through it. The preview doesn't draw the hotspot markers (clicking the hotspot area still moves on) and always runs click-through, even with autoplay on. To see exactly what viewers get, open the share link. Views in the preview aren't counted in Analytics.

#Related pages

• Share & embed
• Lead capture & passwords
• Brand & player