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

React
Angular
Vanilla JS

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

Backend ready

Make sure your backend is tracking events (see backend quickstart).

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.

Introduction

Concepts

Quickstart

Event Tracking

Notification Center

Authentication

Frontend quickstart

Frontend quickstart

Choose your framework

1. Install

2. Add the Inbox component

3. (Optional) Use the Provider for app-wide access

1. Install

2. Import the component

1. Install

2. Create and mount the widget

Via script tag (no bundler)

Verify it works

Next steps

Authentication guide

SDK references

Introduction

Concepts

Quickstart

Event Tracking

Notification Center

Authentication

​Frontend quickstart

​Choose your framework

​1. Install

​2. Add the Inbox component

​3. (Optional) Use the Provider for app-wide access

​1. Install

​2. Import the component

​1. Install

​2. Create and mount the widget

​Via script tag (no bundler)

​Verify it works

​Next steps

Authentication guide

SDK references

Frontend quickstart

Choose your framework

1. Install

2. Add the Inbox component

3. (Optional) Use the Provider for app-wide access

1. Install

2. Import the component

1. Install

2. Create and mount the widget

Via script tag (no bundler)

Verify it works

Next steps