Hotspots and steps

Each screenshot in a demo is a step. Hotspots and blurs sit on top of a step. You build both in the editor, and your changes save as you go. The top bar shows "Unsaved changes", "Saving…" or "Saved".

Draw a hotspot

Pick the Hotspot tool above the screenshot (or press H), then drag over the area people should click. A single click drops a circle instead of a rectangle. Pick the Select tool (V) to move, resize or select a shape you have already drawn.

With a hotspot selected, the Step tab on the right shows its settings.

Tooltip text is what viewers read next to the hotspot, up to 500 characters. Say what to do here, such as "Click New project to begin". Tooltip position can be Auto, Top, Bottom, Left or Right. Auto picks the side with room.

The Pulse switch adds a pulsing ring around the hotspot so people notice it.

Choose what a click does

The Action setting decides where the viewer goes after clicking the hotspot:

Next step moves to the following screenshot.
Go to step jumps to a step you pick under Target step. This is how you branch or loop back.
Open a link opens a web address. Enter a full address starting with http:// or https://, and use Open in new tab to choose whether it replaces the demo or opens beside it.
End the demo finishes the demo. Viewers see the outro screen if you switched one on under Intro & outro in the Demo tab, and otherwise stay on the last step.

Give a step a title

With nothing selected on the canvas, the Step tab shows Step title. Titles are optional. They appear in your step list and in the analytics funnel, which falls back to the step number when a step has no title.

Reorder, duplicate and delete steps

Drag a step up or down in the list on the left to reorder it. Hotspots that jump to a step keep pointing at the same step after you move it.
Open the menu on a step and choose Duplicate to copy it, hotspots included. A step with edits that have not saved yet cannot be duplicated until they save.
Choose Delete in the same menu to remove a step with its hotspots and blurs. You are asked to confirm.

If another hotspot was set to Go to step for a step you delete, that hotspot switches to Next step. Check your Go to step hotspots after deleting.

Blur sensitive details

Pick the Blur tool (B) and drag over anything you do not want viewers to see, such as an email address, a customer name or a token. The area is blurred in the published demo. Select a blur to see its position and size, drag it to move or resize it, or choose Delete blur to remove it.

Preview before you publish

Choose Preview in the top bar to click through the demo as a viewer would, including edits that have not been published yet. Nothing is live until you choose Publish. See Share and embed.