Managing user preferences in Bubble involves adding preference fields to the User Data Type, building a settings page with form controls for notifications, display, privacy, and language options, saving preferences to the database, and applying them throughout the app using conditions. This tutorial covers the full preferences system from database design through UI to application logic.
Overview: Managing User Preferences in Bubble
This tutorial shows you how to build a user preferences system in Bubble. Users will be able to customize notifications, display settings, privacy controls, and language from a central settings page.
Prerequisites
- A Bubble app with user authentication
- Understanding of Bubble Data Types and workflows
- Basic familiarity with conditional formatting
Step-by-step guide
Add preference fields to the User Data Type
Add preference fields to the User Data Type
In the Data tab, add fields to the User Data Type: email_notifications (yes/no, default yes), push_notifications (yes/no, default yes), theme (Option Set: Theme — Light/Dark/System), language (Option Set: Language — English/Spanish/French), timezone (text), profile_visibility (Option Set: Visibility — Public/Private/Contacts Only), show_online_status (yes/no, default yes). Group related preferences conceptually for the settings page UI.
Expected result: The User Data Type has all preference fields with sensible default values.
Build the settings page with grouped sections
Build the settings page with grouped sections
Create a 'settings' page accessible from the user menu. Organize preferences into sections using Groups with headers: Notifications (checkboxes for email and push), Appearance (dropdown for theme, dropdown for language), Privacy (dropdown for profile visibility, checkbox for online status), and Account (timezone selector). Use Checkbox elements for yes/no preferences and Dropdowns with Option Sets for multi-choice preferences. Pre-fill each control with the current user's saved values on page load.
Expected result: A clean settings page displays all preference categories with controls pre-filled with current values.
Save preferences with a single Save button
Save preferences with a single Save button
Add a Save Changes button at the bottom of the settings page. The workflow: Make changes to Current User — set each preference field to its corresponding form control value. Show a success toast or message confirming the save. Alternatively, auto-save each preference immediately when changed (on input change or checkbox toggle) for a more modern UX. For auto-save, add a small 'Saved' indicator that appears briefly after each change.
Pro tip: Auto-saving individual preferences provides a smoother experience, but a Save button is simpler to implement and lets users make multiple changes before committing.
Expected result: User preferences are saved to the database and persist across sessions.
Apply preferences throughout the app
Apply preferences throughout the app
Use conditions throughout your app to respect user preferences. For theme: add a Conditional on the page background and key elements that changes colors when Current User's theme is Dark. For notifications: check Current User's email_notifications before sending emails in workflows. For profile visibility: add privacy rules on User data that check profile_visibility. For language: use Bubble's built-in language/translation features or conditionally display text based on Current User's language. Apply these conditions in reusable elements so they work across all pages.
Expected result: The app behavior adapts based on each user's saved preferences.
Complete working example
1USER PREFERENCES SYSTEM2========================34USER FIELDS:5 email_notifications: yes/no (default: yes)6 push_notifications: yes/no (default: yes)7 theme: Option Set (Light/Dark/System)8 language: Option Set (English/Spanish/French)9 timezone: text10 profile_visibility: Option Set (Public/Private/Contacts)11 show_online_status: yes/no (default: yes)1213SETTINGS PAGE LAYOUT:14 Section: Notifications15 □ Email notifications (Checkbox)16 □ Push notifications (Checkbox)17 Section: Appearance18 Theme (Dropdown: Light/Dark/System)19 Language (Dropdown: English/Spanish/French)20 Section: Privacy21 Profile visibility (Dropdown: Public/Private/Contacts)22 □ Show online status (Checkbox)23 [Save Changes] button2425SAVE WORKFLOW:26 Make changes to Current User:27 email_notifications = Checkbox value28 theme = Dropdown value29 language = Dropdown value30 profile_visibility = Dropdown value31 etc.32 Show success message3334APPLYING PREFERENCES:35 Theme: Conditional on page/elements for Dark mode colors36 Notifications: Check preference before sending emails37 Privacy: Privacy rules check profile_visibility38 Language: Conditional text or Bubble translationCommon mistakes when managing user preferences in Bubble
Why it's a problem: Not setting default values for preference fields
How to avoid: Set default values on preference fields in the Data Type definition, or set them in the signup workflow
Why it's a problem: Applying theme preferences only on the settings page
How to avoid: Apply theme conditions in reusable elements (header, footer) and on every page's background for app-wide effect
Why it's a problem: Not pre-filling form controls with current values
How to avoid: Set each form control's initial content to the corresponding Current User field value
Best practices
- Set default values for all preference fields in the Data Type or signup workflow
- Group related preferences into clearly labeled sections
- Pre-fill form controls with the user's current saved values
- Apply preferences in reusable elements for app-wide consistency
- Check notification preferences before sending any email or push notification
- Use Option Sets for multi-choice preferences for type safety
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a user settings page to my Bubble.io app where users can manage notification preferences, theme (light/dark), language, and privacy settings. How should I structure the data and build the settings page?
Create a settings page with sections for Notifications (email and push checkboxes), Appearance (theme dropdown with Light/Dark/System), and Privacy (profile visibility dropdown). Pre-fill controls with Current User's saved values and add a Save Changes button.
Frequently asked questions
Should I auto-save preferences or use a Save button?
Auto-save is more modern but harder to implement. A Save button is simpler and clearly communicates to users when changes are committed. Choose based on your app's complexity.
How do I implement dark mode based on user preference?
Add Conditionals on page backgrounds, text elements, and groups that change colors when Current User's theme is Dark. Use Color Variables to make this manageable.
Can I set preferences for users who are not logged in?
Use browser local storage (via a plugin) or cookies for anonymous preferences. Migrate them to the User record when they sign up.
How do I handle the System theme option?
System means follow the device's dark/light mode. Use JavaScript to detect the system preference (window.matchMedia) and apply it when the user selects System.
Can RapidDev help build a preferences system in Bubble?
Yes. RapidDev can implement comprehensive user preference systems including themes, notifications, privacy controls, and localization for your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation