Simple product tours
Video tutorial
The below video tutorial demonstrates how to create a simple product tour:
Instructions
Add the 'ProductTour' element to the page of your Bubble app where you're running the tour
Please note that you must keep the 'This element is visible on page load' option ticked. Don't worry though, even with this option ticked, the element will not actually show up on your users screen.
Add an ID attribute to the elements you want to highlight during the product tour. In this example I've added the ID attribute 'step1' to a repeating group I want to highlight
Add a workflow for 'When page is loaded'
Add a 'Add a step in Product Tour' action to this workflow and add the ID Attribute you put on the element you're highlighting in the 'Element ID' field
Repeat this for each step in your tour (in the example below I'm adding 4 steps to the tour)
After you've added all the steps you require, add a 'Start ProductTour' action to the end of your workflow
Now when the page is loaded, the plugin will 1) add the steps to the tour and 2) start the tour.
If you want to add an introductory step that isn't attached to any specific element, you can simply add a step to the start of the tour and not add any Element ID
You'll then get a step that appears in the middle of the screen and isn't attached to any 1 element:
Demo app
You can view a demo app with a simple tour at the below link:
The editor is public and can be accessed by clicking on the 'editor' button in the sidebar nav.
Last updated