Creating a Product Tour in Bubble
In this Bubble tutorial video, I'm going to be demonstrating how you can create a product tour and onboarding experience just like this to guide your users through and explain features in your Bubble app. Whether you're working on an MVP or you've got an amazing SaaS app idea, whatever you're building with Bubble.io, this is a tutorial to show you how to add an amazing intro onboarding experience. And we'll be using this plugin here, the A+ onboarding product tutorial plugin by Cranford Tech.
Setting Up the Plugin
So let's dive right into the demo. I've got a simple SaaS dashboard here, which uses an option set and custom state to cycle through different views. So like any plugin, we head to the plugin directory and you can see that I've already installed the A+ onboarding and product tour plugin. Once you've got that installed, like many plugins, you have to add in an element to the page. This is to ensure that the right scripts that run the plugin get loaded in for users when they are browsing your app.
Adding the Product Tour Element
So I add in the product tour element and it's worth just taking a moment to pause and consider the options that we've got here, such as the overlay effect, whether we can allow our users to go back and forwards through the app. We can change the labels for different buttons, but let's just go right for it and get an example.
Creating the Workflow
So I'm going to add a general page is loaded workflow. And because I've got the element on my page, I can add in a "add a step to a product tour". And so I could say welcome, just say welcome to my app. And then in order to actually run the product tour, I need to finish this with "start product tour". And that should be enough to test and demonstrate it.
Testing the Product Tour
Okay. So you can see we've got this nice centralized pop up effect thing on our page. And it says welcome, welcome to my app. And then we're done, but you'll notice that it's not attached to any elements on the page.
Attaching Steps to Page Elements
So to do that, I need to go into design and I want to highlight chart one, this box, which I could have some chart data in or anything in my app that I want to highlight to the user. And I begin by adding in an ID attribute. If you can't see the ID attribute box at the bottom, you need to go into settings, general, scroll all the way down to the bottom and make sure you have checked, expose the options, add an ID attribute to HTML elements. That is what will allow you to have this box at the bottom.
Adding Multiple Steps
So I put in here step_one. I'm going to add in another step and I'll call this one step one and I'll say check out this chart. And here's where I put in the ID attribute step one. Notice that I'm basically queuing up my steps all before the final action in the workflow, which is to start the product tool.
Styling the Product Tour
Let's preview that. There's my welcome. My general one not attached to any element in particular. And there is my second step, which is attached to this group here. I'm going to do a couple of things with the style just to improve it. So I'm going to make the roundness 12, make the padding four. And that's because my app here, I've got some roundness around my elements. I've got this contrast between the white and the gray.
Adding More Steps
Let's refresh it. I'm now getting what looks like quite a nice soft border effect around my element. Let's do that for one more. So I'm going to copy and paste the step. Cool. This step two, go back to my design, and let's highlight a chart too. So on chart, I add in the ID attribute. So that is step_two and let's run that.
Navigating Between Pages
Okay. So you can see I'm gradually beginning to build up this lovely, really user friendly products tour for my Bubble app. Now what if I wanted to show them chart one, chart two, but then I wanted to draw their attention to orders? Well, that takes a little bit of extra work, but I'm going to show you how to do it.
Handling Page Changes
So I would begin by going into my elements, go to orders, and then I want to highlight just this box here list. Yeah, let's go this to borders. And so I've already added in step_three. Now this isn't going to work, but I'm going to demonstrate what happens and explain why it's happening.
Using Custom States
So far, so good. But then step three isn't successfully anchoring itself to an element on the page. And that's because we've not actually changed the custom state that dictates that orders is being displayed. And so actually the element step_three is not part of the page at the moment. It's not being shown so it cannot be linked to by our step here in our workflow.
Implementing a Pause in the Workflow
To do that, I need to make use of another action that comes from the plugin. And that is the "a product tool goes to a step". And so I would say when this product tool current step index and I'd count off from here, one, two, three, four is four. I need to change my custom state. And what I'm doing is effectively what my, if I was to click on one of the links here, I set state on my page status or view view is an option set, which has got dashboard orders and settings as the option set values. And I'm just flicking through them using my menu navigation.
Final Adjustments
So I need to set state here. Okay. This is still not going to work, but it's worth demoing. Okay. We see we're moving onto orders, but we're still not successfully attaching step three to the element on the page. We wish to anchor it to do that. We basically need to create a pause in our workflow and we don't use the pause workflow action. Instead we can just create another product tool, another product tool set. And so I'm going to call it, of course, this coolest pause. And it doesn't need to have these values in it. It's effectively a step in our workflow.
Conclusion and Additional Options
So by the time that we've got current step is four, we go one, two, three, four, then we fire this workflow. And then after that, we draw attention to the object on the page we've yet to arrive to. I need to add in one extra step here, which is go to next product tool. So we go one, two, three, four, springs are here, change the custom state. This takes us to five. Let's try it. And there you go. We successfully navigated to another page within our one page app.
Let's just explore some other options that you can experiment with, with this plugin. So we can change the primary color. So let's change this to a green and let's change the overlay to say 20% instead. And we'll also say that when the user clicks outside of our popups, our steps, we want nothing to happen. We want to ensure that our user goes through our steps without being distracted or taken off task.
There you have it. There is a demonstration of the A+ onboarding product tour by Cranford tech. We demonstrated how you can really easily, in 10 minutes or less add in multiple steps of product or something that if you were to use group focus and kind of build this all manually using Bubble elements, it would take you so much longer. So this is such a time saver. And we've even shown you how to use custom states within the steps of the plugin workflow, to be able to take you between different pages in your one page app.