Notifications Framework

Notifications Framework allows you to:

Tap into standard UI notifications and customize them by turning them off or customizing how notifications are displayed
Register your custom UI notifications and specify how to render them

Available methods of Notification Framework

Method	Description
registerNotification(notification: Notification)	register a custom notification
showNotification(id: string, context?: Object): Notification	dispatch a notification
dismissNotification(notification: Notification)	dismiss a notification
dismissNotificationById(id: string)	dismiss a notification by Id
dismissAll()	dismiss all notifications

Notification object properties

Property	Type	Description
id	string	notification Id
content	string \| React.ReactChild \| React.ReactElement<NotificationContentProps>;	content of the notifications, can be a text, a template or custom React component
type	string	information = "information", success = "success", warning = "warning", error = "error"
backgroundColor?	string	background color for notification bar
icon?	string	notification icon for notification bar
timeout?	number	time in milliseconds that notification bar is visible before automatically dismissed; default is 3000 milliseconds; if set to 0, then notification bar will not be automatically dismissed
closeButton?	boolean	if set to false, notification bar will not have a close button to be dismissed manually
context?	object	context variables that can be used in content templates

Standard notification types

NotificationsBar

List of standard notifications

NotificationId	Notification type	Description	Default text of the notification	UI template code
PendingReservationsOnLogout	error	A logout is forbidden while an agent has pending reservations	Unable to perform action: Worker WKxxx cannot have its activity updated while it has N pending reservations.	NotificationMessage
PendingReservationsOnActivityStateChange	error	Actitivity state cannot be changed while an agent has pending reservations	Unable to perform action: Worker WKxxx cannot have its activity updated while it has N pending reservations.	NotificationMessage
TransferFailed	error	Task transfer failed due to recipient agent being unavailable	Agent unavailable	TransferFailedNotification

Examples of how to customize standard or register your custom notifications

How to turn off standard notification?

Do not show notificationBar notifications

MainContainer.defaultProps.showNotificationBar = false;

Disable notification by ID

Notifications.registeredNotifications.delete("notification_id");

How to customize standard notifications?

Change text of the notification

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

Change text of the notification with template

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

Render custom component in a notification

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

Change props of the notification

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

How to register your own notification?

Option 1: string

Notifications.registerNotification({
id: "PendingReservationsOnLogout",
content: "Logout failed", // string
type: NotificationType.error
});

Option 2: template

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

Read more about templates in Localization and UI templating

Option 3: custom React component

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: "PendingReservationsOnLogout",
    content: <CustomNotificationElement customProp="custom prop" />,
    type: NotificationType.error
    } 
);

How to dispatch your own notification?

Option 1: string

Notifications.showNotification("PendingReservationsOnLogout", null);

Option 2 & 3: template & custom React component

Notifications.showNotification("PendingReservationsOnLogout", { message: "custom context" } );

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.

Thanks for rating this page!

Need some help?