We’ve just released a new free plugin called Hopscotch Step-By-Step Tours. This allows you to create visual guides for your Bubble app in the form of informational pop-ups that users can click through and interact with. You can customize a tour in various ways and trigger workflow actions based on tour events.
Here’s how it works:
- In Bubble, go to Settings > General and make sure that “Expose the option to add an ID attribute to HTML elements” is checked
- Add a “Tour” element to your Bubble page
- Use the “Add step to” action to add steps to your tour one by one. You associate steps with Bubble elements using the element ID
- Use the “Start” action to begin your tour
A few tips:
- An easy method for adding steps to a tour is to do so through a “Page is loaded” event. You can also add steps within the same workflow you use to start the tour - this works well if not all elements you wish to use for the tour are visible on page load (note the next tip). If you use this method, consider adding a “Reset steps for” action at the beginning of the workflow to avoid having duplicate steps for your tour.
- When you associate a Bubble element with a step (via the element ID), that element must be visible at the time the step is added.
- Tours are customizable at the overall tour level and at the step level.
- You can access the current step # through the Tour element.
- You can trigger Bubble workflows based on various tour events, such as when the tour is finished or the call-to-action button is clicked.
Please email any bugs or questions to firstname.lastname@example.org or post on this thread!