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:
NotificationBar is an in-app
way to alert user. NotificationBar has a variety of options like icon, actions, timeout.
Flex uses the standard Browser Notification API 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, 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. 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.
_10interface 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 and a list of standard notifications are available in Flex API docs.
_22Flex.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});
_10Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask = () => {_10 Flex.Notifications.showNotification("customNotification");_10}
_10Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask = (notification) => { _10 notification.content = "Hello, world!"; _10};
_10Flex.DefaultTaskChannels.Chat.notifications.override.IncomingTask = (notification) => { _10 notification.content = "Hello, world!"; _10};
_10Flex.MainContainer.defaultProps.showNotificationBar = false;
_10Flex.Notifications.registeredNotifications.delete("notification_id");
_10const notification = Flex.Notifications.registeredNotifications.get("notificationId");_10if (notification) {_10 notification.content = "Display some text";_10}
_10flex.manager.getInstance().strings.myNotification = "Current time: {{time}}"_10const notification = Flex.Notifications.registeredNotifications.get("notificationId");_10if (notification) {_10 notification.content = "myNotification";_10}_10Flex.Notifications.showNotification("notificationId", {time: Date.now()})
Read more about overriding strings in Overview of Flex UI programmability.
_10const notification = Flex.Notifications.registeredNotifications.get("notificationId");_10if (notification) {_10 notification.content = <MyAwesomePopup/>;_10}
_10const notification = Flex.Notifications.registeredNotifications.get("PendingReservationsOnActivityStateChange");_10if (notification) {_10 notification.content = "Some text to display";_10 notification.backgroundColor = "blue";_10 notification.closeButton = false;_10}
_10Flex.Notifications.registerNotification({_10 id: "myNotificationId",_10 content: "Custom content", // string_10 type: NotificationType.error_10});
_10Flex.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.
_25interface CustomNotificationProps extends NotificationContentProps {_25 customProp?: string;_25 notificationContext?: any;_25}_25_25export 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_25Flex.Notifications.registerNotification({_25 id: "myNotificationId",_25 content: <CustomNotificationElement customProp="custom prop" />,_25 type: NotificationType.error_25 } _25);
_10Flex.Notifications.showNotification("myNotificationId", undefined);
_10Flex.Notifications.showNotification("myNotificationId", { message: "custom context" } );
_10import * as Flex from "@twilio/flex-ui";_10_10Notifications.addListener("beforeAddNotification", (payload) => {_10 console.log("<---beforeTransferTask Listener--->", payload);_10});