Product tours reduce churn, accelerate activation, and cut support tickets — but most tutorials assume you're using npm, have a build pipeline, and want to deploy a Node.js server. This guide shows you how to add a fully working product tour in under 5 minutes, with nothing but a script tag.
Users who complete a guided onboarding tour activate at 3× the rate of users who don't. According to data from SaaS onboarding studies, 60–70% of churned users never reached the core value of the product — they got lost before they ever got the "aha moment."
A product tour is the bridge between "user just signed up" and "user just got value." It doesn't have to be elaborate. Even a 3-step tour pointing to the most important buttons dramatically reduces confusion and "Where do I start?" support emails.
Tooltip-based walkthrough. User clicks Next/Prev to move through your UI at their own pace. Best for feature discovery.
FlowAssist clicks through your UI automatically. Best for eliminating "Where do I click?" confusion on complex flows.
Full-screen wizard before the user enters the app. Captures goals, role, and preferences. Best for personalizing the experience.
Triggered in-app surveys. Best for capturing feedback at the exact moment of peak engagement.
For most teams, start with an Interactive Tour — it's the easiest to implement and delivers immediate value by showing users where things are.
Add the FlowAssist script to the <head> of your HTML. That's it for installation — no npm, no build step, no package.json changes.
Set window.navigateme_guides with your steps. Each step targets a CSS selector and shows a message. You can define multiple guides and FlowAssist handles the launcher UI, progress tracking, and session resuming automatically.
Deploy your app. FlowAssist automatically shows a floating launcher button. When users click it, they see a menu of available tours. Progress is saved to sessionStorage — if the user navigates away and comes back, the tour resumes where it left off.
Tip for React / Vue / Angular: Dynamic apps render elements after the initial DOM load. FlowAssist's smart selector engine handles this — it polls for elements with exponential backoff before timing out. You don't need to do anything special for single-page apps.
The real power feature is Navigate Autopilot — it automatically clicks elements in your UI, waiting for each one to appear before proceeding. This is perfect for complex multi-step flows where users don't know what to click next.
In React apps, the component lifecycle means your target elements may not exist in the DOM when the page first loads. FlowAssist handles this with its smart wait system, but you can help it by using stable, predictable selectors:
FlowAssist is fully responsive. Tooltips reposition automatically when they'd go off-screen, and the launcher adapts to touch targets. On screens under 480px, the tour UI switches to a bottom-sheet style to maximize usability. No extra configuration needed.
A product tour is one of the highest-ROI changes you can make to your app's activation rate — and it doesn't have to be complicated. Two files, a config object, and you're live. Free 14-day trial, no backend, no build pipeline changes.
Start with a 3-step interactive tour pointing to your three most important features. Ship it this week. Measure whether support ticket volume drops. If you're seeing results, expand to onboarding flows and NPS surveys — both are available in FlowAssist with the same drop-in approach.
Drop-in JS. 4 guide types. No backend. Free 14-day trial.
Start your free trial