The difference between users who stick around and users who churn often comes down to one thing: did they experience value quickly? Product tours help you guide users through their "aha moment" by showing them exactly how to get things done.
This article is about product tours. For overlays, hotspots, or inline, see:
What are Product Tours?
Product tours are multi-step guided experiences that walk users through your product. Think of them as a helpful colleague looking over someone's shoulder, pointing out exactly what to do next.
Unlike static tooltips or announcements, tours move with your users, appearing on specific elements at the right moment as they navigate through your product. Tours can span multiple pages and even require users to interact with features before moving forward.
When to use product tours
Tours create active learning experiences. If your product or feature doesn't require step-by-step guidance, consider an overlay or hotspots instead. Some example use cases:
Onboarding new users with a multi-page tour that walks them through creating their first project.
Helping users adopt a new feature, like new search filters, with a 3-step tour triggered from the search bar.
Workflow guidance on a new approval process where new users are guided through submission, review, and approval.
In this guide, we’ll walk through creating product tours, triggering, previewing, and publishing them.
Create a Product Tour
To get started, navigate to Content on the left sidebar.
Click Create New Content
Select Product Tour as your content type
Name your tour (Tip: use descriptive names like "Dashboard tour" or "New feature highlights")
Add it to a content section / category to keep things organized
Select an audience segment (or you can skip and refine targeting later)
Want to see it in action?
Watch this short demo to see how to create product tours in Candu.
Place your first tour step
Take a snapshot. Decide where the tour step will appear in your product by grabbing a snapshot. This lets you place it precisely and preview it in context.
Select your element. Hover over the snapshot to find the element you want to highlight, then click to save the selector.
Click on Start Editing Content to save.
📌 Note: You can also manually add a selector at this point if needed! Click here to learn how.
Add more tour steps
Adding steps on the same page (same Snapshot):
Click + Add Step in the Tour menu at the bottom
Select On same snapshot
Click the element where you want the next tooltip
Adding steps on a different page (new Snapshot):
Click + Add Step in the Tour menu
Select On new snapshot
Either:
Select an existing snapshot from the dropdown
Type a new URL and click Add New Snapshot
To learn more about creating multi-page tours, see our article on multi-page tours.
Navigating tour steps:
Your active step (the one you're editing) appears turquoise in the menu
Switch between steps by clicking them in the menu, clicking tooltips in the canvas, or using the Layers tab
Click the flag icon to see Redirect URL settings (for multi-page tours)
Use the three dots menu to duplicate, delete, or reorder steps
Style the tooltip
Your tour steps come with a default style, but you can fully customize them, or save time by creating a reusable style in your Styleguide. Saved styles keep your product tours consistent for future content.
In the right-hand Toolbox, you can:
Rename your tour step (Tip: You'll see these names in your performance data, so make them meaningful)
Set tooltip position and arrow size
Add a backdrop
Customize colors and fonts to match your brand
Edit spacing, shadows, and borders for fine-tuned styling
Use the left-hand Palette to build your tooltip content. Drag in any component such as layouts, text blocks, buttons, images, videos, or links to design your tooltip.
Product tour interactions
When building your product tours, you can add CTAs with different interactions. Interactions are tracked as user events. By default, the Next button advances to the next step. You can change this:
Select the button
Go to the Interactions tab in the toolbox
Choose a different action:
Go to Tour Step: Move to back or to next step
Dismiss Tour: End the tour
Open URL: Opens a link in the same or a new tab. Great to redirect users to external resources.
Callback: Let Candu content trigger actions in your app. More details here.
Trigger Overlay: Opens a Candu modal. Useful for layered experiences such as opening a detailed modal with a video.
Trigger Tour: Launches another Candu product tour.
Trigger Hotspot: Triggers a hotspot or hotspot group.
Change Content: Swaps current content with different Candu content.
Send Email
Trigger Click: Clicks an element on the page
Tour Start Settings & Triggers
Tours can start in several ways. Choose based on when you want users to see the tour:
Option 1: Trigger automatically on page load
Click Tour Start settings in the floating menu
Select "On page load"
Choose frequency:
Until dismissed: Shows once until user dismisses
On every page load: Shows every time (useful for testing)
Option 2: Triggered on element click
Click Tour Start settings in the floating menu
Select "Click to Trigger"
Target your clickable element:
Use the selector tool to click elements and automatically grab their selectors
Configure additional options:
Only trigger once: Shows the content just once per user, even if they revisit the page.
Block default event: Prevents the original click action when using click triggers (for example, stops a link from redirecting if your content is triggered by clicking a link).
Note: When using click triggers, you can target elements using:
Element IDs
CSS classes
Custom attributes
Complex selectors
Common selector examples:
[target='_about']
.sc-hZSUBg
#tooltipRoot
Option 3: Triggered by another piece of Candu content
When you want another piece of Candu content (like a modal or banner) to reveal the tour:
Set your tour to trigger mode (check "Trigger this content via another piece of Candu content")
Publish your product tour
In another piece of Candu content, select the call-to-action (button/link)
Add the Trigger Tour action
Select your published tour from the dropdown
Note: This only works for tours starting on the same page as the trigger. For tours that start on different pages, use URL parameters or programmatic triggers.
Option 4: Triggered via code or events (programmatic triggers)
When you want to reveal the tour based on specific events in your product:
Set your tour to trigger mode (check "Trigger this content via code")
Publish your product tour
Once the tour is published, check out our developer docs.
Important: Once content has been published to the CDN, it can be called programmatically via JavaScript even if you later unpublish or archive it from the Candu editor. JavaScript-triggered tours bypass the publishing state and will continue to be accessible.
Preview and Publish
You can preview and test your tour experience by using the share link or publishing to a test segment.
Publishing your Product Tour
When you're ready to go live, click Publish. In the launch modal, you can confirm:
Segments:
You should have defined your audience by creating a segment. To double check your segment conditions, go to the honeycomb icon on the top section of the editor.
URL Rules:
Confirm the URL matches the right environment (e.g., prod, staging) and the page you're targeting.
And that's it! Content can take up to five minutes to appear. During this time, try doing a hard refresh (Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac) to ensure you're not seeing cached content.
If you still do not see it after five minutes, see the troubleshooting guide.
Next Steps
Now that you've created your first tour:
Learn about Multi-Page Product Tours to create experiences that span multiple pages
Explore Advanced Tour Settings like backdrop, z-index, and progress saving
Check out Tour Analytics to understand user engagement and drop-off rates
Need more help? Reach out to us via chat or email us at [email protected].