Widget

One Script Tag. Every Framework. Zero Conflicts.

Embed a full notification bell and inbox in any web app. Shadow DOM isolation means zero CSS conflicts — works alongside Tailwind, Bootstrap, or any design system. No npm package, no build step changes.

Get Started Free Learn More

How It Works

Three steps. No complexity.

Add a notification widget to your app in under five minutes. No packages, no build changes, no framework lock-in.

Add the script tag

Paste one line into your HTML. Works in any framework — React, Vue, Angular, Svelte, Next.js, or plain HTML.

index.html

<!-- Add this to any HTML page -->
<script
  src="https://api.notilayer.com/widget/widget.js"
  data-app-id="YOUR_APP_ID"
  defer
></script>

Identify the user

Call identify() after your user logs in. The bell icon and inbox render automatically inside a Shadow DOM.

app.js

// Identify the logged-in user
window.Notilayer.identify('user_123');

// Widget renders a bell icon + inbox
// inside a Shadow DOM — zero CSS conflicts

Send via REST API

Send notifications with a plain fetch call from any backend. No SDK required. Delivered in real time via SSE.

server.js

// Send a notification from any backend
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: 'New comment',
    body: 'Someone replied to your post.',
  })
});

Shadow DOM Isolation

Why Shadow DOM matters for embeddable widgets

Most embeddable widgets inject CSS into your page. That means style conflicts — your .btn class overrides the widget's buttons, or the widget's reset styles break your layout. Shadow DOM eliminates this entirely.

The Notilayer widget renders inside a Shadow DOM boundary. Your styles stay on your side. The widget's styles stay on its side. No leaking in either direction.

No CSS conflicts with Tailwind, Bootstrap, or custom stylesheets
No style leaks from the widget into your application
Works with any CSS methodology — BEM, CSS Modules, Styled Components
Widget always renders correctly, regardless of your global styles

Without Shadow DOM

Widget styles leak into your app. Your global CSS overrides widget buttons, fonts, and colors. Every framework update risks breaking the widget.

With Shadow DOM (Notilayer)

Complete style isolation. The widget looks and works the same in every app, every framework, every CSS setup. No conflicts, no surprises.

Framework Agnostic

Works with every framework. No adapter needed.

Because it is a script tag — not an npm package — there is no framework coupling. The same integration works everywhere.

React

Vue

Angular

Svelte

Next.js

Nuxt

</>

Plain HTML

Widget Features

Everything a notification widget needs

A complete notification experience, embedded in your app with a single script tag.

Bell icon

A floating bell icon that users click to open the notification inbox. Positioned automatically, customizable via the dashboard.

Inbox dropdown

A scrollable notification inbox that opens on click. Shows notification title, body, and timestamp. No separate page needed.

Unread badge

A red counter badge on the bell icon showing the number of unread notifications. Updates in real time as new notifications arrive.

Read/unread states

Notifications are marked as read when the user views them. Visual distinction between read and unread items in the inbox.

Real-time updates

Notifications arrive via Server-Sent Events (SSE) with sub-second latency. No polling, no WebSocket setup, no infrastructure to manage.

Customizable

Configure position, colors, and branding from the dashboard. Match the widget to your app's look and feel without writing CSS.

REST API

Send notifications with a plain fetch call

No SDK to install. No client library to configure. Send a POST request with your API key, the user ID, and the notification content. Notilayer delivers it to the user's browser in real time via SSE.

Works from any language — Node.js, Python, Go, Ruby, PHP, Java
Plain HTTP — use fetch, curl, axios, or any HTTP client
Sub-second delivery via Server-Sent Events
No SDK dependency — no version conflicts, no breaking changes

Send a notification

server.js

// Send a notification from any backend
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: 'New comment',
    body: 'Someone replied to your post.',
  })
});

FAQ

Embeddable widget questions

What is Shadow DOM and why does it matter for notification widgets?

Shadow DOM is a browser standard that creates an isolated DOM tree with its own scoped styles. The Notilayer widget renders inside a Shadow DOM, which means your application's CSS — whether Tailwind, Bootstrap, or custom styles — will never leak into the widget, and the widget's styles will never affect your app. This guarantees the widget looks correct regardless of your design system.

Do I need to install an npm package?

No. Notilayer works via a single script tag added to your HTML. There is no npm package to install, no build step changes, and no framework-specific wrapper to configure. The script loads asynchronously and initializes the widget automatically.

Which frameworks does the widget work with?

The Notilayer widget works with every frontend framework and library — React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, and plain HTML. Because it loads via a script tag and renders inside a Shadow DOM, there is no framework coupling. It works the same way everywhere.

Can I customize the widget appearance?

Yes. You can customize the widget's position, colors, and branding from the Notilayer dashboard. The widget supports theme configuration so it can match your application's look and feel while still maintaining Shadow DOM isolation.

Explore more: Home · React Notification Bell · Vue Notifications · Angular Notifications · Next.js Integration · Node.js Backend

Embed Notifications in Your App Today

One script tag. Shadow DOM isolation. Every framework. Free plan included.

Get Started Free View Pricing