Design a seamless onboarding flow in Bubble using multi-step groups controlled by custom states, progress indicators, and a completion tracker. Guide new users through welcome screens, profile setup, feature highlights, and preference configuration — then mark onboarding as complete so returning users skip it automatically and go straight to the dashboard.
Designing an Onboarding Flow in Bubble
First impressions matter. A good onboarding flow welcomes new users, collects essential profile information, introduces key features, and sets preferences — all in a guided, friction-free experience. This tutorial shows you how to build a multi-step onboarding wizard in Bubble that runs once for new users and is automatically skipped for returning users.
Prerequisites
- A Bubble account with an app open in the editor
- User authentication set up (signup/login)
- A dashboard or home page for post-onboarding redirect
- Basic understanding of custom states and group visibility
Step-by-step guide
Add an onboarding_completed field to the User Data Type
Add an onboarding_completed field to the User Data Type
Go to Data tab → Data types → User. Add a field called 'onboarding_completed' (yes/no, default: no). This field controls whether the onboarding flow shows. On your dashboard page, add a 'Page is loaded' workflow: 'Only when Current User's onboarding_completed is no → Go to page onboarding.' This redirects new users to the onboarding flow while letting returning users skip it.
Expected result: New users are automatically redirected to onboarding. Users who completed it go straight to the dashboard.
Create the onboarding page with step groups
Create the onboarding page with step groups
Create a page called 'onboarding.' Add a custom state on the page: 'current_step' (number, default: 1). Create 4-5 Group elements stacked on top of each other, each representing one onboarding step. Step 1: Welcome screen (app logo, greeting, 'Get Started' button). Step 2: Profile setup (name, avatar upload, bio). Step 3: Preferences (interest categories, notification settings). Step 4: Feature tour (highlight key features). Step 5: Completion (success message, 'Go to Dashboard' button). Set each group's conditional: 'When page's current_step is [step number] → This element is visible.'
Expected result: Five onboarding step groups are created, with only the current step visible at any time.
Build the progress indicator
Build the progress indicator
At the top of the onboarding page, add a Row group with 5 small circle elements (one per step). Style them: default color = light gray, active color = blue. Add a conditional on each circle: 'When page's current_step >= [this step's number] → Background color = blue.' Between circles, add thin line elements that also change color based on progress. Below the circles, add step labels (Welcome, Profile, Preferences, Features, Done). This gives users a visual progress bar.
Expected result: A progress indicator at the top shows which step the user is on and how many remain.
Create navigation workflows for stepping through the flow
Create navigation workflows for stepping through the flow
Each step group has a 'Next' button. Create workflows: When Button Next (Step 1) is clicked → Set state current_step = 2. When Button Next (Step 2) is clicked → first save profile data (Make changes to Current User: first_name, last_name, avatar), then Set state current_step = 3. When Button Next (Step 3) is clicked → save preferences, Set state current_step = 4. Add 'Back' buttons on steps 2-4 that decrement current_step. The final step's 'Go to Dashboard' button: Make changes to Current User → onboarding_completed = yes, then Go to page dashboard.
Pro tip: Add an 'Only when' condition on each Next button to require key fields. For example, Step 2's Next should only work when Input First Name is not empty.
Expected result: Users can navigate forward and backward through steps, with data saved at each step transition.
Collect user preferences for personalization
Collect user preferences for personalization
In the Preferences step (Step 3), add checkboxes or clickable cards for interest categories (pulled from an Option Set or Data Type). When the user selects categories, store them in a custom state list. On 'Next,' save the selections to the User's interests field (list of texts). Also add toggle switches for notification preferences (email updates, weekly digest) and a dropdown for primary use case. These preferences power future personalization and recommendation features.
Expected result: Users select their interests and notification preferences, which are saved to their profile for personalization.
Add a skip option and handle edge cases
Add a skip option and handle edge cases
Add a 'Skip for now' link on each step that advances to the next step without saving. On the final step, the completion action still runs. Also handle the edge case where a user closes the browser mid-onboarding: since onboarding_completed is still 'no,' they will be redirected back on next login. Save their last completed step in a 'last_onboarding_step' field so they can resume from where they left off instead of starting over.
Expected result: Users can skip steps, and interrupted onboarding resumes from the last completed step on next login.
Complete working example
1ONBOARDING FLOW ARCHITECTURE2==============================34User Data Type additions:5 onboarding_completed (yes/no, default: no)6 last_onboarding_step (number, default: 1)7 interests (list of text)8 notification_email (yes/no)9 notification_digest (yes/no)1011Page: onboarding12 Custom State: current_step (number)13 On Page Load: Set current_step = Current User's last_onboarding_step1415Step Groups (visible when current_step = N):16 Step 1 - Welcome: Logo, greeting, Get Started button17 Step 2 - Profile: First name, last name, avatar upload18 Step 3 - Preferences: Interest checkboxes, notification toggles19 Step 4 - Feature Tour: Key feature highlights with screenshots20 Step 5 - Complete: Success message, Go to Dashboard button2122Progress Indicator:23 5 circles + connecting lines24 Conditional: step >= N → blue color (completed/active)2526Navigation Workflows:27 Next (each step):28 Save step data → Make changes to User29 Set state: current_step + 130 Save: User's last_onboarding_step = current_step + 131 Back (steps 2-4):32 Set state: current_step - 133 Skip:34 Set state: current_step + 1 (no data save)35 Complete (Step 5):36 Make changes to User: onboarding_completed = yes37 Go to page: dashboard3839Dashboard Redirect:40 Page is loaded:41 When onboarding_completed is no → Go to onboardingCommon mistakes when designing creating a seamless onboarding process in Bubble.io: Step-by-Step
Why it's a problem: Showing onboarding every time the user visits the dashboard
How to avoid: Use the onboarding_completed field on the User Data Type. Only redirect when this field is 'no.'
Why it's a problem: Not saving progress between steps
How to avoid: Save data to the User Data Type at each step transition, not just at the end. Also save the last completed step number for resume functionality.
Why it's a problem: Making onboarding too long with too many steps
How to avoid: Keep onboarding to 4-5 steps maximum. Ask only for essential information. Move nice-to-have settings to the user's profile page.
Best practices
- Keep onboarding to 4-5 steps maximum to maintain completion rates
- Save user data at each step transition so progress is not lost
- Add a visible progress indicator so users know how many steps remain
- Track the last completed step for resume-on-return functionality
- Allow users to skip non-essential steps with a 'Skip for now' option
- Mark onboarding as complete only after the final step to ensure users see all content
- Collect preferences during onboarding to power personalization features immediately
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
How do I build a multi-step onboarding flow in Bubble.io that runs once for new users? I need a welcome screen, profile setup, preference collection, feature tour, and completion tracking. Show me how to use custom states for step navigation and prevent the flow from showing to returning users.
Build an onboarding flow for new users. Create an onboarding page with 5 steps: welcome, profile setup (name, avatar), preferences (interests, notifications), feature highlights, and completion. Use a custom state for step navigation, save progress at each step, and mark onboarding_completed on the User when done.
Frequently asked questions
Can users go back to change their onboarding answers later?
Yes. Since all onboarding data is saved to the User Data Type, create a 'Profile Settings' page where users can update their name, avatar, interests, and notification preferences at any time.
How do I re-trigger onboarding for users who already completed it?
Set the user's onboarding_completed field back to 'no' via an admin action or workflow. This is useful when you add significant new features that require re-introduction.
Should I use separate pages or groups for each step?
Groups on a single page (controlled by a custom state) are better for onboarding. They provide instant transitions without page load delays, and you can maintain a persistent progress indicator.
What completion rate should I expect for onboarding?
Well-designed 4-5 step onboarding flows typically see 60-80% completion rates. Track this by comparing users with onboarding_completed = yes vs total signups.
Can RapidDev help design a custom onboarding experience?
Yes. RapidDev designs and builds onboarding flows tailored to your app's specific user journey, including A/B testing different flows to optimize completion rates.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation