Single-page tours work great for introducing features on one screen. But when your workflow spans multiple pages, you'll need multi-page tours.
Use multi-page tours when:
Onboarding requires visiting several pages (account setup, profile completion, first task)
Key workflows span different sections of your app (create project → add team → configure settings)
You're announcing features that live in multiple places
Users need to see how different pages connect together
Multi-page tours follow users as they navigate, showing the right tooltip on the right page at the right time.
Understanding Pages vs. States
Multi-page tours handle two types of transitions:
Different Pages
URL changes:
https://app.example.com/dashboard→https://app.example.com/projectsRequires redirects to move users between pages
Each page needs its own snapshot
Different States (same page)
URL stays the same, but something on the page changes
Examples: Closed menu → Open menu, Empty form → Filled form, Hidden modal → Visible modal
No redirect needed, just a new snapshot of the changed state
Adding Steps on New Pages
When your tour needs to move to a different page:
Click + Add Step in the Tour menu at the bottom
Select On new snapshot
Choose how to add the snapshot:
Select existing snapshot: Choose from snapshots you've already captured
Add new snapshot: Type the URL of the page you want to capture
If adding a new snapshot:
Enter the full URL (e.g.,
https://app.example.com/projects)Click Add New Snapshot
Click the element where you want the tooltip to appear
Adding Steps for State Changes
When something on the page changes but the URL stays the same, for example: you want a tour step to appear after a user opens a dropdown menu. Follow these steps:
Click + Add Step in the Tour menu
Select On new snapshot
Enter the same URL as the previous step
Click Add New Snapshot
Capture the page in the changed state (with the menu open)
Place your tour step on the changed state
Note: Some elements have different selectors depending on their state. For example, a button might have one selector when inactive and a different selector when active or selected. If you're targeting an element that changes selectors based on state (like active vs. inactive), our snapshot will be able to capture it. If not, you can define a selector manually.
Configuring Redirect Settings
When users move between tour steps on different pages, Candu needs to know where to send them.
Setting Up Redirects:
Click the flag icon next to your tour step in the tour menu
Click edit in the Tour Redirect URL section
Enter the URL users should navigate to when reaching this step
Example: If Step 2 is on the Projects page, set the redirect URL to https://app.example.com/projects
You can personalize redirect URLs for each user by incorporating variables from user properties. Learn more in our URL Templating guide.
Skip Redirects:
If you're showing a different state but staying on the same page (like after opening a menu or modal, expanding/collapsing sections, etc.), you don't want to reload the page. To skip the redirect:
Click the flag icon next to your tour step
Check "Don't trigger a URL redirect"
The tour will show the new step without changing the page
Testing Multi-Page Tours
Multi-page tours require more thorough testing than single-page tours.
Publish the tour to a test segment (target just yourself)
Set frequency to "On every page load" for retesting
Start the tour from Step 1 and click through every step
Verify:
Redirects send you to the correct pages
Tooltips appear on each page
State changes work smoothly
Button interactions work as expected
The tour completes successfully
Next Steps
Now that you understand multi-page tours:
Explore Advanced Tour Settings to learn about z-index, backdrop, progress saving, and trigger click functionality
Check Tour Analytics to understand where users engage and drop off
Need help? Reach out via chat or email us at [email protected].