Here's how to build your product tour/onboarding in Bubble with just 6 steps:
1. **Grab the Full Product Tour plugin:**
Add it to your Bubble app, making sure it's included in the element tree.
2. **Expose the option to add an ID attribute to HTML elements:**
Go to settings, check the "Expose the option to add an ID attribute to HTML elements" and assign an ID to the element that you want to highlight during the tour.
3. **Set up a workflow to launch on page load:**
This will trigger the tour when the user lands on the page.
4. **Craft your tour steps:**
In the Workflow view, use the "Element actions" menu and choose "Add a Step a Full Product Tour". Fill in the Step Title, Step Description and Element ID for each step to highlight a specific element during the tour.
5. **Repeat for all steps:**
Keep adding steps using the same method until your entire tour is defined.
6. **Start the tour:**
Once you've built all the steps, use "Element actions" again and select "Start Tour a Full Product Tour" to activate your creation!
Your product tour is now created and should appear when your app is started.
Use the "Full Product Tour Has Finished" event to trigger your extra logic for product tour finished.
--
Check out the demo app's editor here:
https://bubble.io/page?type=page&name=full_product_tour&id=full-group