# How to Handle In-App Notifications in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
NOTIFICATION SYSTEM SUMMARY
=====================================

DATA MODEL:
  Notification:
    - recipient (User)
    - title (text)
    - message (text)
    - is_read (yes/no, default: no)
    - notification_type (text)
    - link_url (text)
    - related_thing (text)
    - Created Date (auto)

TRIGGER NOTIFICATIONS:
  Workflow event occurs → Create new Notification
    recipient = target user
    title = event description
    message = detail preview
    type = event category
    link_url = relevant page
  Only when: recipient's notify_[type] is yes

BELL ICON + BADGE:
  Icon: bell
  Badge text: Search Notifications
    [recipient = Current User, is_read = no]:count
  Badge visible: When count > 0
  Style: Red circle, white text, top-right

DROPDOWN:
  Floating Group below bell icon
  Repeating Group: Notification
    Source: Search [recipient = Current User]
    Sort: Created Date desc, limit 20
  Cell: title, message preview, time ago
  Unread style: bold text, tinted background
  Mark all as read button at top

MARK AS READ:
  Individual: Click notification
    → is_read = yes → Navigate to link_url
  All: Click Mark all as read
    → Make changes to list → is_read = yes

CLEANUP:
  Scheduled daily backend workflow
  Delete Notifications older than 30 days

PREFERENCES:
  User fields: notify_messages, notify_orders, etc.
  Settings page: Toggle each category
  Check before creating notification
```

## Common mistakes

- **Searching for unread notifications inside each notification cell** — The badge count should use a single search at the header level, not repeated searches per notification item Fix: Place the unread count search on the bell badge element, not inside the Repeating Group cells
- **Not adding a limit to the notification dropdown** — Loading all notifications for a user can be thousands of records, causing the dropdown to load slowly Fix: Limit the Repeating Group to 20-30 recent notifications and add a 'View all' link to a full notifications page
- **Creating notifications without checking user preferences** — Users receive unwanted notifications they cannot control, leading to frustration and disengagement Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/handle-user-notifications-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/handle-user-notifications-in-bubble