Unread Badge

Add a Real-Time Unread Notification Badge

Show users exactly how many unread notifications they have. The Notilayer widget renders a bell icon with a live count badge that updates instantly via SSE. No custom WebSocket code. One script tag to embed.

Add Badge Now — Free Learn More

Anatomy

What makes a great notification badge

A badge is more than a red dot. Here are the elements that keep users informed without overwhelming them.

Bell Icon

A recognizable entry point. Users instinctively click the bell to check notifications.

Count Badge

A numeric indicator showing how many unread notifications exist. Updates without page reload.

Real-Time Sync

SSE keeps the count accurate. New notification arrives, count goes up. User reads it, count goes down.

Inbox Panel

Clicking the bell opens a scrollable inbox. Users can read, dismiss, or take action on each notification.

Build vs. Buy

Why building a badge from scratch is harder than it looks

A simple badge hides real complexity. Here is what you need to build if you go the DIY route.

Requirement	Build Yourself	Notilayer Widget
Real-time connection (SSE/WS)	Build + maintain	Included
Read/unread state management	Database schema + API	Included
Badge count syncing	Custom logic	Included
Offline recovery	Manual reconnection	Automatic
Bell icon + inbox UI	Design + implement	Pre-built
Time to ship	1-3 weeks	10 minutes

How It Works

Real-time badge count via SSE

The Notilayer widget opens a Server-Sent Events connection when your app loads. Every time you send a notification through the API, the badge count updates instantly. When the user reads a notification, the count decrements. No polling, no manual refresh.

Embed the widget

One script tag in your layout. Bell icon and inbox render automatically.

Send a notification

POST to the REST API with userId, title, and body. Badge increments in under 1 second.

User reads it

Click the notification in the inbox, or mark as read via API. Badge decrements.

Embed the widget

layout.html

<!-- Add to your app layout -->
<script
  src="https://api.notilayer.com/widget/widget.js"
  data-app-id="YOUR_APP_ID"
></script>

// The bell icon appears automatically
// Unread badge updates in real time via SSE
// No custom WebSocket code required

Send a notification

terminal

curl -X POST https://api.notilayer.com/v1/notify \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "userId": "user_456",
    "title": "New comment on your post",
    "body": "Sarah replied to your design review."
  }'

// Badge count increments instantly
// User sees "1" on the bell icon

Use Cases

When an unread badge drives engagement

The badge creates a subtle pull. Users check in more often when they know something is waiting. Explore our bell integration guide for setup tips.

Task Assignments

A team member assigns a task to you. The badge increments. You know there is work waiting before you even open the task board.

Comment Replies

Someone replied to your comment or review. The badge tells them at a glance without sending yet another email.

Billing Alerts

Payment failed, trial ending, or invoice ready. The unread badge ensures the admin sees it during their next session.

Feature Launches

Announce a new feature to the right user segment. The badge draws attention without being intrusive.

System Status

Maintenance scheduled or incident resolved. Users see the badge count and read the details at their convenience.

Async Job Results

Export complete, report generated, or deploy finished. The badge appears the moment the job is done. No need to poll or refresh.

FAQ

Unread badge questions

How do I add an unread notification count badge to my web app?

With Notilayer, add a single script tag to your app layout. The widget renders a bell icon with a real-time unread count badge automatically. When you send notifications via the REST API, the badge updates instantly through Server-Sent Events. No custom WebSocket or polling code needed.

Does the unread badge update in real time without page refresh?

Yes. Notilayer uses Server-Sent Events (SSE) to push updates to the browser. When a new notification is sent via the API, the badge count increments in under one second without requiring a page reload or manual polling.

Can I customize the appearance of the notification badge?

Yes. The Notilayer widget runs inside a Shadow DOM for style isolation, but you can configure the badge color, position, and bell icon style through the dashboard. The widget adapts to light and dark themes automatically.

Should I build a notification badge from scratch or use a hosted widget?

Building from scratch requires implementing real-time connections (WebSocket or SSE), read/unread state management, badge count syncing, and offline recovery. A hosted widget like Notilayer handles all of this out of the box, saving weeks of engineering time. You can be live in under 10 minutes.

Explore more: Home · Add Bell to React App · Embeddable Widget · Unread Count in React · Vue.js Guide · Notification Bell Guide

Add an Unread Badge in Minutes

One script tag. Real-time count. No WebSocket code. Free plan included.

Get Started Free View Pricing