> ## 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 shared concepts

> Concepts common to all Notifizz frontend SDKs — positioning, styling, state model, widget lifecycle, and the bridge event system.

# 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.

## Widget lifecycle

Every frontend SDK follows the same lifecycle:

1. **Load** — The SDK injects the Notifizz widget script into the page.
2. **Authenticate** — The widget authenticates the user based on your `authType` configuration.
3. **Ready** — The widget signals it is ready to display notifications. The `isReady` state becomes `true`.
4. **Active** — The widget listens for real-time updates and keeps the notification list current.
5. **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  |

```javascript theme={null}
{
  position: "top-right"
}
```

## Styling

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

### Bell styles

```javascript theme={null}
{
  bellStyles: {
    marginRight: "20px",
    marginLeft: "10px"
  }
}
```

### Notification Center styles

```javascript theme={null}
{
  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

<Tabs>
  <Tab title="React">
    ```jsx theme={null}
    const { unreadCount, isOpen, isReady } = useNotifizz();
    ```
  </Tab>

  <Tab title="Angular">
    ```typescript theme={null}
    constructor(private notifizz: NotifizzService) {}

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

  <Tab title="Vanilla JS">
    ```javascript theme={null}
    notifizz.onStateChange((state) => {
      console.log(state.unreadCount);
    });
    ```
  </Tab>
</Tabs>

## 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://eu.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](/docs/concepts/authentication) for a full guide on choosing the right strategy.

## Next steps

<CardGroup cols={3}>
  <Card title="React SDK" icon="react" href="/docs/sdks/notification-center/react">
    Full API reference
  </Card>

  <Card title="Angular SDK" icon="angular" href="/docs/sdks/notification-center/angular">
    Full API reference
  </Card>

  <Card title="Vanilla JS SDK" icon="js" href="/docs/sdks/notification-center/vanilla-js">
    Full API reference
  </Card>
</CardGroup>