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

The Flex Notifications Framework allows you to:

  • Turn off standard UI notifications
  • Customize how standard UI notifications are displayed
  • Register your custom UI notifications and specify how to render them


Notifications will be shown in the NotificationsBar. An example of a notification is shown below:


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

Must be unique. An error will be thrown if another notification is already registered with the same id.

content string | React.ReactChild | React.ReactElement<NotificationContentProps> content of the notification. Can be a text, a template or custom React component
type string

notification type. Possible values:

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, the notification bar will not be automatically dismissed

closeButton? boolean if set to false, the notification bar will not have a close button to be dismissed manually
context? object context variables that can be used in content templates.

Default standard notifications

NotificationId Notification type Description Default text of the notification UI template code
PendingReservationsOnLogout error A logout is forbidden while a worker has pending reservations You cannot logout while you have a pending task/reservation


PendingReservationsOnActivityStateChange error Actitivity state cannot be changed while a worker has pending reservations You cannot update your activity while you have a pending task/reservation



error Task transfer failed due to recipient worker being unavailable Agent unavailable



error Voice task accept failed due to Voice SDK being disabled Call cannot be accepted. Twilio Voice SDK has been disabled.



error Accessing the microphone has failed Unable to access microphone, please check browser settings.



error Changing a worker's activity by the supervisor has failed due to the worker having pending reservations You cannot change an agent’s activity while they have a pending task/reservation.


MonitoringFailed error Initiating call monitoring has failed Monitoring attempt has failed


MessageSizeExceeded error Sending chat message has failed due to an exceeded character limit The entered character number exceeds the limit - {{currentCharCount}}/{{maxCharCount}}


ChatOrchestrationAddToChatChannelFailed error The worker could not be added to the chat channel after accepting chat based task Failed to add worker to the chat channel.


ChatOrchestrationDeactivateChatChannelFailed error Chat channel could not be deactivated during wrapping up of chat based task Failed to deactivate the chat channel.


ChatOrchestrationLeaveChatChannelFailed error Could not remove worker from chat channel during wrapping up of chat based task Failed to remove worker from the chat channel.


Working with Notifications

Turn off Standard Notifications

Do not show notificationBar notifications

MainContainer.defaultProps.showNotificationBar = false;

Disable notification by ID


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:})

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;

Register Custom Notifications

Option 1: string

id: "myNotificationId",
content: "Custom content", // string
type: NotificationType.error

Option 2: template

id: "myNotificationId",
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;
               <div />

    id: "myNotificationId",
    content: <CustomNotificationElement customProp="custom prop" />,
    type: NotificationType.error

Dispatch Custom Notifications

Option 1: string

Notifications.showNotification("myNotificationId", null);

Option 2 & 3: template & custom React component

Notifications.showNotification("myNotificationId", { 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.