Documentation Index Fetch the complete documentation index at: https://notifizz.com/llms.txt
Use this file to discover all available pages before exploring further.
Frontend quickstart This guide shows you how to embed the Notification Center widget in your frontend. Pick your framework and follow along.
You will need your Front API Key from the Notifizz dashboard . If you are using backend token authentication, you will also need the token generated by your backend. See authentication . Choose your framework 1. Install npm install @notifizz/react
2. Add the Inbox component import NotifizzInbox from "@notifizz/react" ; function App () { return ( < div > < NotifizzInbox options = { { apiKey: "YOUR_FRONT_API_KEY" , authType: "backendToken" , token: "TOKEN_FROM_YOUR_BACKEND" , userId: "user_1" , userEmail: "alice@example.com" , position: "top-right" , } } onReady = { () => console . log ( "Notifizz is ready!" ) } /> { /* Your app content */ } </ div > ); }
A bell icon appears in the specified position. Click it to open the Notification Center. 3. (Optional) Use the Provider for app-wide access If you need to access notification state from multiple components: import { NotifizzProvider , useNotifizz } from "@notifizz/react" ; function App () { return ( < NotifizzProvider options = { { apiKey: "YOUR_FRONT_API_KEY" , authType: "backendToken" , token: "TOKEN_FROM_YOUR_BACKEND" , userId: "user_1" , userEmail: "alice@example.com" , } } > < Header /> < MainContent /> </ NotifizzProvider > ); } function Header () { const { unreadCount , toggle } = useNotifizz (); return ( < header > < button onClick = { toggle } > Notifications ( { unreadCount } ) </ button > </ header > ); }
1. Install npm install @notifizz/angular
2. Import the component import { Component } from "@angular/core" ; import { NotifizzAngularComponent } from "@notifizz/angular" ; @ Component ({ selector: "app-root" , standalone: true , imports: [ NotifizzAngularComponent ], template: ` <notifizz-bell [options]="{ apiKey: 'YOUR_FRONT_API_KEY', authType: 'backendToken', token: 'TOKEN_FROM_YOUR_BACKEND', userId: 'user_1', userEmail: 'alice@example.com', position: 'top-right' }" (ready)="onReady()" ></notifizz-bell> ` , }) export class AppComponent { onReady () { console . log ( "Notifizz is ready!" ); } }
1. Install npm install @notifizz/vanilla
import { createNotifizz } from "@notifizz/vanilla" ; const notifizz = createNotifizz ({ apiKey: "YOUR_FRONT_API_KEY" , authType: "backendToken" , token: "TOKEN_FROM_YOUR_BACKEND" , userId: "user_1" , userEmail: "alice@example.com" , position: "top-right" , }); // Mount to the document body notifizz . mount (); // Listen for the widget to be ready notifizz . onReady (() => { console . log ( "Notifizz is ready!" ); });
Via script tag (no bundler) If you are not using a bundler, you can load the widget directly: < div id = "notifizz-notifications" ></ div > < script type = "module" > import { createNotifizz } from "https://cdn.jsdelivr.net/npm/@notifizz/vanilla/+esm" ; const notifizz = createNotifizz ({ apiKey: "YOUR_FRONT_API_KEY" , authType: "none" , userId: "user_1" , userEmail: "alice@example.com" , }); notifizz . mount ( document . getElementById ( "notifizz-notifications" )); </ script >
Verify it works
Bell visible
Open your app — the bell icon should appear in the position you configured.
Trigger an event
Send an event from your backend targeting the same user ID you configured in the widget.
Notification received
The bell badge should update and the notification should appear in the notification center. It’s real-time — no refresh needed.
Next steps
Authentication guide Understand and configure the right auth strategy for production.
SDK references Explore the full API for your framework.
