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);
});ヘルプが必要ですか？
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.