Description of icon
Flex UI
API Reference

Actions

Predefined UI actions

StartOutboundCall#

Start outbound call

Properties:

  • name: "StartOutboundCall"
  • payload: Actions.StartOutboundCallPayload
    • destination: string - destination phone number to make outbound call.
    • queueSid?: string - queue sid to assign for the task, if undefined it picks the default from service configuration.
    • callerId?: string - caller ID to make an outbound call. if undefined it picks the default from service configuration.
    • taskAttributes?: object - custom attributes to set on task.

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("StartOutboundCall", {
destination: "+1234567",
queueSid: "WQXXXXXXXXXXXXXXXXX"
});

ToggleOutboundDialer#

Toggles visibility of outbound dialer panel.

Properties:

  • name: "ToggleOutboundDialer"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ToggleOutboundDialer");

LeaveChannel#

Leave a conversation channel

Properties:

  • name: "LeaveChannel"
  • payload: Actions.LeaveChannelPayload
    • channelSid: string - The associated channelSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("LeaveChannel", {
channelSid: UOXXXXXXXXXXXXXXXXX
});

PauseChannel#

Pause a conversation channel

Properties:

  • name: "PauseChannel"
  • payload: Actions.PauseChannelPayload
    • channelSid: string - The associated channelSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("PauseChannel", {
channelSid: UOXXXXXXXXXXXXXXXXX
});

ResumeChannel#

Resume a conversation channel

Properties:

  • name: "ResumeChannel"
  • payload: Actions.ResumeChannelPayload
    • channelSid: string - The associated channelSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ResumeChannel", {
channelSid: UOXXXXXXXXXXXXXXXXX
});

GetPausedChannels#

Get all Paused conversation channels

Properties:

  • name: "GetPausedChannels"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("GetPausedChannels");

GetPausedEmailConversations#

Pause an email conversation

Properties:

  • name: "GetPausedEmailConversations"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("GetPausedEmailConversations");

SelectPausedConversation#

Select a pause Conversation in Agent UI. Deselect a current task if any selected and select the conversation.

Properties:

  • name: "SelectPausedConversation"
  • payload: Actions.WorkerActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SelectPausedConversation", { sid: "UOXXXXXXXXXXXXXXXXX" });

HistoryPush#

Add a history entry, leading to view change or redirect

Properties:

  • name: "HistoryPush"
  • location: string

Example:

<caption>Use that action to change current location </caption>
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HistoryPush", "/teams/");

HistoryReplace#

Replace the current location in history

Properties:

  • name: "HistoryReplace"
  • location: string

Example:

<caption>Use that action to replace current location </caption>
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HistoryReplace", "/teams/");

HistoryGo#

Move backwards or forwards a relative number of locations in history

Properties:

  • name: "HistoryGo"
  • location: number

Example:

<caption>Use that action to move between existing locations in history </caption>
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HistoryGo", -1);

HistoryGoBack#

Move backward one location in history

Properties:

  • name: "HistoryGoBack"

Example:

<caption>Use that action to move backward one location in history </caption>
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HistoryGoBack");

HistoryGoForward#

Move forward one location in history

Properties:

  • name: "HistoryGoForward"

Example:

<caption>Use that action to move forward one location in history </caption>
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HistoryGoForward");

ShowDirectory#

Display workers directory at the agent desktop view

Properties:

  • name: "ShowDirectory"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ShowDirectory");

HideDirectory#

Hide workers directory at the agent desktop view

Properties:

  • name: "HideDirectory"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HideDirectory");

ToggleSidebar#

Open or close the sidebar

Properties:

  • name: "ToggleSidebar"
  • payload?: Actions.ToggleSidebarPayload
    • open?: boolean

Example:

<caption>Open the sidebar</caption>
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ToggleSidebar", {open: true});

SetComponentState#

Alters the current state of a component

Properties:

  • name: "SetComponentState"
  • payload: Actions.SetComponentStatePayload
    • name: string
    • state: any

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SetComponentState", { name: "AgentTaskCanvasTabs", state: { selectedTabName: "info" } });

ReloadWindow#

Reload window

Properties:

  • name: "ReloadWindow"
  • payload: Actions.ReloadWindowPayload
    • forceLogin?: boolean

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ReloadWindow", { forceLogin: true });

MonitorCall#

Monitor a provided ongoing call of another agent

Properties:

  • name: "MonitorCall"
  • payload: Actions.TaskInSupervisorPayload | Actions.MonitorTaskPayload
    • task?: ITask - task
    • sid?: string - taskSid
    • extraParams?: any - extra params

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("MonitorCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

StopMonitoringCall#

Stop monitoring a call

Properties:

  • name: "StopMonitoringCall"
  • payload: Actions.TaskInSupervisorPayload
    • task?: ITask - task
    • sid?: string - taskSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("StopMonitoringCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

SelectTaskInSupervisor#

Select a task in Supervisor UI. Deselect a current task if provided task is undefined.

Properties:

  • name: "SelectTaskInSupervisor"
  • payload: Actions.TaskInSupervisorPayload
    • task?: ITask - task
    • sid?: string - taskSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SelectTaskInSupervisor", { sid: "WRXXXXXXXXXXXXXXXXX" });

SelectWorkerInSupervisor#

Select an agent in Supervisor UI. Deselect a current worker if worker is undefined.

Properties:

  • name: "SelectTaskInSupervisor"
  • payload: Actions.SelectWorkerInSupervisorPayload
    • worker?: IWorker - worker
    • workerSid?: string - workerSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SelectWorkerInSupervisor", { workerSid: "WKXXXXXXXXXXXXXXXXX" });

ApplyTeamsViewFilters#

Apply filters to Teams view

Properties:

  • name: "ApplyTeamsViewFilters"
  • payload: Actions.ApplyTeamsViewFiltersPayload
    • filters: Array<AppliedFilter> - array of filters to apply
    • extraFilterQuery?: string - query string for custom filters

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ApplyTeamsViewFilters", {
filters: [
{
name: "data.activity",
condition: FilterConditions.IN,
values: ["Idle"]
}
]
});

ApplyTeamsViewSearch#

Search Teams view agents

Properties:

  • name: "ApplyTeamsViewSearch"
  • payload: Actions.ApplyTeamsViewSearchPayload
    • search: string - search string

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ApplyTeamsViewSearch", {
search: "John Smith"
});

ToggleMute#

Mute current call (if there is one).

Properties:

  • name: "ToggleMute"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ToggleMute");

HangupCall#

Hang up current call (if there is one).

Properties:

  • name: "HangupCall"
  • payload: Actions.VoiceActionPayload
    • task?: ITask - Task
    • sid?: string - taskSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HangupCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

EndCall#

Hang up current call (if there is one).

Properties:

  • name: "EndConferenceForAll"
  • payload: Actions.VoiceActionPayload
    • task?: ITask - Task
    • sid?: string - taskSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("EndConferenceForAll", { sid: "WRXXXXXXXXXXXXXXXXX" });

HoldCall#

Hold current call (if there is one).

Properties:

  • name: "HoldCall"
  • payload: Actions.VoiceActionPayload | Actions.HoldCallActionPayload
    • task?: ITask - Task
    • sid?: string - taskSid
    • participantCallSid?: string - Sid of the participant within the call
    • holdMusicUrl?: string - Request URL to fetch the hold music from
    • holdMusicMethod?: string - Request method to fetch the hold music with

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HoldCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

UnholdCall#

Unhold current call (if there is one).

Properties:

  • name: "UnholdCall"
  • payload: Actions.VoiceActionPayload | Actions.UnholdCallActionPayload
    • task?: ITask - Task
    • sid?: string - taskSid
    • participantCallSid?: string - Sid of the participant within the call

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("UnholdCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

StartExternalWarmTransfer#

Unhold current call (if there is one).

Properties:

  • name: "StartExternalWarmTransfer"
  • payload: Actions.VoiceActionPayload
    • task?: ITask - Task
    • sid?: string - taskSid

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("StartExternalWarmTransfer", { sid: "WRXXXXXXXXXXXXXXXXX" });

AcceptTask#

Accept a task

Properties:

  • name: "AcceptTask"
  • payload: Actions.WorkerActionPayload | Actions.WorkerAcceptTaskActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required
    • conferenceOptions: any - conferenceOptions

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("AcceptTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

RejectTask#

Reject a task.

Properties:

  • name: "RejectTask"
  • payload: Actions.WorkerActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("RejectTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

EndVoiceTask#

Hang up a voice call by invoking the "HangupCall" action. Differently from the latter, if there isn't a voice call to hang up, proceeds to invoke the "CompleteTask" or "WrapupTask" actions, depending on the task status and the taskChannel capabilities.

Properties:

  • name: "EndVoiceTask"
  • payload: Actions.WorkerActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("EndVoiceTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

CompleteTask#

Complete a task that is either pending or assigned. If applicable, will result in WrapupTask action being called.

Properties:

  • name: "CompleteTask"
  • payload: Actions.WorkerActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("CompleteTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

WrapupTask#

Wrap a task (if applicable)

Properties:

  • name: "WrapupTask"
  • payload: Actions.WorkerActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("WrapupTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

SelectTask#

Select a task in Supervisor UI. Deselect a current task if provided task is undefined.

Properties:

  • name: "SelectTask"
  • payload: Actions.WorkerActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SelectTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

SetActivity#

Set an activity of the user (similar to selecting activity from Profile widget).

Properties:

  • name: "SetActivity"
  • payload: Actions.WorkerSetActivityPayload
    • activityAvailable?: boolean - if the activity is available
    • activityName?: string - name of activity
    • activitySid?: string - sid of activity
    • options.rejectPendingReservations?: boolean - if pending reservations should be rejected

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SetActivity", { activitySid: "WAXXXXXXXXXXXXXXXXX" });

SetWorkerActivity#

A supervisor changing a worker status

Properties:

  • name: "SetWorkerActivity"
  • payload: WorkerActions.WorkerSetWorkerActivityPayload

Example:

Actions.invokeAction("SetWorkerActivity", { workerSid: "WKXXXXXXXXXXXXXXXXX", activitySid: "WAXXXXXXXXXXXXXXXXX" })

TransferTask#

Transfer a provided task to a target worker (similar to transferring via Worker Directory)

Properties:

  • name: "TransferTask"
  • payload: Actions.WorkerActionPayload | Actions.TransferTaskPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required
    • targetSid: string - sid of the worker or the queue to be transferred to
    • options?: any - transfer options (see Taskrouter docs for options).

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("TransferTask", {
sid: "WRXXXXXXXXXXXXXXXXX",
targetSid: someWorker.sid,
options: { mode: "COLD"}
});

KickParticipant#

Remove a participant from a call

Properties:

  • name: "KickParticipant"
  • payload: Actions.WorkerActionPayload | Actions.WorkerParticipantActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required
    • targetSid?: string - sid of the participant (either this or participant has to be provided)
    • participant?: ConferenceParticipant - participant object (either this or participant has to be provided)
    • holdMusicUrl?: string - url of audio to play when on hold
    • holdMusicMethod?: string - name of hold music method

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("KickParticipant", {
sid: "WRXXXXXXXXXXXXXXXXX",
targetSid: participant.workerSid
});

CancelTransfer#

Cancel a task that was being transferred to a target worker.

Properties:

  • name: "CancelTransfer"
  • payload: Actions.WorkerActionPayload | Actions.TransferTaskPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required
    • targetSid: string - sid of the worker or the queue to be transferred to
    • options?: any - transfer options (see Taskrouter docs for options).

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("CancelTransfer", { sid: "WRXXXXXXXXXXXXXXXXX" });

Logout#

Try to logout user from current session if there are no current activities preventing it.

Properties:

  • name: "Logout"
  • payload: Actions.WorkerLogoutPayload
    • forceLogout?: boolean - supress an error in case offline activity cannot be set for the worker
    • activitySid?: string - sid of the custom offline activity

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("Logout", { forceLogout: true });

HoldParticipant#

Put a call participant on hold

Properties:

  • name: "HoldParticipant"
  • payload: Actions.WorkerActionPayload | Actions.WorkerParticipantActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required
    • targetSid?: string - sid of the participant (either this or participant has to be provided)
    • participant?: ConferenceParticipant - participant object (either this or participant has to be provided)
    • holdMusicUrl?: string - url of audio to play when on hold
    • holdMusicMethod?: string - name of hold music method

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HoldParticipant", {
sid: "WRXXXXXXXXXXXXXXXXX",
targetSid: participant.workerSid
});

UnholdParticipant#

Unhold a call participant

Properties:

  • name: "UnholdParticipant"
  • payload: Actions.WorkerActionPayload | Actions.WorkerParticipantActionPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required
    • targetSid?: string - sid of the participant (either this or participant has to be provided)
    • participant?: ConferenceParticipant - participant object (either this or participant has to be provided)
    • holdMusicUrl?: string - url of audio to play when on hold
    • holdMusicMethod?: string - name of hold music method

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("UnholdParticipant", {
sid: "WRXXXXXXXXXXXXXXXXX",
targetSid: participant.workerSid
});

ToggleDTMFDialpad#

Show/hide the DTMF Dialpad for a call

Properties:

  • name: "ToggleDTMFDialpad"
  • payload: Actions.WorkerActionPayload | Actions.ToggleDTMFDialpadPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required
    • open: boolean - if dialpad should be opened

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ToggleDTMFDialpad", {
sid: "WRXXXXXXXXXXXXXXXXX",
open: true
});

SetDTMFDialpadDigits#

Sets DTMF sending history for a task

Properties:

  • name: "SetDTMFDialpadDigits"
  • payload: Actions.WorkerActionPayload | ActionPayload.SetDTMFDialpadDigitsPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SetDTMFDialpadDigits", {
sid: "WRXXXXXXXXXXXXXXXXX",
digits: "123"
});

SendDTMFDigits#

Send DTMF sending history for a task. Calls SetDTMFDialpadDigits action internally

Properties:

  • name: "SendDTMFDigits"
  • payload: Actions.WorkerActionPayload | ActionPayload.SendDTMFDigitsPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

// sends tone with digit 5 to the call
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SendDTMFDigits", {
sid: "WRXXXXXXXXXXXXXXXXX",
digits: "5"
});

StartOutboundEmailTask#

Start email task

Properties:

  • name: "StartOutboundEmailTask"
  • payload: ActionPayload.StartOutboundEmailTask

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("StartOutboundEmailTask", {
destination: "customer@company.com",
queueSid: "defaultQueue",
from: "test@flexy.flex",
fromName: "support"
});

SetWorkerAttributes#

Set worker attributes

Properties:

  • name: "SetWorkerAttributes"
  • payload: ActionPayload.SetWorkerAttributesPayload

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SetWorkerAttributes", {
attributes: {
customWorkerAttribute: 1,
contact_uri: "client:workerName"
},
mergeExisting: true
});

UpdateWorkerToken#

Update worker token

Properties:

  • name: "UpdateWorkerToken"
  • payload: ActionPayload.UpdateWorkerTokenPayload

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("UpdateWorkerToken", {
token: "newToken"
});

SetTaskAttributes#

Update task attributes

Properties:

  • name: "SetTaskAttributes"
  • payload: Actions.WorkerActionPayload | ActionPayload.SetTaskAttributesPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SetTaskAttributes", {
sid: "WRxxxxx",
attributes: {},
mergeExisting: true
});

IssueCallToWorker#

Issue a Call to a Worker

Properties:

  • name: "IssueCallToWorker"
  • payload: Actions.WorkerActionPayload | ActionPayload.IssueCallToWorkerPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("IssueCallToWorker", {
callerId: "callerId",
twiMLUrl: "twiMLUrl",
task: myTask
});

DequeueTask#

Dequeue the Reservation to the Worker. This will perform telephony to dequeue a Task that was enqueued using the Enqueue TwiML verb. A contact_uri must exist in the Worker's attributes for this call to go through.

Properties:

  • name: "DequeueTask"
  • payload: Actions.WorkerActionPayload | ActionPayload.DequeueTaskPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("DequeueTask", {
task: myTask
});

RedirectCallTask#

Redirect the active Call tied to this Reservation

Properties:

  • name: "RedirectCallTask"
  • payload: Actions.WorkerActionPayload | ActionPayload.RedirectCallTaskPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("RedirectCallTask", {
callerId: "callerId",
twiMLUrl: "twiMLUrl",
task: myTask
});

UpdateWorkerParticipant#

Update the Worker's leg in the Conference associated to this Reservation

Properties:

  • name: "UpdateWorkerParticipant"
  • payload: Actions.WorkerActionPayload | ActionPayload.UpdateWorkerParticipantPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("UpdateWorkerParticipant", {
task: myTask
});

UpdateCustomerParticipant#

Update the Customer leg in the Conference associated to this Task

Properties:

  • name: "UpdateCustomerParticipant"
  • payload: Actions.WorkerActionPayload | ActionPayload.UpdateCustomerParticipantPayload
    • task?: ITask - targeted task object. Either this or sid property is required
    • sid?: string - targeted task object's sid. Either this or task property is required

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("UpdateCustomerParticipant", {
task: myTask
});

InsightsPlayerPlay#

Shows player and plays recording.

Properties:

  • name: "InsightsPlayerPlay"
  • payload: InsightsPlayerPlayActionPayload

Example:

import * as Flex from "@twilio/flex-ui";
Flex.Actions.invokeAction("InsightsPlayerPlay", {segmentId: "e5c46a75-0f56..."})

InsightsPlayerInitialized#

Invoked when the player is rendered.

Properties:

  • name: "InsightsPlayerInitialized"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("InsightsPlayerInitialized");

InsightsPlayerHide#

Hides the player.

Properties:

  • name: "InsightsPlayerHide"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("InsightsPlayerHide");

InsightsPlayerShow#

Shows the player.

Properties:

  • name: "InsightsPlayerShow"

Example:

import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("InsightsPlayerShow");

SendMessage#

Send message.

Properties:

  • name: "SendMessage"
  • payload: Actions.ChatActionPayload | Actions.ChatActionSendMessageTextPayload
    • conversationSid?: string - Unique identifier of the conversation.
    • conversation?: ConversationState - Represents a remote conversation.
    • body: string - Content of the message.
    • messageAttributes?: any - Represents chat message attributes to set.
    • subject: string - Subject of the message.
    • attachedFiles: Array<File> - Media files to be attached (only if new send message behaviour is enabled)

Example:

Actions.invokeAction("SendMessage", { body: "some text", conversationSid: "unique_conversation_identifier" });

SendRichContentMessage#

Send a rich content message using a content template.

Properties:

  • name: "SendRichContentMessage"
  • payload: Actions.ChatActionPayload | Actions.ChatActionSendRichContentMessagePayload
    • conversationSid?: string - Unique identifier of the conversation.
    • conversation?: ConversationState - Represents a remote conversation.
    • contentSid: string - The content template sid to send.
    • contentVariables?: Array<ChatActionContentTemplateVariable> - Optional array of variables defined for the content template. [{ name: "variable_name", value: "variable_value" }]
    • messageAttributes?: any - Represents chat message attributes to set.

Example:

Actions.invokeAction("SendRichContentMessage", { conversationSid: "unique_conversation_identifier", contentSid: "unique_content_template_sid" });
// with variables
Actions.invokeAction("SendRichContentMessage", {
conversationSid: "unique_conversation_identifier",
contentSid: "unique_content_template_sid",
contentVariables: [{ name: "variable_name", value: "variable_value" }]
);

SendTyping#

Send typing indicator.

Properties:

  • name: "SendTyping"
  • payload: Actions.ChatActionPayload
    • conversationSid?: string - Unique identifier of the conversation.
    • conversation?: ConversationState - Represents a remote conversation.

Example:

Actions.invokeAction("SendTyping", { conversationSid: "unique_conversation_identifier" });

SetInputText#

Set message input text.

Properties:

  • name: "SetInputText"
  • payload: Actions.ChatActionPayload | Actions.ChatActionInputTextPayload
    • conversationSid?: string - Unique identifier of the conversation.
    • conversation?: ConversationState - Represents a remote conversation.
    • body: string - Content of the message.
    • selectionStart?: number - Represents the selection start position in the message body.
    • selectionEnd?: number - Represents the selection end position in the message body.

Example:

Actions.invokeAction("SetInputText", { body: "some text", conversationSid: "unique_conversation_identifier" });

AttachFiles#

Attach files to the message input

Properties:

  • name: "AttachFiles"
  • payload: Actions.ChatActionPayload | Actions.ChatActionAttachFilesPayload
    • conversationSid?: string - Unique identifier of the conversation.
    • conversation?: ConversationState - Represents a remote conversation.

Example:

Actions.invokeAction("AttachFiles", { files: [File], conversationSid: "unique_conversation_identifier" });

DetachFile#

Detach a file from the message input

Properties:

  • name: "DetachFile"
  • payload: Actions.ChatActionPayload | Actions.ChatActionAttachFilePayload
    • conversationSid?: string - Unique identifier of the conversation.
    • conversation?: ConversationState - Represents a remote conversation.
    • file: File - Media file to be attached

Example:

Actions.invokeAction("DetachFile", { file: File, conversationSid: "unique_conversation_identifier" });

DownloadMedia#

Download a media file attachment

Properties:

  • name: "DownloadMedia"
  • payload: Actions.ChatActionPayload | Actions.ChatActionDownloadMediaPayload
    • conversationSid?: string - Unique identifier of the conversation.
    • conversation?: ConversationState - Represents a remote conversation.
    • media: Media - Represents a downloadable media file

Example:

Actions.invokeAction("DownloadMedia", { media, conversationSid });

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.