Skip to main content

​
Notifizz frontend quickstart

Embed the Notification Center widget in your app. Pick the SDK that matches your stack — they wrap the same widget and expose the same options.

​
TL;DR

  • Install @notifizz/react, @notifizz/angular, or @notifizz/vanilla.
  • Pass apiKey (Front API Key) + an auth mode (firebase, backendToken, or none for dev).
  • The bell renders in the position you configure; updates stream in real-time — no polling.
Get your Front API Key from the Notifizz dashboard. If you use backendToken mode, your backend also needs to call client.generateHashedToken(userId) and ship the result to the frontend (backend quickstart covers that step).

​
Choose your framework

​
1. Install

npm install @notifizz/react

​
2. Render the inbox

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_42",
          userEmail: "alice@example.com",
          position: "top-right",
        }}
        onReady={() => console.log("widget ready")}
      />
      {/* your app */}
    </div>
  );
}
A bell icon appears in the configured position. Click it to open the Notification Center.

​
3. (Optional) Provider for app-wide state

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_42",
        userEmail: "alice@example.com",
      }}
    >
      <Header />
      <MainContent />
    </NotifizzProvider>
  );
}

function Header() {
  const { unreadCount, toggle } = useNotifizz();
  return (
    <button onClick={toggle}>Notifications ({unreadCount})</button>
  );
}
Going beyond the bell? Notifizz Certified Partners lead complete notification programmes — events wired in your backend, enrichers fetching live profile data, AI/MCP set up to author campaigns, brand and templates ready, team trained. The fastest way to ship a measurable programme. Find a partner →

​
Verify

1

Backend ready

Your backend tracks events (backend quickstart).
2

Bell visible

Open your app — the bell icon appears in the configured position.
3

Trigger an event

Send an event from your backend whose recipient resolves to the same userId you passed to the widget.
4

Notification received

The bell badge updates and the notification appears in the dropdown — real-time, no refresh.

​
FAQ

The widget is connected, but no message has been delivered to this userId yet. Check three things: (1) the campaign in the dashboard is Live (or Dev on dev environments); (2) the event you fired resolves to the same userId you passed to the widget; (3) check the dashboard delivery history — if the message shipped server-side but doesn’t appear, the auth identity probably mismatches.
Auth failed. Check the browser console — the widget logs the auth error. Common causes: stale token, wrong authType, expired Front API Key. Inspect state.hasError / state.errorCode for a typed signal.
If your app already uses Firebase Auth, use firebase — zero backend changes. Otherwise use backendToken, generated server-side via client.generateHashedToken(userId) from your Notifizz Node SDK. See authentication overview.
Yes — render NotifizzInbox (or the Angular component / vanilla mount) only when the user is authenticated and you have the token. The widget needs userId + token upfront; mounting it before login wastes a script load.
Destroy the current widget and remount with the new identity. React: conditionally render the provider on userId. Angular: call notifizz.destroy() then notifizz.init(...) from NotifizzService. Vanilla: notifizz.destroy() then createNotifizz(...) again.
The widget shares one real-time stream across every tab of your site by spawning a SharedWorker. If your CSP blocks it, the widget falls back transparently to a per-tab connection — no error, just slightly more network. To get the optimised path, allow the widget origin in worker-src:
Content-Security-Policy: worker-src https://widget.notifizz.com 'self';
Embedded WebViews (Instagram, TikTok, LinkedIn) and Safari before 16.4 don’t ship SharedWorker. Same fallback applies — nothing to do on your side.

​
See also

Work with a Certified Partner

The fastest path from “we want this” to a running, owned programme.

Backend quickstart

Send the events the widget will display.

Authentication overview

Firebase, backend token, publicly-signed JWT, or none.

Notification Center overview

Lifecycle, state model, custom bell, headless mode.