Bubble Tour allows you to create interactive step-by-step onboarding tours for your app. Follow these steps to set up and use the plugin effectively.


Since Bubble Tour requires element IDs to attach tooltips, you must enable the option to set an ID attribute in Bubble.

How to Enable ID Attributes:  

1. Go to Settings → General in your Bubble app.  
   
2. Scroll down to Advanced options.  
   
3. ✅ Check the box for “Expose the option to add an ID attribute to HTML elements”.  
   
4. Refresh your Bubble editor.  
   

✅ Now you can assign unique ID attributes to any element in your app.


You can define tour steps using JSON format in the plugin’s properties.

Example JSON for a 3-Step Tour:  

[
   {
       "target": "#tour_start",
       "title": "Welcome to your tour!",
       "content": "This is your app header."
   },
   {
       "target": "#tour_step_two",
       "title": "Start Here",
       "content": "Click this button to begin."
   },
   {
       "target": "#step_three",
       "title": "Next Steps",
       "content": "Learn more about our features here."
   }
]


1. Select the element you want to highlight in the tour.  
   
2. Under Element Properties, find the ID Attribute field.  
   
3. Enter the matching ID from your JSON, e.g., tour_start, tour_step_two, etc.  
   

Plugin Properties:  
• Steps (JSON String) - The JSON array of tour steps (as shown above).  
• Start Automatically - If checked, the tour starts as soon as the page loads.  


Option 1: Automatically on Page Load  
• ✅ Enable “Start Automatically” in the plugin properties.  
• The tour will begin as soon as the page loads.  

🔥 Bonus: Dynamically Update Tour Steps  
• Modify tour steps dynamically using Bubble workflows.  
• Update the Steps JSON field and refresh the tour using the plugin.  


✅ Enable ID attributes in Bubble settings  
✅ Assign matching IDs to elements  
✅ Define steps in JSON format  
✅ Start the tour automatically or with a button  

Now you’re ready to create engaging, interactive onboarding tours in your Bubble app! 🚀