Step types
Choose the right step type, add it, point it at the right part of the screen, and change many steps at once.
Steps are what a viewer reads and clicks as your tour plays. Picking the right type for each moment keeps the tour moving: a tooltip where the eye should land, a centered card for an opening or a close, a hotspot that jumps to the part the buyer cares about.
You're in the right place when you're deciding what kind of step to add, or you want a tour that branches instead of running in a straight line.
Which step type should you use?
| Type | What the viewer sees | Use it for |
|---|---|---|
| Guide | A tooltip attached to part of the screen. | Pointing at the feature you're talking about. Most steps are guides. |
| Lightbox | A card in the middle of the screen, with nothing to point at. | An opening welcome, a chapter summary, or a closing ask. |
| Link | A tooltip that jumps somewhere when its element is clicked or hovered, or a hotspot with no tooltip at all. | Branching: letting the viewer pick a path, skip ahead, or open a page on your site. |
| Group | Several tooltips on one screen at the same time. | Labelling a busy screen all at once, such as the parts of a dashboard. |
Chapter slides, such as title cards and section breaks, aren't steps. They're screens of their own. See Chapter slides.
A guide is a tooltip anchored to one element on the screen. The viewer reads it, then selects its button or the element itself to move on.
Use a guide when there's something specific to look at. Keep the title short (it holds 50 characters) and put the detail in the description.
What only a guide can do:
- When the anchored element is clicked: Continue moves the tour on when the viewer clicks the element itself, the way they'd click it in your product. Do nothing leaves the element inert.
- Show on hover: keeps the tooltip hidden until the viewer points at the element.
- Scroll element into view: scrolls the screen so the element is visible before the tooltip shows.
A guide can also dim the rest of the screen, mark the element with a Beacon, and move the camera. See Step settings.
How do you add a step?
There are three ways in:
| From | What you get |
|---|---|
| Add step on the canvas toolbar | Guide, Lightbox or Link, added to the selected screen. |
| + Add step under a screen in the storyboard | The same three, plus Group. Adds to that screen. |
| The toolbar that floats over a clicked element (HTML screens) | Guide or Link, already attached to the element you clicked. |
Pick the screen and type
Select the screen in the storyboard, then choose Add step and a type. On a video screen, move the timeline to the right moment first: the step is pinned to the time the playhead sits at, and the menu heading shows it, such as "Adds to Setup at 0:42".
Point it at the screen
A guide or link needs an anchor. The right panel tells you what to do:
- On an HTML screen it says Click an element on the screen. Click the button, heading or field the step belongs to.
- On an image or video screen it says Draw your element on the screen. Click and drag a box around the area.
A lightbox skips this: its form opens straight away.
Fill in the form
Write the title and description, set the buttons, and change any style or behavior you need. See Step settings for every option.
Save it
Select Add guide, Add lightbox or Add link. The step appears under its screen in the storyboard. Cancel throws the new step away.
How do you move a step to a different element?
Open the step, then select Reselect element at the top of its form. The anchor is cleared, and you click or draw a new one. Everything else on the step stays.
On a video screen, the step's time moves too: with the step open, scrub the timeline and the step follows the playhead. See Video screens.
How do you build a tour that branches?
Branching uses links and buttons together. A common pattern:
- Add a lightbox that asks what the viewer cares about, with a short line for each option.
- On the next screen, add one Link per path. Point each at a button or menu item and set Link type to Screen or Step, so each one jumps to the start of its part of the tour.
- At the end of each path, add a Link with Link type set to Screen, pointing back to the menu screen or to where the main story picks up. Without it, the viewer carries on into the next path in storyboard order.
Buttons can steer as well. Button 1 and Button 2 can each be set to Next, Back, Restart or Expand checklist, and Button 2 can also be a Link to a URL. Expand checklist opens the hub's checklist so the viewer can pick their next tour; it does nothing when the tour plays outside a hub page. See Checklists.
How do you make a group?
Create the group
Under the screen in the storyboard, select + Add step, then Group. Give it a Title, such as "Dashboard tour", then select Create group.
Add its tooltips
Open the group again from the storyboard. Under Sub-guides, select + Add step and choose Guide or Link. Point it at its element, fill it in and save. The form returns to the group, ready for the next one.
Check them together
Select Show preview to see every tooltip in the group on the canvas at once, and Hide preview to clear them. Select a tooltip in the list to edit it, or hover it and select Delete step to remove it.
Tip: turn on Show on hover for each tooltip in a group to make a screen the viewer explores by pointing, with nothing showing until they do.
How do you change several steps at once?
In the storyboard header, select Select all, or hover step rows and tick the ones you want. Shift-click a second box to add every step between the two. Then open the ⋯ menu, which reads "Update N selected steps":
| Option | Choices | What it sets |
|---|---|---|
| Beacon | Off, Pulse, Highlight, Both | The pulsing dot or ring that draws the eye to each step's element. |
| Backdrop | Off, Spotlight, Blur | Spotlight dims everything around the step. Blur blurs it instead. |
| Back & Next | Show, Hide | Whether each step shows its navigation buttons. |
Clear selection at the bottom of the menu unticks everything.
Blur is only available here. A single step's form offers Dim background, which is the spotlight style, so use the bulk menu when you want a blurred backdrop, even for one step.
Test it
Your steps work when:
- You select Preview and each guide and link points at the right part of the screen.
- Each link takes you where you set it: the right screen, the right step, or the right page in the tab you chose.
- A group shows all its tooltips together.
- After a bulk change, opening one of the selected steps shows the new setting in its form.
Troubleshooting
| Issue | What to check |
|---|---|
| Add step is greyed out | Select a product screen. Steps can't go on slides, and only one step form can be open at a time. |
| Group isn't in the menu | Groups are added from + Add step in the storyboard, not from the canvas toolbar. |
| Sub-guides doesn't appear on a new group | Select Create group first, then open the group again. Tooltips go in after the group exists. |
| A link to a step shows an empty Step list | Pick the Screen first. The list only shows steps on that screen. |
| A step points at the wrong element after Replace capture | Open the step and select Reselect element. |
| Steps on a video screen play in a different order from the storyboard | On video screens, steps play in the order of their times on the timeline. Move a step's time to change its place. |
| Expand checklist does nothing | It only works when the tour plays on a hub page that has a checklist. |
FAQ
Can I change a step's type after I've made it?
No. Add a new step of the type you want, copy the words across, and delete the old one.
Can I click an element on an image screen instead of drawing?
No. Image and video screens are pictures, so there's nothing to click. Draw a box around the area. Capture as HTML when you want steps attached to real elements.
Can a link open a page in a new tab?
Yes. Set Link type to External URL and Open in to New tab. For a button, set Button 2 to Link and tick Open in new tab.
Do viewers see anything for a link with no tooltip?
The viewer sees your product screen as captured. The linked area works when they click or hover it, and your other steps can point it out.
Can a lightbox go inside a group?
No. Groups hold guides and links only.
Does a step have to have a button?
No. Pick No buttons (or No tooltip for a link). The viewer then moves on by clicking the element, or the step can advance on its own with Auto-advance.