Guides

Preview and test tours

Use previews to check a tour before visitors see it, then test the published experience in a fresh browser session.

What preview mode does

When you preview a product tour, Hopscotch opens your app with a preview link and shows the selected tour in that browser tab.

Preview mode is isolated from the normal visitor experience:

  • Hopscotch shows the tour you selected for preview, even if that is not the next tour a visitor would normally see.
  • Tour preview interactions are not counted as visitor tour starts, exits, or completions in analytics.
  • After the preview finishes or is closed, Hopscotch keeps that tab in preview mode until the tab is closed. This prevents an automatic product tour from immediately starting or repeating in the same tab.

Tip

If you want to test whether a published tour starts automatically for visitors, close the preview tab first or open your app in a new tab, browser window, or incognito window.

Preview a tour

  1. Open the tour in Hopscotch.
  2. Click the preview option for the tour or draft you want to test.
  3. Choose the page where the tour should run, if Hopscotch asks for a preview URL.
  4. If the tour has a page element condition, reproduce that trigger on the page before expecting the tour to appear.
  5. Confirm that each step points to the expected element and that the copy, media, and buttons look right.

If a step points to the wrong element, update the step selector before publishing. For more detail, see My product tour is not starting.

Preview a tour with page element triggers

If the tour has a Page Element condition, preview stays hidden until that condition is met on the live page. This matches the visitor experience for element-triggered tours.

  • Draft previews and published-tour previews both wait for the configured element conditions.
  • Preview still ignores audience, frequency, and other visitor targeting. Only page element conditions are evaluated.
  • Reproduce the trigger after the preview tab opens — for example, open the modal, click the watched button, or enter the matching input value.
  • If the condition is already true when the page loads, the preview starts immediately.

If a preview never appears, the selector may not match the live page, or the trigger action has not happened yet. See Trigger product tours from page elements and My product tour is not starting.

Test the published visitor experience

After previewing, test the live behavior separately:

  1. Make sure the tour is set to active and saved.
  2. Confirm the page URL and audience rules match the visitor you are testing with.
  3. Open your app in a fresh tab or browser session that was not used for preview.
  4. Visit the page where the tour should start.

If the tour starts in a fresh tab but not in the original preview tab, the tour is working as expected. The original tab is still in preview mode.

Analytics and reporting

Previewing is meant for admins and teammates, not visitors. Tour preview starts, exits, and completions are ignored so your tour analytics stay focused on real visitor interactions.

Published tours viewed outside preview mode continue to record analytics normally.

Still have questions?

We are here to help. Don't hesitate to reach out by email any time.

Next
Launcher