Unify Logo Footer.svg
Unify Applications
Logo
Controlling a Walkthrough

Controlling a Walkthrough

Logo

6 mins READ

Overview

A walkthrough never plays on its own. At runtime, you drive it with two actions wired to events:

  • Control Walkthrough — starts or stops the whole tour.

  • Control Step — moves forward or back one step within a running tour.

Both actions are available only in web app and application builders — they are not offered in the mobile builder.

Control Walkthrough Action

The Control Walkthrough action launches, ends, or coordinates timing for a guided tour on the current app.

Inputs

ParameterTypeRequiredDescription
walkthroughIdstringstartWalkthrough only (required)Which walkthrough to start. Chosen with a walkthrough picker in the builder. Ignored by every method except startWalkthrough.
methodenumoptional (optional)What to do. Defaults to startWalkthrough.

Methods

MethodWhat it does
startWalkthroughLaunches the selected tour. Stops any running walkthrough first. Requires walkthroughId.
stopWalkthroughEnds the current tour and removes all highlights and the backdrop.
ackPreStartPage signals it needs setup time before the tour starts. The tour waits up to 10s for donePreStart.
declinePreStartNo setup needed — start the tour immediately.
donePreStartPage is ready; the tour can begin. Use only after ackPreStart.
ackPreEndPage signals it needs cleanup time before the tour ends. Waits up to 10s for donePreEnd.
declinePreEndNo cleanup needed — end the tour immediately.
donePreEndCleanup done; the tour can finish. Use only after ackPreEnd.

Note: The six handshake methods (ackPreStart, declinePreStart, donePreStart, and the pre-end variants) coordinate timing between the tour and the page — for example, letting the page open a panel before a tooltip tries to anchor to an element inside it. For most tours, you only need startWalkthrough and stopWalkthrough.

Control Step Action

The Control Step action moves a running tour forward or back one step. Wire it to the Next and Back buttons inside a step's message to build step navigation.

DirectionWhat it doesEdge case
nextAdvances to the next step in the tour. If on the final step, completes the walkthrough.Advancing past the final step ends the tour and marks it completed. There is no "stay on the last step."
previousGoes back to the previous step.Does nothing when on the first step (no-op).

Warning: One more next from the final step completes the walkthrough — it does not loop or stay open. Label the final step's button Finish or Done rather than Next, so users understand that pressing it ends the tour.

Wiring Controls: Step-by-Step

Adding a Start Trigger

  1. Add a "Take the tour" button to your page: Or use an existing element — a nav item, a help icon, a page load event.

  2. Open its On Click event in the interaction panel: Select the element, go to Events, and open the On Click event (or On Load for a page load trigger).

  3. Add the Control Walkthrough action: Choose Control Walkthrough from the action picker. Set method to startWalkthrough and select the walkthrough from the walkthroughId picker.

Adding Next and Back Buttons Inside a Step

  1. Add a button in the step's message canvas: In the walkthrough builder, with the step selected, add a Button block to the step's message content area. Label it Next (or Finish for the last step).

  2. Open the button's On Click event: Select the button in the step's message canvas and open its interaction panel.

  3. Add the Control Step action: Choose Control Step and set the direction to next. For a Back button, add a second button and set direction to previous.

How a Tour Finishes

A tour finishes when the user advances past its last step. There is no "stay on the final step" — one more move forward from the end closes the walkthrough and marks the run completed. In the published app, the completion is recorded with a timestamp and a status.

Progress and Session Tracking

In the published app, each user's run of a walkthrough is tracked as a session. The session records:

  • Which step the user is currently on.

  • Which steps they have completed.

  • An overall status.

StatusMeaning
in_progressThe tour is currently running for this user.
pausedThe tour was started but is not currently displayed.
completedThe user advanced past the final step.
stoppedThe tour was ended early via stopWalkthrough.
skippedThe tour was skipped by the user.

These session records allow a tour to resume where the user left off and let you understand who has finished the tour.

Warning: Preview sessions in the builder and the builder itself run the tour visually but record nothing — no session, no completion, no resume. "Has this user seen the tour" logic only works for real end users of the published app.

Gotchas

Actions are only available in web app builders

The Control Walkthrough and Control Step actions are filtered out of the mobile app builder — they only appear for web apps and applications. If you cannot find these actions in the picker, check that you are editing a web app, not a mobile app.

Control Step does nothing without a running tour

The Control Step action only moves through a tour that is actively running. If no walkthrough is playing, firing Control Step does nothing — it will not start a tour. Always pair it with a Control Walkthrough action that starts the tour first.

Starting a tour stops any running one

startWalkthrough always ends the currently active tour before launching the selected one. Two tours never run simultaneously. If a user is mid-way through Tour A and a trigger fires to start Tour B, Tour A is cancelled and Tour B starts.

startWalkthrough without an ID does nothing

If method is startWalkthrough but no walkthroughId is set or the bound value is empty at fire time, the action logs a console error and does nothing — no tour launches, no visible error. Always verify the walkthroughId binding is populated before firing.

Example — First-visit onboarding on page load

You want to start a tour automatically the first time a user visits a page:

  1. On the page's On Load event, add a Control Walkthrough action with method: startWalkthrough and the onboarding tour's ID.

  2. Add a condition before the action: user.hasCompletedTour === false (or check a user variable/backend record). If the condition fails — the user has already completed the tour — the action is skipped.

  3. When the tour completes (user advances past the final step), fire a data-write action to mark user.hasCompletedTour = true so the tour doesn't repeat on future visits.

  • Walkthroughs Overview — what walkthroughs are and the Walkthroughs manager tab.

  • Building a Walkthrough — the builder where step buttons are added.

  • Steps & Targeting — how to configure a step's message, including adding buttons.