Menu

Expand
Rate this page:

Working with Notifications

Register a custom notification with Browser notification handler

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

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

Use custom notification for new reservation of a Call task

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

Change content of a standard notification for incoming call task

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

Change content of a standard notification for new chat message

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

Turn off Standard Notifications

Do not show notificationBar notifications

MainContainer.defaultProps.showNotificationBar = false;

Disable notification by ID

Notifications.registeredNotifications.delete("notification_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: 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;

Register Custom Notifications

Option 1: string

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

Option 2: template

Notifications.registerNotification({
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;
       return(
           <div>
               {notificationContext.message}
               <div />
               {customProp}
           </div>
       );
   }
}


Notifications.registerNotification({
    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" } );

Add Custom Notification Event Listeners

import * as Flex from "@twilio/flex-ui";

Flex.Notifications.addListener("beforeAddNotification", (payload) => {
  console.log("<---beforeTransferTask Listener--->", payload);
});
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 by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

        
        
        

        Thank you for your feedback!

        Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

        Sending your feedback...
        🎉 Thank you for your feedback!
        Something went wrong. Please try again.

        Thanks for your feedback!

        Refer us and get $10 in 3 simple steps!

        Step 1

        Get link

        Get a free personal referral link here

        Step 2

        Give $10

        Your user signs up and upgrade using link

        Step 3

        Get $10

        1,250 free SMSes
        OR 1,000 free voice mins
        OR 12,000 chats
        OR more