Step settings
Every option on the step form, section by section, with which ones apply to guides, lightboxes and links.
The step form is where a step gets its words, its buttons and its behavior. Most steps only need the first two sections. The rest are there when you want a step to zoom in on the product, speak its line aloud, advance by itself, or count as the end of the tour.
You're in the right place when you've opened a step and want to know what a setting does, or where to find one.
Where is the step form?
Open a step by selecting it in the storyboard, or add a new one. The form opens in the right panel. Its heading says what you're doing, such as New step, Edit step, Edit lightbox or Edit link.
The form is split into numbered sections. Each has Hide and Show on its right to fold it away. Camera starts folded unless the step already has a camera move.
At the bottom:
| Button | What it does |
|---|---|
| Add guide, Add lightbox, Add link | Saves a new step and closes the form. |
| Save changes | Saves an existing step and closes the form. |
| Cancel | Closes the form. On a new step, the step is thrown away. On an existing step, it goes back to how it was when you opened it. |
Existing steps also save by themselves about a second after you stop changing them, and the top bar shows Draft saved. Narration is the exception: it waits for Save changes, because each change makes a new recording.
Which settings apply to each step type?
| Setting | Guide | Lightbox | Link with tooltip | Link, No tooltip |
|---|---|---|---|---|
| Template, Title, Description | Yes | Yes | Yes | Template only |
| Buttons | Yes | Yes | Yes | No |
| Anchor & position | Yes | No, uses Position sliders | Yes | No |
| Camera | Yes | Yes | No | No |
| Dim background | Yes | Yes | No | No |
| Beacon | Yes | No | Yes | No |
| Glow on element | Yes | No | Yes | No |
| When the anchored element is clicked | Yes | No | No | No |
| Confetti | No | Yes | No | No |
| Auto-advance, Voiceover | Yes | Yes | Yes | No |
| Hide Back & Next, Custom width, Completion step, Reset scroll | Yes | Yes | Yes | No |
| Show on hover, Scroll element into view | Yes | No | No | No |
| Loop video segment (video screens) | Yes | Yes | Yes | No |
| Link trigger | No | No | Yes | Yes |
Guides and links inside a group hide Camera, Dim background and Behavior, because those belong to the group as a whole. See Step types.
What does each section do?
| Setting | What it does |
|---|---|
| Template | Sets which buttons the step has. See the list below. |
| Title | The heading on the step. Up to 50 characters. |
| Description | The body text, with basic formatting. Say what the viewer is looking at and why it matters to them. |
Templates for a guide:
| Template | Buttons |
|---|---|
| Single button | One button, set by Button 1. |
| Two buttons | Button 1 and Button 2. |
| Button + Link | A button plus a second one shown as a plain text link. |
| No buttons | No buttons. The viewer moves on by clicking the element, or the step advances by itself. |
A lightbox has the same four. A lightbox made before these were simplified may show Two link buttons (legacy) or Single link button (legacy); it still plays, and picking any other template replaces it. A link has the first three plus No tooltip, which turns it into a hotspot with no text at all.
Hidden when the template has no buttons.
| Setting | What it does |
|---|---|
| Button 1 | The button's label. Defaults to "Next". |
| Action (Button 1) | Next, Back, Restart or Expand checklist. |
| Button 2 | The second button's label, shown on templates with two buttons. Defaults to "Back". |
| Action (Button 2) | The same four, plus Link. |
| Navigate to URL | Shown when Button 2's action is Link. The page it opens. |
| Open in new tab | Shown with Navigate to URL. On by default. |
What each action does:
| Action | What happens |
|---|---|
| Next | Goes to the next step. |
| Back | Goes to the previous step. |
| Restart | Starts the tour again from the first step. |
| Expand checklist | Opens the hub's checklist. Works only when the tour plays on a hub page with a checklist. See Checklists. |
| Link | Opens the URL in Navigate to URL. |
| Setting | What it does |
|---|---|
| Tooltip position | Four dots around a box: top, left, right or bottom. Picks which side of the element the tooltip sits on. Left is the default. |
| Arrow to element | Draws a small arrow from the tooltip to the element. On by default. |
To attach the step to a different element, use Reselect element at the top of the form.
| Setting | What it does |
|---|---|
| Vertical | Moves the card up or down, from 0% (top) to 100% (bottom). 50% is the middle. |
| Horizontal | Moves the card left or right, from 0% to 100%. 50% is the middle. |
The camera zooms or pans the screen while the step shows, so the viewer sees the detail you mean. Guides and lightboxes have it; links don't.
| Setting | What it does |
|---|---|
| None, Zoom, Pan | Zoom fills the screen with the area you frame. Pan is a gentler lean toward it. None keeps the whole screen in view. |
| Viewfinder | A small grid beside Framing. Tap a cell to aim at that part of the screen. Drag inside it to place the frame exactly. With it focused, the arrow keys nudge the frame. |
| Framing | S, M or L. How much of the screen the frame covers: small is a tight close-up, large keeps more context. |
| Focal box | A box drawn over the canvas once you pick Zoom or Pan. Drag it to move the frame, and drag its corners to resize it. |
| Play the move | Runs the camera move on the canvas and eases back, so you can judge it. It also plays by itself after you tap the viewfinder. |
A step with a camera move shows a small camera badge in the storyboard. On video screens the move also appears on the timeline's camera lane. See Video screens.
| Setting | What it does |
|---|---|
| Dim background | Darkens everything except the step's element, or the lightbox card. For a blurred background instead, use the bulk Backdrop → Blur option in the storyboard. |
| Beacon | Draws the eye to the element. Pick Pulse, Highlight or Both. Pulse adds a pulsing dot beside it. Click the element on the canvas to move the dot. Highlight draws a ring around the element. Both does both. Guides and links only. |
| Glow on element | A soft glow around the element. Hidden while Beacon is set to Highlight or Both, since those already draw a ring. |
| When the anchored element is clicked | Continue moves the tour on when the viewer clicks the element. Do nothing ignores the click. Guides only. |
| Confetti | A burst of confetti when the card appears. Lightboxes only. |
The colors of the beacon and glow come from your style guide. See Style guides.
| Setting | What it does |
|---|---|
| Auto-advance | Moves to the next step by itself. Set the Delay from 1 to 30 seconds. The default is 2. |
| Voiceover | Reads a line aloud when the step shows. Type it in Narration, up to 500 characters. Select the play button beside Narration to hear it before you save. |
The recording is made when you select Save changes, not as you type. For narrating the whole tour with one of your voice profiles, see AI voiceover in Tour settings.
| Setting | What it does |
|---|---|
| Hide Back & Next | Hides the navigation buttons on this step. |
| Custom width | Sets the step's width with a slider from 220 to 720 pixels. Turning it on starts at 340. Turn it off to go back to the style guide's width. |
| Show on hover | Keeps the step hidden until the viewer hovers the element. Guides only. |
| Completion step | Reaching this step counts the tour as completed in Insights. Use it on the last step that matters, before any optional extras. See Tour analytics. |
| Reset scroll | Scrolls the screen back to the top when the step shows. |
| Scroll element into view | Scrolls the screen so the element is visible before the step shows. On by default. Guides only. |
| Loop video segment | On video screens only. Replays a stretch of the video while the step waits for the viewer. |
Loop video segment has its own options:
| Option | What it does |
|---|---|
| Loop boundary | At next step loops from this step's time to the next step's time. Custom time lets you set where the loop ends. |
| Custom end time (seconds) | The end of the loop, in seconds, such as 5.5. |
| Set on timeline | Lets you pick the end by scrubbing the timeline instead of typing. Select Confirm when the frame is right. |
| Setting | What it does |
|---|---|
| Trigger event | Click or Hover. |
| Hover delay (seconds) | Shown for Hover. How long the viewer must hover before the link fires, from 0 to 50. |
| Link type | External URL, Screen or Step. |
| URL and Open in | For External URL. Open in is Same tab (the default) or New tab. |
| Screen | For Screen and Step. The screen to jump to. |
| Step | For Step. The step on that screen to jump to. Pick the screen first. |
How do you set up a step that zooms in?
Open the step
Select a guide or lightbox in the storyboard. Open the Camera section with Show if it's folded.
Pick the move
Select Zoom for a close-up, or Pan for a lighter lean-in. A frame appears on the canvas and in the viewfinder.
Frame it
Tap the viewfinder cell nearest your subject, then choose S, M or L under Framing. For a precise frame, drag the box on the canvas and pull its corners.
Check it
Select Play the move. When it looks right, select Save changes.
Test it
Your step settings work when:
- You select Preview and the step shows its title, description and buttons as you set them.
- Each button does what its action says.
- A step with Auto-advance moves on after its delay, and a step with Voiceover reads its line.
- A step with Completion step on is reached in a test play, and the play shows as completed in the tour's insights.
Troubleshooting
| Issue | What to check |
|---|---|
| Publish fails with "has no text" | A guide on the named screen has no title or description, or a group has no tooltips inside it. Add words or delete the step. Lightboxes and links aren't held to this check. |
| The play button beside Narration is missing | Type some narration first. The button appears once there's text. |
| A narration change didn't stick | Narration saves only with Save changes. |
| Glow on element has disappeared | Beacon is set to Highlight or Both, which already draws a ring. |
| Camera isn't on the form | Links and tooltips inside a group have no camera. Use a guide, or put the move on the group's screen another way. |
| Show on hover is missing | It's for guides only. |
| Loop video segment is missing | It only appears on video screens. |
FAQ
How long can a step's title be?
50 characters. Put longer text in Description.
Can I give one step a blurred background?
Yes, through the storyboard. Tick the step, open the ⋯ menu and choose Backdrop → Blur. The step form itself only offers Dim background.
Where do the colors and fonts of a step come from?
From the tour's style guide, set in the tour's Settings. Custom width is the only look-and-feel setting on the step itself. See Style guides.
What voice reads a step's narration?
Step voiceover uses ShowPilot's standard tour voice, tuned by the tour's Voice profile: its speed, loudness, expressiveness and pronunciations apply to every step, in the Preview button and in the saved recording. Pick the profile under AI voiceover in the tour's settings; without one, your workspace's Default profile applies. See Tour settings.
Which step should be the completion step?
The step that shows the viewer has seen what matters, usually your last product step or the closing lightbox. Viewers who reach it count as completed, even if they skip anything after it.