Overview
A walkthrough is authored in its own editor, separate from the page builder. The walkthrough builder opens onto the real page your tour will play over, with an ordered list of the tour's steps down one side and a property panel for the selected step on the other. You assemble the tour here — add and order steps, compose what each step says, point each step at part of the page, and preview the whole thing before you publish.
The Canvas
The canvas shows the actual page your walkthrough runs on, rendered live with the selected step drawn over it — the tooltip or modal, the dimmed backdrop, and the highlight around the target. It is a running preview, not a static mockup, so what you see on the canvas is what the tour looks like to a user on that page.
Because the canvas is the real page, the tooltip and modal position themselves against real blocks, and moving between steps re-draws the overlay for whichever step is selected.
Warning: Inside the builder and its preview, steps appear immediately — the "show after a delay" and "show after scrolling" settings are not applied. Steps that are configured to wait still show at once on the canvas. Test timing behavior in the live published app, not on the canvas.
The Step List
The step list is the spine of the builder: an ordered, top-to-bottom list of every step in the tour. The order in the list is the order the tour plays. Selecting a step loads it on the canvas and in the property panel.
Step Row Controls
| Control | What it does |
| Drag handle | Drag a step earlier or later in the list. The playback order updates immediately. |
| Rename | Give the step a readable name so the list stays legible as it grows. |
| Duplicate | Copy a step — including its message and settings — as the basis for the next one. |
| Delete | Remove a step from the tour. The Delete option disappears when only one step remains — a walkthrough always keeps at least one step. |
| Play | Preview the tour starting from that step, without leaving the builder. |
Adding a Step
Click Add Step to add a new step. The Add a step dialog offers ready-made tooltip and modal templates. Every step begins as a template — there is no blank step option.
When you choose a tooltip template, the builder immediately enters target-selection mode so you can click the element the tooltip will anchor to. Tooltip steps always need a target, so the builder skips you straight to picking one.
Click Add Step: The Add a step dialog opens ("Choose a template to add a new step"), with All, Tooltip and Modal filters.
Choose a template: Select a Tooltip template (anchored to an element) or a Modal template (floating over the page), then click Next. The chosen layout becomes the step's starting content.
(Tooltip) Pick a target element: The canvas enters selection mode. Hover to highlight elements; click to select one. Confirm with Save. The step is anchored to that element.
Edit the step in the property panel: The new step is selected. Configure its content and appearance in the property panel on the right. See Steps & Targeting for the full reference.
The Builder Header
The header carries tour-level controls above any single step:
Control | What it does |
|---|---|
Back | Returns to the walkthrough list for the app. |
Walkthrough name | Shown with its last-updated time. Rename the walkthrough from Edit on the Walkthroughs list. |
Active / Inactive toggle | The tour's on/off state, saved with the walkthrough. Inactive tours do not run for real users even when published. |
Screen size | Choose the resolution (desktop) or device model (tablet/mobile) to preview. The device type itself is set by the walkthrough's Screen Variant and can't be changed. |
Undo / Redo | Step back or forward through your editing history. |
Interactive canvas toggle | Switch between preview mode and interactive editing of the canvas. |
Publish | Publish the app (including this walkthrough) to the live URL. |
Header During Preview
While previewing a tour, the header changes to show tour progress — for example "Step 2 of 5" — and offers a Restart control that jumps the preview back to the first step.
The Property Panel
Selecting a step opens its property panel on the right, split into two tabs:
| Tab | What it contains |
| Content | What the step is: tooltip or modal, the target it points at, and the timing and interaction rules for when it shows and what the user may touch. |
| Appearance | How the step looks: the backdrop and spotlight, placement, and sizing. |
The panel can be collapsed to give the canvas more room.
Every field on both tabs is documented in full on the Steps & Targeting page.
The Side Nav and Walkthrough Settings
The left side nav of the builder has Data, Hierarchy, Saved Versions, Settings and Dev Tools. Under Settings, three panels decide when and to whom the tour shows:
Panel | What it controls |
|---|---|
Launch Triggers | Enable Launch Triggers starts the tour automatically when a user opens its target page. On by default for new walkthroughs. Set Display Frequency (default Only Once) sets how often the same user sees it; Display Priority is Low, Medium (default) or High. |
Target Audience | Enable Audience Segmentation, then Choose Audience Segment: All Users, New Users or Only Me. |
Activation Window | Enable Custom Scheduling to set a Start Date and End Date. Optionally tick Automatically set walkthrough as "Inactive" when the scheduled period is over. |
See Controlling a Walkthrough for how Launch Triggers and actions start a tour.
Saving Your Work
The walkthrough builder saves your work for you:
When real-time collaboration is enabled for your workspace, every edit saves automatically and there is no Save button.
Otherwise, click Save in the header. An Unsaved changes indicator shows while you have unsaved work, and the builder asks before you leave. Save and Publish appear only if you have edit and deploy permission on the app.
Each auto-save adds an entry to Saved Versions in the side nav, so you can go back to an earlier state.
Previewing the Tour
Use the Play button on any step row to start a preview of the tour from that step. The canvas enters tour mode — you can advance through the steps with the step's own Next/Back controls and see the dimmed backdrop and tooltips as users will.
To restart from the beginning, click Restart in the header.
Warning: In the builder's preview, "advance when the target is clicked" does nothing — you move between steps with the builder's controls — and "end the tour if the target is missing" is not honored (the preview shows a full backdrop instead). Test these behaviors in the live published app.
Example — Building a 3-step onboarding tour
Step 1 — Welcome modal: Choose a Modal Template. Edit the title to "Welcome to the app!" and the body to "This quick tour shows you the key features." Add a Next button wired to Control Step → Next Step.
Step 2 — Highlight the main action button: Choose a Tooltip Template. Click the primary action button on the canvas in selection mode. Edit the tooltip text to "Use this button to create a new record." Set Go to next step on click of to Element so clicking the highlighted button advances the tour. The button's own action does not run on this step.
Step 3 — Closing modal: Choose a Modal Template. Title: "You're all set!" Body: "Explore the app or revisit this tour any time." Add a Finish button wired to Control Step → Next Step (advancing past the last step completes the tour).
Activate the walkthrough and publish the app. It starts on its target page through its Launch Triggers; to also offer it on demand, wire a "Take the tour" button on the app to Control Walkthrough → Start Walkthrough.
Related Pages
Walkthroughs Overview — the Walkthroughs tab and creating a walkthrough.
Steps & Targeting — every field on the Content and Appearance tabs.
Controlling a Walkthrough — wiring actions to start, stop, and advance the tour.