> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/a+-product-onboarding-tour/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/a+-product-onboarding-tour/creating-a-product-tour/simple-product-tours.md).

# Simple product tours

### Video tutorial

The below video tutorial demonstrates how to create a simple product tour:

{% embed url="<https://www.youtube.com/watch?v=CfML_PSC9Gc>" %}

### Instructions

* Add the 'ProductTour' element to the page of your Bubble app where you're running the tour

<figure><img src="/files/DApVCPHnH9pxMB0eKO1X" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/19nNwEQCPX5QwxtPHLQg" alt=""><figcaption></figcaption></figure>

* 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&#x20;

<div align="left"><figure><img src="/files/6pVqN09FwhTK2r2oa5kt" alt="" width="375"><figcaption></figcaption></figure></div>

* Repeat this for each step in your tour (in the example below I'm adding 4 steps to the tour)

<div align="left"><figure><img src="/files/BBl2qcTkXObkoqgEXei2" alt="" width="563"><figcaption></figcaption></figure></div>

* After you've added all the steps you require, add a 'Start ProductTour' action to the end of your workflow

<div align="left"><figure><img src="/files/mLhFkm0VnR5MSs3vZrfW" alt="" width="563"><figcaption></figcaption></figure></div>

Now when the page is loaded, the plugin will 1) add the steps to the tour and 2) start the tour.

<figure><img src="/files/dfBCCL74o3Nr9ubrfXxI" alt=""><figcaption></figcaption></figure>

* 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

<div align="left"><figure><img src="/files/YEDyyBUnC4WXyMZfWXd1" alt="" width="563"><figcaption></figcaption></figure></div>

* You'll then get a step that appears in the middle of the screen and isn't attached to any 1 element:

<figure><img src="/files/1JBRkjpAoVUV2xWslJv5" alt=""><figcaption></figcaption></figure>

### Demo app

You can view a demo app with a simple tour at the below link:

{% embed url="<https://product-demo-tour.bubbleapps.io/>" %}

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