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.

A+ Onboarding Product Tutorial

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 Products Tool 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 through your users when they are browsing your app.

Product Tour element

So I add in the Products 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 backs 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.

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 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. Okay, so you can see we've got this nice centralised pop up effectively on our page and it says welcome, welcome to my app and then we've done.

But you'll notice that it's not attached to any elements on the page.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 wanted 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 option to add an ID attribute to HTML elements. That is what will allow you to have this box at the bottom.

So I put in here step underscore 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 talk. So 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 twelve, make the padding four. And that's because my app here, I've got some roundness around my elements. I've got this nice contrast between the white and the grey. 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. Call this step two, go back to my design, and let's highlight chart two. So on chart, I add in the ID attribute. So that is step underscore two. And let's run that.

Okay, so you can see I'm gradually beginning to build up this lovely, really user friendly product 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.

So I would begin by going into my elements, going to orders, and then I want to highlight just this box here. List. Yeah, let's go. List of orders. And so I've already added in step underscore three. Now, this isn't going to work, but I'm going to demonstrate what happens and explain why it's happening. So let's make this step three, look at these orders and then have that as three.

Like I say, this is not going to work, but I'm going to explain what's going on. 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 underscore three is not part of the page at the moment. It's not being shown, so it cannot be linked to by this step here in our workflow.

Moving between pages

So to do that, I need to make use of another action that comes from the plugin, and that is a product tool goes to a step. And so I would say when this product tool current step index and I'd count it off from here, 1234 is four. I need to change my custom state. And what I'm doing is effectively what my my if I was to click on one of the links here, I set state on my page state is of 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. So I need to set state here. This is still not going to work, but it's worth demoing.

Okay, we see. We're moving on to orders, but we're still not successfully attaching step three to the element on the page we wish to anchor it to. 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 Tour step.

And so I'm going to call this pause and it doesn't need to have these values in it. It's effectively a step in our workflow so that by the time that we've got current step is four, we go 1234, then we fire this workflow and then after that we draw attention to the object on the page we've yet to arrive to. And I need to add in one extra step here, which is go to next Product Tour. So we go 1234. Spring to 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. Okay, let's just explore some other options that you can experiment with with this plugin so we can change the primary colour. 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 pop ups, 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. Okay, we can see our primary car has been updated. If I click out, nothing happens.

So there you have it. There is a demonstration of the A+Onboarding Product Tour by Cranford Tech. We've demonstrated how you can really easily, in ten minutes or less, add in multiple steps of Product Tour. Something that if you were to use Group Focus and 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.