Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Work with Notifications


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

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 or Browser notifications or both.

With notifications framework, you can:

  • 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 page anchor

NotificationBar is an in-app way to alert user. NotificationBar has a variety of options like icon, actions, timeout.

NotificationBar.

Browser Notifications

browser-notifications page anchor

Flex uses the standard Browser Notification API(link takes you to an external page) as the basis for its browser notifications implementation. Browser notifications can be enabled in the Admin Dashboard of the Flex UI.

Browser notifications are shown if Flex is minimized.

Note, due to security constraints across browsers(link takes you to an external page), Browser Notifications are not supported when Flex is iframed within a cross-domain webpage. This includes the Salesforce and Zendesk integrations.

Requesting permissions

To start showing browser notifications, the user needs to first grant permissions. By default, Flex will request user for permissions if they are not granted or blocked.

If you want to add custom logic around requesting permissions, like request it based on some user action in the UI, then you can dispatch Notification.requestPermission() from your custom code.

Browser notifications handler

To display a browser notification, use the options key with a browser tag in it. Flex API docs contain an exhaustive list of available properties(link takes you to an external page). If no browser key is passed to options, Flex will not show any browser notifications.

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


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

The full reference for the Notification Manager(link takes you to an external page) and a list of standard notifications(link takes you to an external page) are available in Flex API docs.


Register a custom notification with Browser notification handler

register-a-custom-notification-with-browser-notification-handler page anchor

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


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

override-standard-notifications-for-a-specific-task-type-using-task-channel-definitions-api page anchor

Use custom notification for new reservation of a Call task

use-custom-notification-for-new-reservation-of-a-call-task page anchor

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

Change content of a standard notification for incoming call task

change-content-of-a-standard-notification-for-incoming-call-task page anchor

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

Change content of a standard notification for new chat message

change-content-of-a-standard-notification-for-new-chat-message page anchor

_10
Flex.DefaultTaskChannels.Chat.notifications.override.IncomingTask = (notification) => {
_10
notification.content = "Hello, world!";
_10
};


Turn off Standard Notifications

turn-off-standard-notifications page anchor

Do not show notificationBar notifications

do-not-show-notificationbar-notifications page anchor

_10
Flex.MainContainer.defaultProps.showNotificationBar = false;

Disable notification by ID

disable-notification-by-id page anchor

_10
Flex.Notifications.registeredNotifications.delete("notification_id");


Customize Standard Notifications

customize-standard-notifications page anchor

Change text of the notification

change-text-of-the-notification page anchor

_10
const notification = Flex.Notifications.registeredNotifications.get("notificationId");
_10
if (notification) {
_10
notification.content = "Display some text";
_10
}

Change text of the notification with template

change-text-of-the-notification-with-template page anchor

_10
flex.manager.getInstance().strings.myNotification = "Current time: {{time}}"
_10
const notification = Flex.Notifications.registeredNotifications.get("notificationId");
_10
if (notification) {
_10
notification.content = "myNotification";
_10
}
_10
Flex.Notifications.showNotification("notificationId", {time: Date.now()})

Read more about overriding strings in Overview of Flex UI programmability.

Render custom component in a notification

render-custom-component-in-a-notification page anchor

_10
const notification = Flex.Notifications.registeredNotifications.get("notificationId");
_10
if (notification) {
_10
notification.content = <MyAwesomePopup/>;
_10
}

Change props of the notification

change-props-of-the-notification page anchor

_10
const notification = Flex.Notifications.registeredNotifications.get("PendingReservationsOnActivityStateChange");
_10
if (notification) {
_10
notification.content = "Some text to display";
_10
notification.backgroundColor = "blue";
_10
notification.closeButton = false;
_10
}


Register Custom Notifications

register-custom-notifications page anchor

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


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

Read more about overriding strings in Overview of Flex UI programmability.

Option 3: custom React component

option-3-custom-react-component page anchor

_25
interface CustomNotificationProps extends NotificationContentProps {
_25
customProp?: string;
_25
notificationContext?: any;
_25
}
_25
_25
export class CustomNotificationElement extends React.Component<CustomNotificationProps, undefined> {
_25
render() {
_25
const { customProp, notificationContext } = this.props;
_25
return(
_25
<div>
_25
{notificationContext.message}
_25
<div />
_25
{customProp}
_25
</div>
_25
);
_25
}
_25
}
_25
_25
_25
Flex.Notifications.registerNotification({
_25
id: "myNotificationId",
_25
content: <CustomNotificationElement customProp="custom prop" />,
_25
type: NotificationType.error
_25
}
_25
);


Dispatch Custom Notifications

dispatch-custom-notifications page anchor

_10
Flex.Notifications.showNotification("myNotificationId", undefined);

Option 2 & 3: template & custom React component

option-2--3-template--custom-react-component page anchor

_10
Flex.Notifications.showNotification("myNotificationId", { message: "custom context" } );


Add Custom Notification Event Listeners

add-custom-notification-event-listeners page anchor

_10
import * as Flex from "@twilio/flex-ui";
_10
_10
Notifications.addListener("beforeAddNotification", (payload) => {
_10
console.log("<---beforeTransferTask Listener--->", payload);
_10
});


Rate this page: