How to Add In-App Notifications to a React SaaS App

Build vs Buy: The Honest Trade-Off

Every engineering team asks this question. Building an in-app notification system from scratch involves more surface area than you might expect:

• ● Backend infrastructure — a notifications table, an API to create/read/mark-as-read, pagination, and retention policies.
• ● Real-time delivery — WebSockets or SSE to push notifications the moment they are created, plus reconnection logic and offline handling.
• ● Frontend UI — a bell icon, an unread badge counter, a dropdown or drawer, individual notification items, mark-all-as-read, and empty states.
• ● User preferences — letting users control which notifications they receive, and at what frequency.
• ● Segmentation & targeting — sending notifications to specific user groups based on plan, role, or behavior.

For a small team, this can easily consume 2–4 weeks of engineering time — time that could be spent on your core product. A dedicated tool like Notilayer gives you all of the above out of the box, with a free tier to get started. For a comparison of the best options, see our roundup of in-app notification tools.

If you do want to build, the architecture patterns below still apply. But for this tutorial, we will focus on the fastest path: integrating Notilayer into a React SaaS app.

Prerequisites

Before you begin, make sure you have:

• ● A React app (Create React App, Next.js, Vite, or any React setup).
• ● A free Notilayer account. Sign up takes 30 seconds.
• ● Your Notilayer App ID (found in the dashboard under Settings).

Step 1: Add the Notilayer Widget Script

The Notilayer widget is a lightweight JavaScript snippet that renders the notification bell and inbox inside your app. Add the script tag to your HTML shell — typically index.html for CRA/Vite, or _document.tsx for Next.js.

<!-- Add before the closing </body> tag -->
<script src="https://api.notilayer.com/widget/widget.js" defer></script>

The script weighs under 15 KB gzipped and loads asynchronously, so it will not block your page render. Once loaded, it exposes a global Notilayer object you can use to initialize and control the widget.

For more details on embedding, check our guide on the embeddable notification inbox for React.

Step 2: Initialize the Widget

Once the script is loaded, initialize Notilayer with your App ID and the current user's identifier. The best place to do this in React is inside a useEffect hook that runs after authentication.

import { useEffect } from 'react';

function App() {
  const user = useAuth(); // your auth hook

  useEffect(() => {
    if (user && window.Notilayer) {
      window.Notilayer.init({
        appId: 'YOUR_APP_ID',
        userId: user.id,
      });
    }
  }, [user]);

  return (
    {/* Your app content */}
  );
}

Replace YOUR_APP_ID with the ID from your Notilayer dashboard. The userId should be a stable identifier from your authentication system — database ID, Clerk user ID, Auth0 sub, etc.

After initialization, the widget automatically renders a notification bell in the bottom-right corner of your app. Users can click it to open the notification inbox. No additional React components required.

Step 3: Send a Notification via the API

With the widget live, you can now send notifications from your backend. Notilayer provides a simple REST API. Here is how to send a notification using fetch from a Node.js backend:

const response = await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    userId: 'user_123',
    title: 'Your export is ready',
    body: 'Download your CSV file now.',
    url: '/exports/abc123',
  }),
});

The notification appears in the user's inbox in real time — no polling, no page refresh. The url field is optional; when provided, clicking the notification navigates the user to that path.

For full API reference and additional fields (icon, image, action buttons), see the in-app notification API documentation.

Step 4: Set User Attributes for Targeting

Sending the same notification to every user is a blunt instrument. To enable user segmentation, attach attributes to each user. These attributes let you target notifications based on plan, role, lifecycle stage, or any custom property.

window.Notilayer.setAttributes({
  plan: 'pro',
  role: 'admin',
  signupDate: '2025-09-01',
  companyName: 'Acme Inc',
});

Call setAttributes after initialization, ideally right after init(). You can call it again whenever attributes change (e.g., user upgrades their plan).

With attributes in place, you can create segments in the Notilayer dashboard — for example, "Pro plan users who signed up in the last 30 days" — and target notifications to those groups. This is how SaaS teams achieve personalized, relevant messaging at scale.

Step 5: Create Segments in the Dashboard

Head to the Notilayer dashboard and navigate to Segments. Here you can define user groups using the attributes you set in the previous step.

Some powerful segment examples:

• ● Free trial users approaching expiry — nudge them toward upgrading.
• ● Admin users on the Business plan — announce enterprise features.
• ● Users who signed up this week — guide them through onboarding.

When sending a notification via the API, you can target a segment ID instead of a single userId. This sends the notification to every user matching the segment criteria, in real time.

Step 6: Send to a Segment

To broadcast a notification to an entire segment, use the segmentId field instead of userId:

const response = await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    segmentId: 'seg_pro_users',
    title: 'New Feature: Advanced Analytics',
    body: 'Your Pro plan now includes advanced analytics. Check it out!',
    url: '/analytics',
  }),
});

This is especially powerful for feature announcements, plan-specific updates, and lifecycle-driven onboarding. Instead of blasting every user, you reach the people who actually care.

Customizing the Widget Appearance

Notilayer's widget is designed to blend with your existing UI. You can customize its position, colors, and behavior through the init configuration:

window.Notilayer.init({
  appId: 'YOUR_APP_ID',
  userId: user.id,
  position: 'top-right',
  theme: {
    primaryColor: '#3b5bff',
    borderRadius: '12px',
  },
});

You can also mount the widget into a specific container element instead of using the default floating button. This gives you full control over placement — useful if you have an existing header with a bell icon slot.

Best Practices for In-App Notifications

A notification system is only as good as the messages it delivers. Here are some guidelines we have seen work well across hundreds of SaaS products:

Related Articles