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
Tours with dynamic or delayed content
A new chat response, search result or saved record may appear on the same URL after a user action. A new conversation or message ID does not by itself prevent a tour from continuing. Check the live URL, the action that creates the next state, and the target element.
Make the required action advance the tour. For a step highlighting Send, enable User clicks target to progress (Step Progress). The user must submit the actual message. A Next button that only advances the tooltip does not submit the chat or fill the input.
Preserve the current page state. If the next snapshot shows a later state on the same URL, open that group's redirect settings and select Don't trigger a URL redirect. Confirm the group shows No Redirect. A captured snapshot is an authoring reference; redirecting to its URL does not recreate a response.
Use a stable target. Prefer an observed, meaningful attribute such as a stable accessible label over a generated message ID. Check that the selector identifies the intended element in the required state. If several responses contain the same button, scope it to the intended response and test with more than one message.
Test the delayed transition. Start with a fresh conversation, type a message, click Send and observe whether the next tooltip appears after the response and its target are ready. Repeat with a slower response. Do not assume an unlimited wait or add an arbitrary delay without checking actual behavior.
For example, a chat tour can guide users through typing a question, clicking Send, then using an Improve this response control that appears with the answer. Verify the published tour in the installed product, using a limited test audience and the intended route. A successful snapshot preview alone does not verify this sequence.
If automatic progression does not work reliably, test a manual instruction such as "Send your message, wait for the answer, then click Next." Only describe that fallback as working after testing it. Do not promise automatic input filling or application actions unless they are configured and verified.
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].