How Do You Build Your Onboarding Screens in Bubble?

Need help Database
1

I’m reworking the onboarding flow for my app — the screens that show before someone signs up (feature highlights, benefits, etc.).

Curious how others here are building these:

  • Are you using native Bubble elements (text/images/groups)?
  • Or are you designing them in Figma and then using full-screen images?
  • Any issues with responsiveness, load time, or layout stretching?
  • Do you use a plugin like PageSlider or just show/hide groups?

Would love to hear what’s worked for you or see examples if you’re open to sharing.

Currently we use a plugin with images but these images are stretched and don’t automatically fit to the users screen size…

Thanks!

2

Depends on how you want your app to like?
Best way to say this, the structure or template or feel you want your app to get, use a website sample closet to this and see how theirs was designed

3

It will depend a lot on how you want it to be in your app. For example, it could be an onboarding tour guide that shows you different sections, or it could be images. There are many possibilities. Do you already have an idea of how you want it to be? That way, we can think about the best approach.

4

Well, as you said, there are plugins. I’ve never used one.

I’m not a big onboarding fan. If you need to have a big onboarding thing, then the app isn’t designed right.

I’ve seen apps that just go on and on and on about everything except what the user wants.

Let’s say you have a taxi app…simple.

the main screen…

where do you want picked up at, and where are you going?

After the ride: How was the ride?

After they rate it: Hey, if you ever want to check out all the rides you took, click here.

No long drawn-out episode about how your company was started in 1732 and blah, blah, blah.

There is a place in your app for all the self-praise stuff you want to do. The user can click there if they are interested.

Simple steps that are self-explanatory as the user uses your app.

Micro interactions that guide the user.

Too many apps treat the user as a complete idiot. If they are, then it’s because you designed your app wrong.

Now, there are apps like some business apps that may need more explanation…that is best done with a video or meeting.

Keep things simple.

Guide the user step by step.

2 Likes
5

I was working on the onboarding flow for my native app and figure out that you cannot swipe screen like you would on most of the onboarding flow.

I build everything only with native bubble elements and users need to click a button to go the next page (or return).

This is not the cleanest onboarding app but it is working.

6

I’ve seen people take two approaches to building onboarding tours in Bubble apps:

  1. Build your own. Usually using a combination of floating groups and custom states. Gives you a lot of flexibility, but can take some time.
  2. Use an onboarding / product tour plugin (EG my A+ Onboarding - Product Tour plugin). Quicker to get setup, but costs extra and introduces an additional dependancy (so make sure you trust the plugin creator!). Also note that most of these types of plugins don’t yet support the native mobile builder

I hadn’t seen people use the PageSlider plugin to show/hide groups before, but could absolutely be a valid 3rd approach.