Frontend shared concepts

All Notifizz frontend SDKs (React, Angular, Vanilla JS) share the same underlying widget and expose the same capabilities through framework-idiomatic APIs. This page covers the concepts that apply across all of them. Every frontend SDK follows the same lifecycle:

Load — The SDK injects the Notifizz widget script into the page.
Authenticate — The widget authenticates the user based on your authType configuration.
Ready — The widget signals it is ready to display notifications. The isReady state becomes true.
Active — The widget listens for real-time updates and keeps the notification list current.
Destroy (optional) — The widget is removed from the DOM and all listeners are cleaned up.

All SDKs expose a way to listen for the ready event and state changes so your app can react accordingly.

Positioning

Control where the bell icon appears using the position option:

Value	Description
`top-right`	Upper-right corner of the viewport
`top-left`	Upper-left corner of the viewport
`bottom-right`	Lower-right corner of the viewport
`bottom-left`	Lower-left corner of the viewport

{
  position: "top-right"
}

Styling

Fine-tune the placement of the bell and the notification center with style options:

Bell styles

{
  bellStyles: {
    marginRight: "20px",
    marginLeft: "10px"
  }
}

Notification Center styles

{
  notificationCenterStyles: {
    marginTop: "50px"
  }
}

These style options let you nudge the widget to align with your app’s layout without writing custom CSS.

State model

All SDKs expose the same NotifizzState object:

Property	Type	Description
`isReady`	`boolean`	`true` once the widget has loaded and authenticated.
`isOpen`	`boolean`	`true` when the notification center dropdown is open.
`unreadCount`	`number`	The current number of unread notifications.
`lastUpdated`	`number`	Timestamp (ms) of the last state change.
`hasError`	`boolean?`	`true` if the widget encountered an error.
`errorCode`	`string?`	Error identifier, if applicable.

How to access state

React
Angular
Vanilla JS

const { unreadCount, isOpen, isReady } = useNotifizz();

constructor(private notifizz: NotifizzService) {}

ngOnInit() {
  this.notifizz.state$.subscribe((state) => {
    console.log(state.unreadCount);
  });
}

notifizz.onStateChange((state) => {
  console.log(state.unreadCount);
});

Programmatic control

All SDKs let you open, close, and toggle the notification center programmatically:

Method	Description
`open()`	Opens the notification center
`close()`	Closes the notification center
`toggle()`	Toggles the notification center open or closed

This is useful for triggering the notification center from a custom button, a keyboard shortcut, or an in-app event.

Custom bell

Every SDK supports replacing the default bell icon with your own UI element. The approach varies by framework:

React — renderBell prop with a render function receiving NotifizzBellContext.
Angular — Content projection via ng-content with a #customBellIcon template reference.
Vanilla JS — setBellElement() method that attaches click handling and unread data attributes.

See each SDK’s reference page for implementation details.

Default URLs

The widget connects to these endpoints by default:

Option	Default value
`serverUrl`	`https://widget.notifizz.com`
`apiUrl`	`https://api.notifizz.com/v1`
`widgetPath`	`/v1/widget.js`

You should not need to change these unless instructed by Notifizz support.

Authentication options

All frontend SDKs accept the same authentication fields:

Option	Type	Required	Description
`apiKey`	`string`	Yes	Your Front API Key from the dashboard.
`authType`	`'firebase' \| 'backendToken' \| 'none'`	Yes	Authentication strategy.
`token`	`string`	For `firebase` and `backendToken`	The auth token.
`userId`	`string`	For `backendToken` and `none`	The user’s unique identifier.
`userEmail`	`string`	For `backendToken` and `none`	The user’s email address.

See Authentication for a full guide on choosing the right strategy.

Next steps

React SDK

Full API reference

Angular SDK

Full API reference

Vanilla JS SDK

Full API reference

Get started

Concepts

Use cases

SDKs

AI & MCP

Environments

Plans & usage

Monitor delivery

Glossary

Frontend shared concepts

Frontend shared concepts

Widget lifecycle

Positioning

Styling

Bell styles

Notification Center styles

State model

How to access state

Programmatic control

Custom bell

Default URLs

Authentication options

Next steps

React SDK

Angular SDK

Vanilla JS SDK

​Frontend shared concepts

​Widget lifecycle

​Positioning

​Styling

​Bell styles

​Notification Center styles

​State model

​How to access state

​Programmatic control

​Custom bell

​Default URLs

​Authentication options

​Next steps

React SDK

Angular SDK

Vanilla JS SDK

Frontend shared concepts

Widget lifecycle

Positioning

Styling

Bell styles

Notification Center styles

State model

How to access state

Programmatic control

Custom bell

Default URLs

Authentication options

Next steps