An in-app notification system in Bubble uses a Notification Data Type linked to users, a bell icon with an unread count badge, and a dropdown or popup displaying recent notifications. This tutorial covers creating the data model, triggering notifications from workflows, building the notification bell UI with real-time badge updates, marking notifications as read, and managing notification preferences.
Overview: In-App Notifications in Bubble
This tutorial walks you through building a complete in-app notification system. You will create notifications when events occur, display them in a bell icon dropdown, track read/unread status, and add notification management features.
Prerequisites
- A Bubble app with user authentication
- Basic understanding of Data Types and Workflows
- A reusable header element for placing the notification bell
- Familiarity with custom states and conditional formatting
Step-by-step guide
Create the Notification Data Type
Create the Notification Data Type
Go to the Data tab and create a Data Type called 'Notification'. Add fields: 'recipient' (User), 'title' (text), 'message' (text), 'is_read' (yes/no, default no), 'notification_type' (text — values like 'message', 'order', 'system'), 'link_url' (text — page to navigate when clicked), and 'related_thing' (text — unique ID of related record). The auto-generated Created Date serves as the timestamp.
Expected result: A Notification Data Type exists with all required fields.
Trigger notifications from your workflows
Trigger notifications from your workflows
In any workflow where you want to notify a user, add a Create a new Notification action. For example, when a new message is sent, create a Notification with recipient = the other participant, title = 'New message from [sender name]', message = a preview of the message body, notification_type = 'message', and link_url = the chat page URL. Add similar notification triggers for order updates, comments on posts, friend requests, or any event that users should know about.
Pro tip: For events that notify multiple users, use Schedule API Workflow on a List to create notifications for a list of recipients in a backend workflow.
Expected result: Notifications are created automatically when relevant events occur in your app.
Build the notification bell with unread badge
Build the notification bell with unread badge
In your reusable header element, add an Icon element with the bell icon. Next to it, add a small circular Text element for the unread count badge. Set the badge's text to a dynamic value: Do a Search for Notification where recipient = Current User and is_read = no, then :count. Add a conditional on the badge: When this text's value is '0' or empty → This element is not visible. Style the badge as a red circle with white text positioned at the top-right of the bell icon. The search auto-updates, so the badge count changes in real-time when new notifications arrive.
Expected result: A bell icon displays in the header with a red badge showing the number of unread notifications.
Create the notification dropdown
Create the notification dropdown
Add a Group element below the bell icon set as a Popup or Floating Group. Inside it, add a Repeating Group with type Notification, data source: Do a Search for Notification where recipient = Current User, sorted by Created Date descending, limited to 20 items. Each cell displays the title, message preview, and time ago. Add conditional formatting: When current cell's Notification's is_read is no → bold text and slightly different background. Add a workflow when the bell is clicked to toggle the dropdown visibility. Add a 'Mark all as read' button at the top of the dropdown.
Expected result: Clicking the bell icon shows a dropdown with recent notifications, visually distinguishing unread ones.
Implement mark-as-read and click-through
Implement mark-as-read and click-through
Add two mark-as-read workflows. First, when a user clicks an individual notification: Make changes to the Notification → set is_read to yes, then Navigate to the link_url. Second, when the user clicks 'Mark all as read': Make changes to a list of things → target all unread notifications for Current User → set is_read to yes. The badge count updates automatically since it uses a live search. Also mark notifications as read when the dropdown is opened if you prefer that behavior.
Expected result: Clicking a notification marks it as read and navigates to the relevant page. Mark all as read clears all unread badges.
Add notification cleanup and preferences
Add notification cleanup and preferences
Create a scheduled backend workflow that runs daily to delete notifications older than 30 days. Search for Notifications where Created Date is less than Current date minus 30 days, then delete the list. For preferences, add fields to the User Data Type: 'notify_messages' (yes/no), 'notify_orders' (yes/no), etc. Before creating a notification, add an Only When condition checking the recipient's preference for that notification type. Build a settings page where users can toggle each notification category on or off.
Expected result: Old notifications are automatically cleaned up, and users can control which notification types they receive.
Complete working example
1NOTIFICATION SYSTEM SUMMARY2=====================================34DATA MODEL:5 Notification:6 - recipient (User)7 - title (text)8 - message (text)9 - is_read (yes/no, default: no)10 - notification_type (text)11 - link_url (text)12 - related_thing (text)13 - Created Date (auto)1415TRIGGER NOTIFICATIONS:16 Workflow event occurs → Create new Notification17 recipient = target user18 title = event description19 message = detail preview20 type = event category21 link_url = relevant page22 Only when: recipient's notify_[type] is yes2324BELL ICON + BADGE:25 Icon: bell26 Badge text: Search Notifications27 [recipient = Current User, is_read = no]:count28 Badge visible: When count > 029 Style: Red circle, white text, top-right3031DROPDOWN:32 Floating Group below bell icon33 Repeating Group: Notification34 Source: Search [recipient = Current User]35 Sort: Created Date desc, limit 2036 Cell: title, message preview, time ago37 Unread style: bold text, tinted background38 Mark all as read button at top3940MARK AS READ:41 Individual: Click notification42 → is_read = yes → Navigate to link_url43 All: Click Mark all as read44 → Make changes to list → is_read = yes4546CLEANUP:47 Scheduled daily backend workflow48 Delete Notifications older than 30 days4950PREFERENCES:51 User fields: notify_messages, notify_orders, etc.52 Settings page: Toggle each category53 Check before creating notificationCommon mistakes when handling In-App Notifications in Bubble
Why it's a problem: Searching for unread notifications inside each notification cell
How to avoid: Place the unread count search on the bell badge element, not inside the Repeating Group cells
Why it's a problem: Not adding a limit to the notification dropdown
How to avoid: Limit the Repeating Group to 20-30 recent notifications and add a 'View all' link to a full notifications page
Why it's a problem: Creating notifications without checking user preferences
How to avoid: Add notification preference fields to User and check them with Only When conditions before creating notifications
Best practices
- Use a single search for the unread count badge rather than counting inside cells
- Limit the dropdown to 20-30 recent notifications for fast loading
- Visually distinguish unread notifications with bold text or background color
- Implement notification preferences so users can control what they receive
- Clean up old notifications with a scheduled backend workflow
- Use descriptive notification titles that tell users what happened without opening
- Group notifications by type when displaying many at once
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build an in-app notification bell with unread badge and dropdown list in my Bubble.io app. What data model should I use and how do I make the badge update in real-time?
Help me build a notification system with a bell icon in my header that shows unread count and a dropdown listing recent notifications with mark-as-read functionality.
Frequently asked questions
Do notifications update in real-time?
Yes. Bubble's searches on page elements auto-update via WebSocket, so the badge count and notification list update automatically when new notifications are created.
How many notifications should I keep per user?
Keep 30 days of notifications as a reasonable default. Use a scheduled backend workflow to delete older ones and prevent database bloat.
Can I send email and in-app notifications together?
Yes. In the same workflow that creates the Notification record, add a Send Email action. Check user preferences for each channel separately.
How do I group similar notifications?
Instead of creating individual notifications for similar events, update an existing notification. For example, change 'John liked your post' to '3 people liked your post' by checking for existing unread notifications of the same type.
Should I use a plugin for notifications?
For in-app notifications, the native approach described here works well. For browser push notifications, you will need a plugin like OneSignal.
Can RapidDev help build a notification system?
Yes. RapidDev can implement complete notification systems including in-app alerts, push notifications, email digests, and notification preferences for your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation