Description of icon
Flex UI
API Reference

Notifications

Predefined Flex UI notifications

OutboundCallCanceledGeneric#

Warning notification shown when outbound call fails. It renders with an action to redial the outbound call. It uses {@link Strings.OutboundCallFailedNotificationTitle}

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.OutboundCallCanceledGeneric);

OutboundCallCanceledBusy#

Warning notification shown when outbound call fails due to other party being busy. It renders with an action to redial the outbound call. It uses {@link Strings.OutboundCallFailedNotificationTitleBusy}

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.OutboundCallCanceledBusy);

OutboundCallCanceledNoAnswer#

Warning notification shown when outbound call fails due to other party not answering. It renders with an action to redial the outbound call. It uses {@link Strings.OutboundCallFailedNotificationTitleNoAnswer}

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.OutboundCallCanceledNoAnswer);

OutboundCallCanceledInvalidNumber#

Warning notification shown when outbound call fails due to invalid number being called. It uses {@link Strings.OutboundCallFailedNotificationTitleInvalidNumber}

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.OutboundCallCanceledInvalidNumber);

OutboundCallCanceledDisabledCountry#

Warning notification shown when outbound call fails due to calls to that country not being enabled. It uses {@link Strings.OutboundCallFailedNotificationTitleDisabledCountry}

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.OutboundCallCanceledDisabledCountry);

OutboundCallCanceledFromNumberUnverified#

Warning notification shown when outbound call fails due to the 'from' number not being verfied for the account. It uses {@link Strings.OutboundCallFailedNotificationTitleFromNumberUnverified}

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.OutboundCallCanceledFromNumberUnverified);

noInputDevice#

Error Notification shown when there are no audio input devices It renders {@link Strings.InputDeviceErrorNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.NoInputDevice);

BrowserVoiceDisabled#

Error notification shown when an agent receives a phone call but Twilio Voice SDK has been disabled. It renders {@link Strings.BrowserVoiceDisabledNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.browserVoiceDisabled);

MicTaken#

Error notification shown when the microphone is not available in a call. It renders {@link Strings.MicNotAvailableNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.MicTaken);

AudioPlayerDeniedErrorNotificationId#

Error Notification shown when an audio cannot be played because of missing permissions. It renders {@link Strings.AudioPlayerDeniedError}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.AudioPlayerDeniedErrorNotificationId);

AudioPlayerInvalidMediaErrorNotificationId#

Error notification shown when an audio cannot be played because of an invalid media is provided. It renders {@link Strings.AudioPlayerInvalidMediaError}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.AudioPlayerInvalidMediaErrorNotificationId);

AudioPlayerGenericErrorNotificationId#

Error notification shown when an audio cannot played for non specified reasons. It renders {@link Strings.AudioPlayerGenericError}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.AudioPlayerGenericErrorNotificationId);

MessageSizeExceeded#

Error notification shown when trying to submit a chat message that exceeds its characters limit. It renders {@link Strings.MessageSizeExceeded}.

Properties:

  • payload: object

    Payload object.

    • currentCharCount: number - Number of characters currently in MessageInput.
    • maxCharCount: number - Max number of characters allowed in the MessageInput for this specific channel.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.messageSizeExceeded, {
currentCharCount: bodyTextLength,
maxCharCount: charLimit
});

ChatOrchestrationAddToConversationFailed#

Error notification shown when worker fails to join a new conversation (chat orchestration) It renders {@link Strings.ChatOrchestrationAddToConversationFailed}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.ChatOrchestrationAddToConversationFailed);

ChatOrchestrationDeactivateConversationFailed#

Error notification shown when an error occurs while deactivating a conversation (chat orchestration) It renders {@link Strings.ChatOrchestrationDeactivateConversationFailed}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.ChatOrchestrationDeactivateConversationFailed);

ChatOrchestrationLeaveConversationFailed#

Error notification shown when an error occurs while leaving a conversation (chat orchestration) It renders {@link Strings.ChatOrchestrationLeaveConversationFailed}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.ChatOrchestrationLeaveConversationFailed);

FlexUiVersionDeprecated#

Warning notification shown when the current version of Flex is deprecated. It renders {@link Strings.UiVersionDeprecated}.

Properties:

  • payload: object

    Payload object.

    • message: string - Actual error message.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.AudioPlayerGenericErrorNotificationId, {
message: "error message"
});

FlexSessionExpired#

Warning notification shown when a worker's token expires. It renders {@link Strings.SessionExpired}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.FlexSessionExpired);

RequestBrowserNotificationPermissions#

Warning Notification for asking for browser notification rights. It renders {@link Strings.RequestBrowserNotificationPermissions}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.RequestBrowserNotificationPermissions);

NoNetworkConnection#

Warning Notification shown when there is no network connection. It renders {@link Strings.ReconnectingConnection}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.NoNetworkConnection);

DegradedModeActive#

Warning Notification shown when flex is degraded. It renders {@link Strings.DegradedWarning}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.DegradedModeActive);

AddingCommentFailed#

Error notification shown when adding a comment in the conversation screen fails. It renders {@link Strings.AddingCommentFailed}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.AddingCommentFailed);

AddingAssessmentFailed#

Error notification shown when adding an assessment in the conversation screen fails. It renders {@link Strings.AddingAssessmentFailed}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.AddingAssessmentFailed);

GlobalSLSaveSuccess#

Notification shown when SL global metrics have been saved successfully. It renders {@link Strings.GlobalSLSuccessNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.GlobalSLSaveSuccess);

SLAPreferencesCustomLevelsSuccess#

Notification shown when custom service levels for a queue have been saved successfully. It renders {@link Strings.SLAPreferencesCustomLevelsSuccessNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.SLAPreferencesCustomLevelsSuccess);

SLAPreferencesCustomLevelsError#

Notification shown when SL global metrics have failed to be saved successfully It renders {@link Strings.SLAPreferencesCustomLevelsError}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.SLAPreferencesCustomLevelsError);

MonitoringFailed#

Error notification shown when an error occurs while starting monitoring a task. It renders {@link Strings.MonitoringFailedNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.MonitoringFailed);

ExternalWarmTransferFailed#

Notification shown when External Warm Transfer fails. It renders {@link Strings.ExternalWarmTransferFailed}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.ExternalWarmTransferFailed);

FailedToFetchParticipants#

Notification shown when failing to fetch interaction participants. It renders {@link Strings.FailedToFetchParticipants}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.FailedToFetchParticipants);

PendingReservationsOnLogout#

Error Notification shown when agents try to logout while having a pending reservation. It renders {@link Strings.PendingReservationsOnLogoutNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.PendingReservationsOnLogout);

PendingReservationsOnActivityStateChange#

Error notification shown when agents try to change activity state while having a pending reservation. It renders {@link Strings.PendingReservationsOnActivityStateChangeNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.activityCannotBeChangedWhenPendingTasks);

WorkerActivityUpdateFailed#

Error notification shown when agents fails to change activity state due to a service error. It renders {@link Strings.WorkerActivityUpdateFailedNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.WorkerActivityUpdateFailed);

TransferFailed#

Error notification shown when a call transfer fails. It renders {@link Strings.TransferFailedNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.TransferFailed, { reason: "failed reason"});

taskCannotBeTransferred#

Error notification shown when a task cannot be transferred. It renders {@link Strings.TaskCannotBeTransferredNotification}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.TaskCannotBeTransferred);

IncomingTask#

Notification for incoming task, with most properties dependent on task channel in question.

Properties:

  • payload: object

    Payload object.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.IncomingTask, { task: taskObject });

CannotChangeOtherWorkerActivity#

Error notification shown when supervisor tries to change activity state of an agent with a pending reservation. It renders {@link Strings.CannotChangeOtherWorkerActivity}.

Example:

import { Notifications, NotificationIds } from "@twilio/flex-ui";
Notifications.showNotification(NotificationIds.CannotChangeOtherWorkerActivity);

NewChatMessage#

Notification shown when new chat message is received It renders title as {@link Strings.NewChatMessageNotificationTitle} and body as {@link Strings.NewChatMessageNotificationBody}

Properties:

  • payload: object

    payload object

    • lastMessage: ChatChannelState.MessageState - last message object

Example:

import { Notifications, NotificationIds, StateHelper, ChatChannelHelper } from "@twilio/flex-ui";
const channelState = StateHelper.getChatChannelStateForTask(task);
const chatChannelHelper = new ChatChannelHelper(channelState);
Notifications.showNotification(NotificationIds.NewChatMessage, {
lastMessage: chatChannelHelper.lastMessage
});

Need some help?