Updated April 2025 - Read the announcement to learn more about the new product tour capabilities!
Product Tours Overview
Tours enable you to create guided experiences that help users navigate through your product across multiple pages and states. Tours are particularly useful for:
Onboarding new users to your product's key features
Guiding users through workflows that span multiple pages
Announcing and showcasing new features
Creating interactive learning experiences
Step 1: Create a New Tour
Click 'Create New Content' and select 'Tour'
Give your Tour a name (optional: add it to a section)
Grab your first Snapshot by adding the URL of where you want the Tour to begin with Candu’s Chrome Extension
Once you have your Snapshot in place, choose the placement of your first Tour Step by selecting an element within your snapshot.
Step 2: Configure Essential Tour Step Settings
Once you've placed your first Tour Step, you'll want to configure some key settings in the toolbox panel:
Tooltip Position
Auto: Automatically positions the tooltip based on screen size and available space (recommended for most cases)
Manual: Lets you expressly set the position (top, right, bottom, left)
For more tour settings, see Advanced Tour Configuration.
Step 3: Add Content to Your Tour Step
Click inside the Tour Step to modify the text
You can add new components into your tour step, like images or buttons, and use the toolbox to further style each component
By default, Candu will include a "Next" button to allow users to progress to the next step
Click on the Next button in the tour step.
You can modify the text "Next" to your preferred CTA
Configuring Tour Button Actions
You can customize what happens when users click buttons in your tour:
Select the button in your tour step
In the Interactions tab of the toolbox, look for "Action on click/tap"
Choose from several actions:
Go to Tour Step: Advance to the next step (default for Next buttons)
Dismiss Tour: End the tour completely
Open URL: Navigate to a specific URL
Callback: Trigger a custom JavaScript function
Trigger Overlay: Launch a Candu overlay
Trigger Tour / Hotspots / Change Content: Launch a different piece of Candu content
Trigger Click: Enables you to choose a selector on the snapshot that Candu will Click for the user
This flexibility allows you to create branching experiences or provide users with different options during the tour.
Step 4: Add Additional Tour Steps
You can add more steps to your tour in several ways:
Adding Steps on the Same Snapshot (Same Page)
Click "+ Add Step" in the Tour menu at the bottom of the editor
Select "On same snapshot" to add another step on the current page
Click on the element you want to target with the new step
Adding Steps on a New Snapshot (Different Page or State)
Click "+ Add Step" in the Tour menu
Select "On new snapshot" to add a step on a different page or state
Either select an existing snapshot or type in a new URL. If the next tour step happens on the same URL but in a new state (like after a modal opens), you will enter the original URL before clicking “Add New Snapshot” and opening up Candu’s Chrome extension.
Once you have your new snapshot selected, you can place your new tour step by typing in the selector or clicking the bullseye ◎ to place your tour step.
This flexibility allows you to create tours that:
Guide users across different pages
Show tooltips after page state changes (like after a menu opens)
Step 5: Configure Tour Triggering and Redirects
Unsure how to trigger your tour? Read our guide on your tour trigger options.
Tour Start Settings
You can configure when and how your tour will be triggered by clicking the 'Tour start' settings at the beginning of the floating menu at the bottom of the editor:
Triggering Options:
On Trigger: The tour starts when triggered by code or another Candu component
On Page Load: The tour starts automatically when the page loads.
Click to Trigger: Launch the tour when the user clicks a selector. You can further set if the tour triggers only once (or each time the selector is clicked), and whether Candu should block the click event.
For Page Load Triggers:
Click "Edit" next to "When will it be displayed?"
Select "On page load" from the dropdown
Configure additional options such as frequency (on every page load or until dismissed) and URL targeting rules.
Optional: Add Tour Redirect Settings
When creating multi-page tours, you can opt to configure redirect settings for each tour step:
When adding a new snapshot, you'll see the "Tour Redirect URL" option
This specifies the page users will see when navigating to this tour step from another step
If the tour step happens on the same URL but with a new state (like after a menu opens), you can sync the URL with the previous tour step to avoid a redirect
Step 6: Test Your Tour
Before publishing to all users, it's essential to test your tour.
You can use the share link to preview how your tour looks:
Click the 'Share' button in the top right
This will allow you to see snapshot states, but note that trigger clicks won't work in the share link preview (as the Share link is rendered in an iFrame)
For an end-to-end test including trigger clicks:
Publish your tour to a limited audience (for example, target the tour at just yourself)
Set up the tour to retrigger multiple times
Test the full experience as an end user would see it
This allows you to verify all interactions and transitions
When iteratively testing your tour after making changes, use the browser developer tools to perform cache-free refreshes.
Open Developer Tools "Inspector" (F12)
Navigate to the Network tab
Ensure the "Disable cache" option is checked
Perform a hard refresh (Ctrl+F5 or Cmd+Shift+R)
This method ensures you're seeing the latest version of your tour without cached data interfering with your testing.
Step 7: Publish Your Tour
When your tour is fully tested and ready to launch:
Click 'Publish'
Choose which segments should see your tour
Confirm the tour trigger rules, with or without a placement (for triggered tours)
Hit Publish
Advanced Tour Configurations
Once you're comfortable with the basics, you can explore these advanced settings to enhance your tours:
Styleguide Defaults for Tours
You can set up default styles for all your tours to maintain brand consistency:
Navigate to Styleguide in the left sidebar
Select Tours from the left menu
Configure default styles for your tour steps, including:
Border settings
Background colors
Drop shadows
Arrow size
Dismiss button styling
Pro Tip: Setting up your styleguide first saves time when creating multiple tours. Learn more in our Self-Serve Styleguide guide.
Advanced Tour Settings
Progress Settings
Save user progress through Tour: When enabled, if a user leaves the tour and returns, they'll be brought back to the step they left on
Note: For tours triggered by button clicks or other Candu content, this setting is automatically disabled, so users restart from the beginning each time
Z-index Settings
Z-index controls which elements appear in front of others on the page:
The Default is 4000, which works for most cases
Increase this value if your tour step appears behind other elements
Decrease if you need other elements to appear on top of the tour
Backdrop Options
Add a visual backdrop to focus user attention:
Toggle backdrop on/off
Set backdrop color and opacity
Adjust border color and width
If you set a tour backdrop, if the user clicks on the backdrop, the tour will be dismissed.
Tour Dismiss Settings
By default, tours can be dismissed by clicking the "X" in the top right corner or by clicking the button in the experience.
You can control whether and how users can dismiss your tour, by:
Setting the icon color and position
Enable/disable the button to dismiss the tour in the interactions tab.
Interactive Tour Features
Trigger Click Functionality
Make Candu automatically click elements on the page:
Select your tour step
In the tour menu, click the "Add Trigger click to this step" button (shown in the floating tours menu) as you add a new step.
Click on the element in your snapshot you want Candu to automatically click
This is useful for:
Opening menus or modals without requiring user action
Demonstrating specific interactions
Creating automated workflows
Wait for Click Tour Functionality
Require users to click specific elements before proceeding:
Select your tour step
In the right panel, enable "Trigger a click"
Select the element users need to click
This helps users actively engage with your product rather than passively viewing instructions.
Best Practices for Tour Design
Tour Design
Keep it concise: Limit tours to 5-7 key steps
Focus on workflows: Guide users through complete tasks
Progressive disclosure: Start simple and build complexity
Provide escape options: Always allow users to exit the tour
Technical Considerations for Tours
Test on various screen sizes: Auto positioning works differently on different screens
Verify trigger conditions: Ensure your triggers work correctly in all scenarios
Test the complete flow: Go through the entire tour from start to finish
Troubleshooting Tours
Tour steps not appearing: The most common cause is that the element selector is not visible on the page. This can happen if:
The element only exists for certain user types or states
The element's HTML structure has changed since the snapshot was taken
The element is conditionally rendered based on user data
Tour not progressing: Verify that Next buttons are configured correctly
Missing elements on new snapshots: Ensure the page fully loads before placement
Trigger clicks not working: Check if the element selector is correct and the element is accessible to be clicked