How to create a Multi‑page Product Tour on Userorbit?

Multi‑page tours help users learn flows that span multiple screens (e.g., signup → settings → first action). This guide shows how to build a tour that continues seamlessly across pages in your app.

If you’re new to tours, start with the basics here: How to create a Product Tour. This article focuses only on multi‑page flow setup.

Step 1: Create a new tour

1. Go to Product Tours and click "Create New Tour"
2. Give it a clear name (e.g., "Onboarding – First Value Flow") and description
3. Choose the first page where the tour should start

Step 2: Configure URL matching per step

Each step must know which page it belongs to. Use URL rules so the step only appears on the intended page.

• URL match types supported:
  • Exact match: https://app.yourdomain.com/dashboard
  • Contains / Path match: /settings/billing
  • Pattern: /projects/:projectId/overview
  • Query rules (optional): ?plan=premium

Tips:

• Prefer path‑based rules over fragile query parameters
• Keep patterns specific enough to avoid firing on unintended pages

Step 3: Add steps that continue across pages

Add your steps in the target order they should appear. For each step:

1. Select the step type:
   • Posts (modal): Introduce a screen or concept
   • Pointer (tooltip): Highlight a specific UI element
   • Video Pointer: Add short demos where useful
2. Set the URL rule for this step’s page
3. For pointer steps, set a reliable selector (e.g., #save-button, [data-uo="invite-btn"])
4. Write concise copy with a clear action (what/why/next)
5. Choose navigation behavior:
   • Next moves within the page
   • Continue on next page (described below)

Cross‑page navigation options

There are three supported ways to progress a tour across pages. Pick the one that matches your UX and technical setup:

1. Guide users to click in‑app navigation (recommended)

   • Use a pointer on the nav/link/button that routes to the next screen
   • Copy: explain what they should click and why
   • Configuration: keep the current step on the source page; set the next step's URL rule to the destination page so the tour resumes after navigation

2. Allow users to reach the next page later

   • Use a modal (post) to educate and let users continue whenever they naturally get to the destination page
   • Configuration: enable frequency "until completed"; set the next step with the destination URL rule—when the user eventually visits that page, the tour resumes there

3. Open the next page from the tour's Next button

   • Use a CTA on the step (e.g., "Go to Billing") that programmatically navigates to the destination URL
   • Configuration: toggle "Continue on next page"; set the next step's URL rule for the destination page so the tour resumes immediately after navigation

Step 4: Enable "Continue on next page"

For steps that require navigation to a new page (e.g., user clicks a link or button that routes elsewhere):

1. Toggle "Continue on next page" on the current step
2. In the next step, set the URL rule for the destination page
3. If using a pointer, ensure its selector exists on that destination page

How it works:

• When the user clicks Next (or a CTA you configure), the tour waits for the destination URL to match the next step’s rule, then resumes automatically
• If the user navigates manually to the correct page, the tour also resumes there

Step 5: SPA vs MPA considerations

• SPA (client‑side routing): Ensure your router updates the URL (e.g., Next.js/React Router). The tour listens for URL changes
• MPA (full reloads): The snippet must be present on every page. The tour resumes after reload when the URL matches the next step

Step 6: Timing & readiness

Use these options to avoid flicker or missing targets:

• Step delay: Add a short delay (e.g., 300–600ms) before showing a pointer
• Element readiness: Enable "Wait for element" so the step appears only after the selector is present
• Retry window: Keep retries short to avoid user frustration, but long enough for slower screens

Step 8: Test end‑to‑end

Use Preview and a test account to validate:

• Steps appear on the correct pages only
• Cross‑page transitions resume reliably (both SPA and MPA paths)
• Pointer selectors resolve correctly after navigation
• Completion triggers fire at the final step

Troubleshooting

• Step doesn’t show after navigation: Confirm the next step’s URL rule and that the app updates the URL
• Pointer fails to attach: Use a more stable selector (prefer ids or data-* attributes). Avoid index‑based selectors
• Tour appears on the wrong page: Narrow the URL pattern (avoid overly broad contains rules)
• Tour restarts from the beginning: Ensure frequency is set to "until completed" and avoid clearing local/session storage during route changes

Best Practices

1. Keep each step focused on a single action
2. Use modals (posts) to introduce a new page; pointers to drive specific clicks
3. Prefer data-uo attributes for long‑term stable selectors
4. Minimize cross‑page hops—2–3 pages is ideal for completion
5. Always provide an exit; respect user choice to skip

Go‑live checklist and common mistakes

• Ensure the Userorbit snippet is installed on all pages included in the tour
• Decide the exact flow and the pages/URLs you want to cover
• Identify stable selectors for highlighted elements (ids, data‑attributes)

Wrapping Up

Multi‑page tours help users succeed in real flows. With URL rules, element readiness, and cross‑page continuation enabled, your tour will feel seamless across screens. Iterate using analytics to improve completion and time‑to‑value.

Need more help? contact our support team or click the chat bubble below.