@notifizz/vanilla

Embed the Notifizz notification center and control it from vanilla JavaScript or TypeScript (no framework). Use createNotifizz to get an API that lets you mount the widget, subscribe to state, attach a custom bell button, and open/close the panel.

Installation

npm install @notifizz/vanilla
# or
yarn add @notifizz/vanilla

Usage

import { createNotifizz } from '@notifizz/vanilla';

const nz = createNotifizz({
  apiKey: 'YOUR_FRONT_API_KEY',
  token: 'USER_FIREBASE_TOKEN_OR_BACKEND_TOKEN',
  authType: 'backendToken',
  userEmail: '[email protected]',
  userId: '12345',
  position: 'top-right',
});

// Mount the notification center (creates a div or uses the one you pass)
nz.mount();

// Optional: use your own bell button
const myButton = document.getElementById('my-bell');
nz.setBellElement(myButton);

// React to state changes (e.g. update a custom badge)
nz.onBellUpdate((ctx) => {
  console.log('Unread:', ctx.unreadCount);
  myButton.setAttribute('data-unread', String(ctx.unreadCount));
});

// Programmatic control
nz.open();
nz.close();
nz.toggle();

Use authType: 'backendToken' when using a backend-generated token; then provide userEmail and userId. Use authType: 'firebase' for Firebase ID tokens.

Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | apiKey | string | Yes | Your Notifizz front API key. | | token | string | Yes | Auth token (Firebase ID token or backend token). | | authType | 'firebase' | 'backendToken' | Yes | How the user is authenticated. | | position | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | No | Bell position. | | notificationCenterStyles | { marginTop?: string } | No | Styles for the notification center. | | bellStyles | { marginRight?: string; marginLeft?: string } | No | Styles for the bell. | | userEmail | string | If authType === 'backendToken' | User email. | | userId | string | If authType === 'backendToken' | User ID. | | serverUrl | string | No | Override widget server URL. | | apiUrl | string | No | Override API base URL. | | widgetPath | string | No | Override widget script path. | | mountId | string | No | ID of the mount element (default: "notifizz-notifications"). |

Returned API

| Method | Description | |--------|-------------| | mount(element?) | Mount the notification center. Pass an HTMLElement to use it, or omit to create a div with mountId. Returns the mount element. | | getState() | Current state: { isReady, isOpen, unreadCount, lastUpdated }. | | onReady(cb) | Register a callback when the widget is ready. Returns an unsubscribe function. | | onStateChange(cb) | Register a callback when state changes. Returns an unsubscribe function. | | onBellUpdate(cb) | Register a callback with bell context (unreadCount, toggle, open, close, etc.); called on state changes. Returns an unsubscribe function. | | setBellElement(el) | Attach a custom bell element; clicks will call toggle. Pass null to detach. | | toggle() | Toggle the notification panel. | | open() | Open the notification panel. | | close() | Close the notification panel. | | destroy() | Remove the mount element and all event listeners. |

When you are done (e.g. on route change or teardown), call nz.destroy() to clean up.