# Notifications Framework

> \[!NOTE]
>
> For the Flex UI 2.x.x version of this content, see the [Work with Notifications](/docs/flex/developer/ui/work-with-notifications).

Flex UI provides a client-side API to manage notifications in Flex UI.

> \[!NOTE]
>
> The [full reference for the Notification Manager](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/NotificationManager.html) and [a list of standard notifications](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Notifications.html) are available in the Autogenerated Flex UI Documentation.

## What is a notification in Flex?

A notification is an alert that tells the user what state change or error has occurred to a component or page when they are no longer viewing that component or page.

Users can be notified in Flex using a notification bar, browser notifications, or both.

## What are notification framework capabilities?

* Register custom notifications including browser notifications
* Customize standard notifications
* Turn off standard UI notifications
* Override standard notifications per Task Channel Definition
* Customize how standard UI notifications are displayed
* Register your custom UI notifications and specify how to render them

## NotificationBar

NotificationBar is an `in-app` way to alert user. NotificationBar has a variety of options like icon, actions, and timeout. To learn more, see the [Notification Object properties](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/NotificationManager.html#Notification) in the Flex UI API Reference.

![Twilio Flex interface showing an incoming call notification with options to accept or reject.](https://docs-resources.prod.twilio.com/c32d695f9860434e6f855d8f388241622daea23c717ef01624112f263c4178d6.png)

## Browser Notifications

Flex uses the standard [Browser Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification) as the basis for its browser notifications implementation. You can turn on browser notifications in [the Flex UI Admin Dashboard](/docs/flex/admin-guide/core-concepts/flex-ui).

Browser notifications are shown if Flex is not in focus or is minimized.

> \[!WARNING]
>
> Due to [security constraints across browsers](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API), Browser Notifications are not supported when Flex is iframed within a cross-domain webpage. This includes the Salesforce and Zendesk integrations.

### Request permissions

To start showing browser notifications, Flex first needs to get user permission. By default, Flex requests user permission if they haven't been granted or blocked.

If you want to add custom logic around requesting permissions, like requesting it based on some user action in the UI, you can [dispatch](/docs/flex/developer/ui/work-with-notifications) `Notification.requestPermission()` from your custom code.

## NotificationBar actions

A helper component NotificationBar.Action, that can be used to provide a clickable action to notification definition.

```javascript
interface NotificationBarActionProps {
    label: React.ReactText; // Can be simple text string or a template string
    onClick: NotificationBarActionCallback;
    icon?: string;
}
```

## Browser notifications handler

To display a browser notification, use the `options` key with a `browser` tag in it. The Flex UI 1.x.x API Reference contains [an exhaustive list of available properties](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/NotificationManager.html#BrowsernotificationOptions). If no `browser` key is passed to `options`, Flex *will not* show any browser notifications.

## Working with Notifications

### Register a custom notification with Browser notification handler

```javascript
Flex.Notifications.registerNotification({
    id: "customNotification",
    closeButton: true,
    content: "Custom Notification",
    timeout: 0,
    type: NotificationType.warning,
    actions: [
        <NotificationBar.Action
            onClick={(_, notification) => {
                Flex.Notifications.dismissNotification(notification);
            }}
            label="Hello"
            icon="Bell"
        />
    ],
    options: {
      browser: {
          title: "Custom Notification",
          body: "Hello World!"
      }
  }
});
```

### Override standard notifications for a specific task type using Task Channel Definitions API

#### Use custom notification for new reservation of a call task

```javascript
Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask = () => {
  Flex.Notifications.showNotification("customNotification");
}
```

#### Change content of a standard notification for incoming call task

```javascript
Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask = (notification) => {
  notification.content: "Hello, world!";
};
```

#### Change content of a standard notification for new chat message

```javascript
Flex.DefaultTaskChannels.Call.notifications.override.NewChatMessage = (notification) => {
  notification.content = "Hello, world!";
};
```

### Turn off standard notifications

#### Do not show notificationBar notifications

```javascript
MainContainer.defaultProps.showNotificationBar = false;
```

#### Disable notification by ID

```javascript
Notifications.registeredNotifications.delete("notification_id");
```

### Customize standard notifications

#### Change text of the notification

```javascript
const notification = Notifications.registeredNotifications.get("notificationId");
notification.content = "Display some text";
```

#### Change text of the notification with template

```javascript
manager.strings.myNotification = "Current time: {{time}}"
const notification = Notifications.registeredNotifications.get("notificationId");
notification.content = "myNotification";
Notifications.showNotification("notificationId", {time: Date.now()})
```

Read more about templates in [Localization and UI templating](/docs/flex/developer/ui/v1/localization-and-templating).

#### Render a custom component in a notification

```javascript
const notification = Notifications.registeredNotifications.get("notificationId");
notification.content = <MyAwesomePopup/>;
```

#### Change the properties of a notification

```javascript
const notification = Notifications.registeredNotifications.get("PendingReservationsOnActivityStateChange");
notification.content = "Some text to display";
notification.backgroundColor = "blue";
notification.closeButton = false;
```

### Register Custom Notifications

#### Option 1: string

```javascript
Notifications.registerNotification({
id: "myNotificationId",
content: "Custom content", // string
type: NotificationType.error
});
```

#### Option 2: template

```javascript
Notifications.registerNotification({
id: "myNotificationId",
content: "NotificationMessage", // template
type: NotificationType.error
});
```

Read more about templates in [Localization and UI templating](/docs/flex/developer/ui/v1/localization-and-templating).

#### Option 3: custom React component

```javascript
interface CustomNotificationProps extends NotificationContentProps {
   customProp?: string;
   notificationContext?: any;
}

export class CustomNotificationElement extends React.Component<CustomNotificationProps, undefined> {
   render() {
       const { customProp, notificationContext } = this.props;
       return(
           <div>
               {notificationContext.message}
               <div />
               {customProp}
           </div>
       );
   }
}


Notifications.registerNotification({
    id: "myNotificationId",
    content: <CustomNotificationElement customProp="custom prop" />,
    type: NotificationType.error
    }
);
```

### Dispatch Custom Notifications

#### Option 1: string \[#option-1--string-2]

```javascript
Notifications.showNotification("myNotificationId", null);
```

#### Option 2 & 3: template & custom React component

```javascript
Notifications.showNotification("myNotificationId", { message: "custom context" } );
```

### Add custom notification event listeners

```javascript
import * as Flex from "@twilio/flex-ui";

Flex.Notifications.addListener("beforeAddNotification", (payload) => {
  console.log("<---beforeTransferTask Listener--->", payload);
});
```