Menu

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

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

NotificationBar

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" } );
Rate this page:

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.