Notilayer
Get Started Free
React Integration

Add a Notification Bell to Your React App

Stop building notification UI from scratch. Drop in a real-time bell widget with one script tag and a useEffect hook. Shadow DOM isolation means zero CSS conflicts.

Get Started Free Read the Guide
your-react-app.com
3

New feature available

Try our new dashboard analytics.

Team invite accepted

Sarah joined your workspace.

Export complete

Your CSV is ready to download.

Two-Step Integration

Live in under 10 minutes

No npm packages. No build step changes. Just a script tag and one hook.

1

Add the script tag

<!-- Add to your index.html or _document.tsx -->
<script
  src="https://api.notilayer.com/widget/widget.js"
  defer
></script>
2

Initialize in useEffect

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.Notilayer?.init({
      projectId: 'your-project-id',
      userId: currentUser.id,
    });
  }, [currentUser.id]);

  return <div>...</div>;
}

That is it. The bell icon and notification inbox render automatically. Read our step-by-step React guide for a full walkthrough.

Shadow DOM Isolation

Zero CSS conflicts, guaranteed

The widget renders inside a Shadow DOM. Your styles stay yours. The widget styles stay contained.

Style Encapsulation

Tailwind, Bootstrap, or custom CSS will never break the notification bell. Fully isolated shadow root.

Under 15KB

Gzipped and loaded async with defer. Never blocks your page render or JavaScript execution.

Customizable

Adjust colors, position, and bell style from the dashboard. Match your brand without writing CSS.

Real-Time SSE

Notifications arrive instantly via Server-Sent Events. Lighter than WebSockets, no polling needed.

Next.js Compatible

Works with Next.js out of the box

Use the next/script component for optimized loading. Works with both Pages Router and App Router. No special configuration needed.

  • SSR and SSG compatible — widget loads client-side only
  • No hydration mismatches — Shadow DOM stays outside React tree
  • Works with Vercel, Netlify, or self-hosted deployments
Read the Next.js integration guide → 
// pages/_app.tsx or app/layout.tsx
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      <Script
        src="https://api.notilayer.com/widget/widget.js"
        strategy="afterInteractive"
      />
      {children}
    </>
  );
}

Framework Agnostic

Works with every React-based framework

One script tag works everywhere JavaScript runs. No framework-specific packages to install.

React

CRA, Vite

Next.js

App + Pages Router

Remix

v2+

Gatsby

v4+

FAQ

Common questions about the React notification bell

How do I add a notification bell to my React app without building it from scratch?
Add the Notilayer widget script tag to your HTML, then call window.Notilayer.init() inside a useEffect hook with your project ID and user ID. The bell and inbox render automatically inside a Shadow DOM — no custom UI code needed.
Does the notification bell work with Next.js and other React frameworks?
Yes. The widget is framework-agnostic. It works with Next.js (Pages Router and App Router), Remix, Gatsby, and any React-based framework. Use the next/script component or a standard script tag — both work.
Will the notification widget conflict with my existing styles?
No. The Notilayer widget renders inside a Shadow DOM, which fully encapsulates its HTML and CSS. Your Tailwind, CSS Modules, or styled-components will never interfere with the widget, and the widget styles will never leak into your app.
How long does it take to add in-app notifications to a React app?
Under 10 minutes. The entire integration is two steps: add a script tag to your HTML, and call Notilayer.init() in a useEffect. No npm packages, no build step changes, no backend configuration. You can send your first notification from the dashboard immediately.

Explore more: Home · Next.js Notifications · React Notifications Guide

Add a Notification Bell in 10 Minutes

One script tag. Works with React, Next.js, Remix, and more. Start free.

Get Started Free View Pricing