Overlays & Modal Screens

An overlay is a step that shows a modal card on top of your demo. The captured screen stays visible behind it, dimmed. Use one to welcome viewers on the first screen, introduce a new section partway through, or collect details with a lead capture form. Overlays were previously called overlay steps, and before that, section breaks.

Converting a step to an overlay

Any step can become an overlay. In the editor, open the ⋮ menu on the step’s thumbnail and choose Convert to overlay. The step’s heading and text carry over, and a Continue button is added so viewers can move on.

To turn it back into a regular step, open the same menu and choose Convert to ripple. Only the heading and text carry over; buttons and lead capture fields are removed.

Adding an overlay to the first screen

Converting a step replaces its annotation with the overlay. To keep your first step as it is and show a welcome overlay in front of it:

1. Open the ⋮ menu on the first step’s thumbnail and choose Duplicate step. The copy appears directly after it.
2. Open the ⋮ menu on the first step again and choose Convert to overlay.
3. Edit the overlay’s heading, text, and button.

Viewers now see the overlay over your first screen. When they click Continue, they move on to the same screen with its original annotation. The same steps work anywhere in your demo, for example to introduce a new chapter.

Editing an overlay

Click the heading or text in the overlay to edit it. Use the + button next to a block to insert a button or a lead capture field, and the settings button on a block to change or delete it.

Each button has an action:

• Go to next step continues the demo.
• Redirect to url opens a link in a new tab.
• Jump to a chapter skips ahead to that chapter.

You can also choose whether a button is Primary or Secondary, for example to offer a “Book a call” button next to a lower-key “Skip” option. Every overlay needs at least one button. Make sure one of them uses Go to next step or Jump to so viewers can continue the demo.

If you’ve turned on auto-progress, an overlay advances on its own when all of its buttons use Go to next step. An overlay with a lead capture field, a Redirect to url button, or a chapter jump waits for the viewer.

To update the screen behind an overlay without re-recording, swap the screen on that step.