Help Center
Go back to application
Help Center
Go back to application
Basics
Getting Started
Basic Setup
Pricing, Security and Billing
User Guides
Custom events overviewContent Map
Tours
How to design a TourLive debuggingSelecting and targeting elementsTour/hint card buttons and customizationConnecting ToursAI ToursDynamic URLsShare product tours by linkHow to design tours for mobile webCustom JavaScript triggersCustom buttons and JavaScript actionsTargeting elements in iframesLaunching tours on element clickAll editor tutorials for ToursTours Part 0: Introduction to our editorTours Part 1: How to target elements and build tour and hint cards Tours Part 2: Basic settings - highlighting elementsTours Part 3: How to position and size your tour cardsTours Part 4: How to create different layouts of tour cards and hintsTours Part 5: How to delay or hide tour cards, and other uncommon scenarios
Hints
Checklists
Announcements
Surveys
Life Ring Button
Feedback Widget
Knowledge Base
Customization and Targeting
Testing and Feedback
Branding and Appearance
Analytics and Integrations
Developers

Tour/hint card buttons and customization

If the built-in card buttons are not enough for you, you can place custom buttons to tour and hint cards.

Tours and hints have buttons built into the footer. They can be renamed inside the editor- simply click on the button and edit the text.

For tours, this includes:

  • Previous card - Moves the tour to the previous step.
  • Skip - Skips the remainder of the tour
  • Next - Moves the tour to the next step.

For hints, this includes:

  • Dismiss forever - Removes the hint for the current user and won't show it again
  • Close - Closes the hint card

The visibility of these buttons can be changed in the editor. You can choose to display one of them, all of them, or none. 

Custom actions

If you want to trigger a custom action, you can put a custom button into the body of the card. See the video below to learn how:

Various actions can be assigned to the button; you can start a tour, open a link, or start a Product Fruits widget. 

In tours, link actions have special "and advance" options. If you use these actions, your link will be opened and the tour will advance to the next step.

Connecting tours

One of the most used actions is Start a tour. This allows you to launch a different tour - either from a tour or a hint.

This can be helpful to split tours into smaller ones or to create a hint with an optional tour that users can choose to take.

Redirect to a URL

You also might use custom buttons for redirecting users to a URL. If a URL has dynamic parameters, you can use the placeholder replacement feature. This requires you to pass a custom user property holding the dynamic section of the URL. It can be used like this: https://example.com/{{props.myDynamicValue}}/something. 

If the URL should redirect to the same domain the user is currently in, you can omit it and start with a /. That would mean  /something/on-the-same/domain redirects the user to this path, but the domain name where the URL was clicked will be retained. 

Schedule

Schedule a tour to be displayed in the future, specifying a particular date and time range using the scheduling option. You can select the user's timezone or choose from any timezone in the world. There is also a quick preset option available for timeframes like the next 7 days, 30 days, 90 days, or 365 days. If no timezone is selected, the tour will display immediately and remain visible indefinitely.

Was this article helpful?

Powered by Product Fruits