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.
I think there is a bug, it seems to duplicate the steps. Or am I just not doing thing correctly?
Never mind I think I figured it out. Great work here!
Is there a way to make it move to the next step depending on an action instead of pressing “next” each time? I want it to go to the next step once I choose a slide menu option. Does that work?
Hi @J805, this generally happens if you are using the same workflow to add steps to the tour as you are to start the tour. If you trigger this action multiple times - perhaps you start the tour but want to restart it or go through it again - you are also adding the steps multiple times, resulting in duplicates. Is it possible this is what’s happening in your app? If not, do you mind providing a bit more detail on how you’ve got this set up?
Two ways to work around the above problem:
Add the steps to the tour on page load (and use a separate workflow to start the tour)
Add a “Reset steps for” action before you add the steps so the duplicates are cleared beforehand
Let me know how else I can help. Thanks for using the plugin
Yes, that was it, I didn’t understand how it worked. So basically you have to add all the steps first, then you start the tour. Makes more sense now. Just a little confusing in the wording for me.
It might be the same situation I ran into, but tell me if I’m wrong.
If you have a workflow that adds a step and run that workflow multiple times, it’ll add the same step multiple times.
You should put the workflows to add steps apart from the workflow to start the tutorial if you allow users to start the tutorial multiple times on the same page load.
For the mobile version, as it is very narrow, I need to adjust the ‘arrow’ that point to the object and adjust the x-offset. Possible to create an offset of the arrow? or other suggestion?
Thanks.
Here is what I’m talking about. Once you click on this button then the pop up goes away. Is there a way to do that instead of the “next” button if we need them to click on a menu or something? I have a slide out menu I’m trying to get working with this and some other things that they need to click on to proceed.
Hey @J805, good call! Please see the new checkbox titled “Advance to next step when target is clicked” (after updating to the new plugin version). This is on the “Add steps to” action.
Does this fit your use case? …or would it be helpful to have a generic “move to next (or previous) step” type action?
