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:

Bubble - Visual ProgrammingBubble

The editor is public and can be accessed by clicking on the 'editor' button in the sidebar nav.