Tour/hint card buttons and customization

Tours and hints have built-in buttons in the footer. They can be renamed - just click on the button and edit the text.

For tours, those are:

  • Previous card - the tour returns to the previous step.
  • Skip - the remainder of the tour is skipped.
  • Next - The tour moves to the next step.

For hints:

  • Dismiss forever - Removes 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 display one of them, all of them, or neither.

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 to learn how:

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

In tours, link actions have special "and advance" versions. If you use these actions, that means 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 another 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 take.

Redirect to a URL

You also might use custom buttons for redirecting users to a URL. In case the URL has dynamic parameters, you can use the placeholder replacement feature. This requires you to pass a custom user property holding the actual dynamic part of the URL. Then use it like this: https://example.com/{{props.myDynamicValue}}/something

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