# Simple product tours ### Video tutorial The below video tutorial demonstrates how to create a simple product tour: {% embed url="" %} ### 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: {% embed url="" %} The editor is public and can be accessed by clicking on the 'editor' button in the sidebar nav.