Guided Tours
A guided tour walks visitors through your product one step at a time — highlighting a button, explaining a form, pointing out a feature — with a tooltip that moves through each stage in sequence. No developer work after the initial snippet. Build the entire tour from the dashboard.
What guided tours can do
Onboard new users without a developer Point out the most important parts of your interface the moment someone logs in for the first time. Each step highlights exactly the element you want them to notice.
Explain a feature people consistently miss If your analytics show visitors never click a high-value feature, a tour step on that element — "This button generates your report" — can turn passive visitors into active users.
Guide visitors through checkout or signup Walk first-time buyers or signups through a complex flow. Reduce abandonment by explaining each field or step before they get confused.
Announce a new feature in context Point directly at the new button, explain what it does, let users click it themselves. More effective than a changelog email.
Three presentation styles
Choose the style that fits your product and audience:
Spotlight
The page dims and a focused cutout highlights the target element. A tooltip card sits next to it with your title, description, and navigation buttons.
Best for: Onboarding flows, first-time user walkthroughs, any time you want the user's full attention on one element.
Journey Strip
No page dimming. A small panel appears at the bottom-right corner (like a chat widget) while the target element pulses with a glowing border. Visitors can still interact with the page.
Best for: Power-user feature tours, complex dashboards where you don't want to block the interface, step-by-step guidance for experienced users.
Coach Mark
A ripple animation highlights the target element. A small tooltip bubble appears next to it — no backdrop, minimal interruption.
Best for: Subtle hints for returning users, "did you know" tips, drawing attention to a single feature without a full walkthroughs.
How to create a tour
- Go to Actions → Guided Tours in the dashboard
- Click New tour
- Give it a name (internal — visitors don't see this)
- Choose a presentation style: Spotlight, Journey Strip, or Coach Mark
- Choose a theme: Dark or Light
- Add your steps — each step needs a target element and some content
Adding steps
For each step:
- Click Add step
- Enter a CSS selector for the target element, or click Pick to open your site and click the element directly — the selector fills in automatically
- Write a title (what this element is)
- Write a description (what the visitor should do or understand)
- Set tooltip placement (auto, top, bottom, left, right)
- Customize the button label (default: "Next")
- Optionally set a CTA URL — clicking the button navigates there instead of advancing to the next step
Steps run in order. Visitors navigate with Previous / Next / Skip buttons.
Picking elements from your site
You don't need to know CSS selectors. The element picker opens your site in a new tab and lets you click any element on the page. The selector appears in the editor automatically.
- Click Pick next to a step's selector field
- Enter your site's URL in the box that appears and click Open
- Hover over elements — they highlight as you move
- Click the element you want
- The tab closes and the selector fills in the editor
The picker captures a rich element fingerprint — not just a single CSS selector. It stores the element's text content, ARIA role, position on the page, and multiple fallback selectors. At run time a scoring algorithm finds the best match, so tours stay accurate even if your site's CSS class names change or new elements are added around the target.
Multi-page tours
A single tour can span multiple pages. Put steps that belong on /pricing on /pricing, and steps on /signup on /signup — they don't all have to be on the same URL.
When a visitor completes the steps on the first page and takes the CTA action (e.g. clicks a button that navigates to /signup), the tour automatically resumes from the correct step on the next page. A progress indicator shows the global step count across all pages (2 / 4, 3 / 4), not a per-page count.
How to set this up:
- Add steps as normal — use the picker to select elements on each page
- For the last step on page 1, set the CTA URL to the path of page 2 (e.g.
/signup) - Add the next steps — they will target elements on page 2
The tour resumes automatically when the visitor arrives on the next page within the same session.
Trigger options
Control when the tour starts:
| Trigger | When it fires |
|---|---|
| Page load | Automatically when a visitor lands on a matching URL |
| Element click | When a visitor clicks a specific button or link (e.g., "Start tour") — enter the CSS selector of that element in the trigger config |
| JS API | When your code calls window._sf.startTour('name') — set the JS API Name field in the trigger config to the name you pass to startTour |
| Workflow action | When a Workflow reaches a Start Tour action node |
Firing a tour from a Workflow
You can trigger any tour as part of a multi-step workflow — for example, fire a tour after a visitor scrolls 50% down a feature page, or after they've been idle for 30 seconds.
In the Workflow canvas, add a Start Tour action node and select the tour from the dropdown. The tour fires immediately when that node is reached. The workflow's own frequency setting controls how often this happens — the tour's page-load frequency is independent and does not interfere.
For page load triggers, set a URL pattern:
| Pattern | Matches |
|---|---|
* | Every page |
/onboarding | Exactly /onboarding |
/app/* | All pages under /app/ |
Frequency options
| Option | Use when |
|---|---|
| Once per session | Standard onboarding — show once per visit |
| Once ever | Show exactly once per visitor, ever |
| Once per day | Daily tips, feature announcements |
| Every time | Developer testing, or element-click triggered tours |
Use cases
New user onboarding
Show a Spotlight tour to every new user on their first visit to /app/dashboard. Walk through: the main navigation, the primary action button, where to find settings. Three steps, done in 30 seconds, dramatically reduces "where do I start?" support tickets.
Feature release announcement
A team ships a new Export button. Instead of a changelog or email, they create a Journey Strip tour that fires once for every existing user on their next visit to the page. The pulsing border draws the eye, the strip explains the new feature, done.
Checkout assistance
An e-commerce store adds a Coach Mark tour on the checkout page that fires on page load, once per session. Step 1 points to the promo code field ("Enter your code here — check your email"). Step 2 points to the order summary ("Review before placing"). Reduces checkout confusion without blocking the flow.
"Did you know" tips for a power feature
A SaaS product has a keyboard shortcut menu that most users never find. A Coach Mark tour on the help icon — triggered by element_click on a "Tips" button in the nav — walks through three shortcuts. Users who want it can trigger it, others never see it.
Guided signup flow
A multi-step signup form uses a Spotlight tour on page load. Each step explains a field: "Your workspace name is what your teammates will see", "Invite by email — you can skip this and add people later". Reduces form abandonment for complex signups.
Combining with A/B tests
Run an experiment to measure whether a guided tour improves a conversion metric:
- Control: No tour
- Variant A: Spotlight tour on onboarding page
Add a funnel (Funnels tab) to measure how many visitors in each variant complete onboarding. If the tour variant reaches activation at a higher rate, you have evidence to keep it.
Tips for effective tours
Keep steps short. Each step should contain one idea. If you're writing more than two sentences, split it into two steps.
Don't tour everything. Three focused steps outperform ten exhaustive ones. Pick the two or three moments that matter most.
Use Journey Strip for complex UIs. Spotlight and Coach Mark work well on simple pages. If your app has a lot going on, the non-blocking strip keeps the tour from feeling like an interruption.
The picker is more reliable than hand-written selectors. The element picker captures a fingerprint with multiple fallback signals (text, role, position). Hand-written selectors like div:nth-child(3) > button break when the layout changes; picker-captured steps do not.
Use "Once ever" for true onboarding. For first-time-only tours, set frequency to "Once ever" so returning users never see it again.