Interface

Actions

Actions

Members

# static AcceptTask

Accept a task
Properties:
Name Type Attributes Description
name "AcceptTask"
payload Actions.WorkerActionPayload | Actions.WorkerAcceptTaskActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
conferenceOptions any
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("AcceptTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static ApplyListFilters

Apply filters to Team view
Properties:
Name Type Description
name "ApplyListFilters"
payload Actions.ApplyListFiltersPayload
key string
filters Array.<TeamsView.ActiveFilter>
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ApplyListFilters", {
    key: "idle",
    filters: [
        {
            name: "data.activity",
            condition: FilterConditions.IN,
            values: ["Idle"]
        }
    ]
});

# static AttachFile

Attach a file to the message input
Properties:
Name Type Attributes Description
name "AttachFile"
payload Actions.ChatActionPayload | Actions.ChatActionAttachFilePayload
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
file File Media file to be attached
Example
Actions.invokeAction("AttachFile", { file: File, channelSid: "unique_channel_identifier" });

# static CancelTransfer

Cancel a task that was being transferred to a target worker.
Properties:
Name Type Attributes Description
name "CancelTransfer"
payload Actions.WorkerActionPayload | Actions.TransferTaskPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
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 <optional>
transfer options (see Taskrouter docs for options)
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("CancelTransfer", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static CompleteTask

Complete a task that is either pending or assigned. If applicable, will result in WrapupTask action being called.
Properties:
Name Type Attributes Description
name "CompleteTask"
payload Actions.WorkerActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("CompleteTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static DetachFile

Detach a file from the message input
Properties:
Name Type Attributes Description
name "DetachFile"
payload Actions.ChatActionPayload | Actions.ChatActionAttachFilePayload
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
file File Media file to be attached
Example
Actions.invokeAction("DetachFile", { file: File, channelSid: "unique_channel_identifier" });

# static DownloadMedia

Download the media from the message
Properties:
Name Type Attributes Description
name "DownloadMedia"
payload Actions.ChatActionPayload | Actions.ChatActionDownloadMediaPayload
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
message Message Represents the message object. See structure here: https://media.twiliocdn.com/sdk/js/chat/releases/3.4.0/docs/Message.html
Example
Actions.invokeAction("DownloadMedia", { message: message });

# static HangupCall

Hang up current call (if there is one).
Properties:
Name Type Attributes Description
name "HangupCall"
payload Actions.VoiceActionPayload
task ITask <optional>
sid string <optional>
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HangupCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static HideDirectory

Hide workers directory at the agent desktop view
Properties:
Name Type Description
name "HideDirectory"
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HideDirectory");

# static HistoryGo

Move backwards or forwards a relative number of locations in history
Properties:
Name Type Description
name "HistoryGo"
location Number
Example

Use that action to move between existing locations in history

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

# static HistoryGoBack

Move backward one location in history
Properties:
Name Type Description
name "HistoryGoBack"
Example

Use that action to move backward one location in history

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

# static HistoryGoForward

Move forward one location in history
Properties:
Name Type Description
name "HistoryGoForward"
Example

Use that action to move forward one location in history

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

# static HistoryPush

Add a history entry, leading to view change or redirect
Properties:
Name Type Description
name "HistoryPush"
location String
Example

Use that action to change current location

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

# static HistoryReplace

Replace the current location in history
Properties:
Name Type Description
name "HistoryReplace"
location String
Example

Use that action to replace current location

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

# static HoldCall

Hold current call (if there is one).
Properties:
Name Type Attributes Description
name "HoldCall"
payload Actions.VoiceActionPayload | Actions.HoldCallActionPayload
task ITask <optional>
sid string <optional>
participantCallSid string <optional>
Sid of the participant within the call
holdMusicUrl string <optional>
Request URL to fetch the hold music from
holdMusicMethod string <optional>
Request method to fetch the hold music with
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HoldCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static HoldParticipant

Put a call participant on hold
Properties:
Name Type Attributes Description
name "HoldParticipant"
payload Actions.WorkerActionPayload | Actions.WorkerParticipantActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
targetSid string <optional>
sid of the participant (either this or participant has to be provided)
participant ConferenceState.ConferenceParticipant <optional>
participant object (either this or participant has to be provided)
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("HoldParticipant", {
  sid: "WRXXXXXXXXXXXXXXXXX",
  targetSid: participant.workerSid
});

# static KickParticipant

Remove a participant from a call
Properties:
Name Type Attributes Description
name "KickParticipant"
payload Actions.WorkerActionPayload | Actions.WorkerParticipantActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
targetSid string <optional>
sid of the participant (either this or participant has to be provided)
participant ConferenceState.ConferenceParticipant <optional>
participant object (either this or participant has to be provided)
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("KickParticipant", {
  sid: "WRXXXXXXXXXXXXXXXXX",
  targetSid: participant.workerSid
});

# static Logout

Try to logout user from current session if there are no current activities preventing it.
Properties:
Name Type Attributes Description
name "Logout"
payload Actions.WorkerLogoutPayload
forceLogout boolean <optional>
supress an error in case offline activity cannot be set for the worker
activitySid string <optional>
sid of the custom offline activity
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("Logout", { forceLogout: true });

# static MonitorCall

Monitor a provided ongoing call of another agent
Properties:
Name Type Attributes Description
name "MonitorCall"
payload Actions.TaskInSupervisorPayload | Actions.MonitorTaskPayload
task ITask <optional>
sid string <optional>
extraParams any <optional>
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("MonitorCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static NavigateToView

Navigate to a view defined by the provided view name
Properties:
Name Type Description
name "NavigateToView"
payload Actions.SelectViewPayload
viewName string
Example

Use that action to go to view

Actions.invokeAction("NavigateToView", {viewName: "my-custom-page"});

# static RejectTask

Reject a task.
Properties:
Name Type Attributes Description
name "RejectTask"
payload Actions.WorkerActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("RejectTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static ReloadWindow

Reload window
Properties:
Name Type Description
name "ReloadWindow"
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ReloadWindow");

# static RemoveListFilters

Remove filters from Team view
Properties:
Name Type Description
name "RemoveListFilters"
payload Actions.ApplyListFiltersPayload
key string
filters Array.<TeamsView.ActiveFilter>
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("RemoveListFilters", {
  key: FiltersType.search
});

# static SelectTask

Select a task in Supervisor UI. Deselect a current task if provided task is undefined.
Properties:
Name Type Attributes Description
name "SelectTask"
payload Actions.WorkerActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SelectTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static SelectTaskInSupervisor

Select a task in Supervisor UI. Deselect a current task if provided task is undefined.
Properties:
Name Type Attributes Description
name "SelectTaskInSupervisor"
payload Actions.TaskInSupervisorPayload
task ITask <optional>
sid string <optional>
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SelectTaskInSupervisor", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static SelectWorkerInSupervisor

Select an agent in Supervisor UI. Deselect a current worker if worker is undefined.
Properties:
Name Type Attributes Description
name "SelectTaskInSupervisor"
payload Actions.SelectWorkerInSupervisorPayload
worker IWorker <optional>
workerSid string
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SelectWorkerInSupervisor", { workerSid: "WKXXXXXXXXXXXXXXXXX" });

# static SendDTMFDigits

Send DTMF sending history for a task. Calls SetDTMFDialpadDigits action internally
Properties:
Name Type Attributes Description
name "SendDTMFDigits"
payload Actions.WorkerActionPayload | ActionPayload.SendDTMFDigitsPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
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"
});

# static SendMediaMessage

Send media message.
Properties:
Name Type Attributes Description
name "SendMediaMessage"
payload Actions.ChatActionPayload | Actions.ChatActionSendMediaMessagePayload
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
file File Media file to send.
messageAttributes any <optional>
Represents chat message attributes to set.
Example
Actions.invokeAction("SendMediaMessage", { file: file, channelSid: "unique_channel_identifier" });

# static SendMessage

Send message.
Properties:
Name Type Attributes Description
name "SendMessage"
payload Actions.ChatActionPayload | Actions.ChatActionSendMessageTextPayload
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
body string Content of the message.
messageAttributes any <optional>
Represents chat message attributes to set.
useSeparateInputStore boolean <optional>
If set to true, will store the message text in separate state and improves performance.
Example
Actions.invokeAction("SendMessage", { body: "some text", channelSid: "unique_channel_identifier" });

# static SendTyping

Send typing indicator.
Properties:
Name Type Attributes Description
name "SendTyping"
payload Actions.ChatActionPayload
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
Example
Actions.invokeAction("SendTyping", { channelSid: "unique_channel_identifier" });

# static SetActivity

Set an activity of the user (similar to selecting activity from Profile widget).
Properties:
Name Type Attributes Description
name "SetActivity"
payload Actions.WorkerSetActivityPayload
activityAvailable boolean <optional>
activityName string <optional>
activitySid string <optional>
options.rejectPendingReservations boolean <optional>
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SetActivity", { activitySid: "WAXXXXXXXXXXXXXXXXX" });

# static SetComponentState

Alters the current state of a component
Properties:
Name Type Description
name "SetComponentState"
payload Actions.SetComponentStatePayload
name string
state any
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("SetComponentState", { name: "AgentTaskCanvasTabs", state: { selectedTabName: "info" } });

# static SetDTMFDialpadDigits

Sets DTMF sending history for a task
Properties:
Name Type Attributes Description
name "SetDTMFDialpadDigits"
payload Actions.WorkerActionPayload | ActionPayload.SetDTMFDialpadDigitsPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
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"
});

# static SetInputText

Set message input text.
Properties:
Name Type Attributes Description
name "SetInputText"
payload Actions.ChatActionPayload | Actions.ChatActionInputTextPayload
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
body string Content of the message.
selectionStart number <optional>
Represents the cursor position or the selection start position in the message body.
selectionEnd number <optional>
Represents the selection end position in the message body.
useLocalState boolean <optional>
Deprecated - If set to true, it keeps the message value in the local component state.
useSeparateInputStore boolean <optional>
If set to true, will store the message text in separate state and improves performance.
Example
Actions.invokeAction("SetInputText", { body: "some text", channelSid: "unique_channel_identifier" });

# static SetWorkerActivity

A supervisor changing a worker status
Properties:
Name Type Description
name "SetWorkerActivity"
payload WorkerActions.WorkerSetWorkerActivityPayload
Example
Actions.invokeAction("SetWorkerActivity", { workerSid: "WKXXXXXXXXXXXXXXXXX", activitySid: "WAXXXXXXXXXXXXXXXXX" })

# static ShowDirectory

Display workers directory at the agent desktop view
Properties:
Name Type Description
name "ShowDirectory"
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ShowDirectory");

# static StartOutboundCall

Start outbound call
Properties:
Name Type Attributes Description
name "StartOutboundCall"
payload Actions.StartOutboundCallPayload
destination string destination phone number to make outbound call.
queueSid string <optional>
queue sid to assign for the task, if undefined it picks the default from service configuration.
callerId string <optional>
caller ID to make an outbound call. if undefined it picks the default from service configuration.
taskAttributes object <optional>
custom attributes to set on task.
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("StartOutboundCall", {
      destination: "+1234567",
      queueSid: "WQXXXXXXXXXXXXXXXXX"
});

# static StopMonitoringCall

Stop monitoring a call
Properties:
Name Type Attributes Description
name "StopMonitoringCall"
payload Actions.TaskInSupervisorPayload
task ITask <optional>
sid string <optional>
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("StopMonitoringCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static ToggleDTMFDialpad

Show/hide the DTMF Dialpad for a call
Properties:
Name Type Attributes Description
name "ToggleDTMFDialpad"
payload Actions.WorkerActionPayload | Actions.ToggleDTMFDialpadPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
open boolean
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ToggleDTMFDialpad", {
  sid: "WRXXXXXXXXXXXXXXXXX",
  open: true
});

# static ToggleMute

Mute current call (if there is one).
Properties:
Name Type Description
name "ToggleMute"
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ToggleMute");

# static ToggleOutboundDialer

Toggles visibility of outbound dialer panel.
Properties:
Name Type Description
name "ToggleOutboundDialer"
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("ToggleOutboundDialer");

# static ToggleSidebar

Open or close the sidebar
Properties:
Name Type Attributes Description
name "ToggleSidebar"
payload Actions.ToggleSidebarPayload <optional>
open boolean <optional>
Example

Open the sidebar

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

# static TransferTask

Transfer a provided task to a target worker (similar to transferring via Worker Directory)
Properties:
Name Type Attributes Description
name "TransferTask"
payload Actions.WorkerActionPayload | Actions.TransferTaskPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
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 <optional>
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"}
});

# static UnholdCall

Unhold current call (if there is one).
Properties:
Name Type Attributes Description
name "UnholdCall"
payload Actions.VoiceActionPayload | Actions.UnholdCallActionPayload
task ITask <optional>
sid string <optional>
participantCallSid string <optional>
Sid of the participant within the call
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("UnholdCall", { sid: "WRXXXXXXXXXXXXXXXXX" });

# static UnholdParticipant

Unhold a call participant
Properties:
Name Type Attributes Description
name "UnholdParticipant"
payload Actions.WorkerActionPayload | Actions.WorkerParticipantActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
targetSid string <optional>
sid of the participant (either this or participant has to be provided)
participant ConferenceState.ConferenceParticipant <optional>
participant object (either this or participant has to be provided)
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("UnholdParticipant", {
  sid: "WRXXXXXXXXXXXXXXXXX",
  targetSid: participant.workerSid
});

# static WrapupTask

Wrap a task (if applicable)
Properties:
Name Type Attributes Description
name "WrapupTask"
payload Actions.WorkerActionPayload
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required
Example
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("WrapupTask", { sid: "WRXXXXXXXXXXXXXXXXX" });

Type Definitions

# ApplyListFiltersPayload

Properties:
Name Type Description
key string
filters Array.<TeamsView.ActiveFilter>
Actions.ChatActionPayload

# ChatActionAttachFilePayload

Properties:
Name Type Description
file File Media file to be attached
Actions.ChatActionPayload

# ChatActionDownloadMediaPayload

Properties:
Name Type Description
message Message Represents the message object. See structure here: https://media.twiliocdn.com/sdk/js/chat/releases/3.4.0/docs/Message.html
Actions.ChatActionPayload

# ChatActionInputTextPayload

Properties:
Name Type Attributes Description
body string Content of the message.
selectionStart number <optional>
Represents the cursor position or the selection start position in the message body.
selectionEnd number <optional>
Represents the selection end position in the message body.
useLocalState boolean <optional>
Deprecated - If set to true, it keeps the message value in the local component state.
useSeparateInputStore boolean <optional>
If set to true, will store the message text in separate state and improves performance.

# ChatActionPayload

Properties:
Name Type Attributes Description
channelSid string <optional>
Unique identifier of the channel.
channel ChannelState <optional>
Represents a remote chat channel.
Actions.ChatActionPayload

# ChatActionSendMediaMessagePayload

Properties:
Name Type Attributes Description
file File Media file to send.
messageAttributes any <optional>
Represents chat message attributes to set.
Actions.ChatActionPayload

# ChatActionSendMessageTextPayload

Properties:
Name Type Attributes Description
body string Content of the message.
messageAttributes any <optional>
Represents chat message attributes to set.
useSeparateInputStore boolean <optional>
If set to true, will store the message text in separate state and improves performance.

# HoldCallActionPayload

Hold Call Action Payload
Properties:
Name Type Attributes Description
participantCallSid string <optional>
Sid of the participant within the call
holdMusicUrl string <optional>
Request URL to fetch the hold music from
holdMusicMethod string <optional>
Request method to fetch the hold music with
TaskInSupervisorPayload

# MonitorTaskPayload

Properties:
Name Type Attributes Description
extraParams any <optional>
Object

# SelectViewPayload

Properties:
Name Type Description
viewName string

# SelectWorkerInSupervisorPayload

Properties:
Name Type Attributes Description
worker IWorker <optional>
workerSid string

# SendDTMFDigitsPayload

Properties:
Name Type Description
digits string

# SetComponentStatePayload

Properties:
Name Type Description
name string
state any

# SetDTMFDialpadDigitsPayload

Properties:
Name Type Description
digits string
Actions.StartOutboundCallPayload

# StartOutboundCallPayload

Properties:
Name Type Attributes Description
destination string destination phone number to make outbound call.
queueSid string <optional>
queue sid to assign for the task, if undefined it picks the default from service configuration.
callerId string <optional>
caller ID to make an outbound call. if undefined it picks the default from service configuration.
taskAttributes object <optional>
custom attributes to set on task.

# TaskInSupervisorPayload

Properties:
Name Type Attributes Description
task ITask <optional>
sid string <optional>

# ToggleDTMFDialpadPayload

Properties:
Name Type Description
open boolean

# ToggleSidebarPayload

Properties:
Name Type Attributes Description
open boolean <optional>
Actions.WorkerActionPayload

# TransferTaskPayload

Properties:
Name Type Attributes Description
targetSid string sid of the worker or the queue to be transferred to
options any <optional>
transfer options (see Taskrouter docs for options)

# UnholdCallActionPayload

Unhold Call Action Payload
Properties:
Name Type Attributes Description
participantCallSid string <optional>
Sid of the participant within the call

# VoiceActionPayload

Properties:
Name Type Attributes Description
task ITask <optional>
sid string <optional>

# WorkerAcceptTaskActionPayload

Properties:
Name Type Description
conferenceOptions any

# WorkerActionPayload

Properties:
Name Type Attributes Description
task ITask <optional>
targeted task object. Either this or sid property is required
sid string <optional>
targeted task object's sid. Either this or task property is required

# WorkerLogoutPayload

Properties:
Name Type Attributes Description
forceLogout boolean <optional>
supress an error in case offline activity cannot be set for the worker
activitySid string <optional>
sid of the custom offline activity
Actions.WorkerActionPayload

# WorkerParticipantActionPayload

Properties:
Name Type Attributes Description
targetSid string <optional>
sid of the participant (either this or participant has to be provided)
participant ConferenceState.ConferenceParticipant <optional>
participant object (either this or participant has to be provided)

# WorkerSetActivityPayload

Properties:
Name Type Attributes Description
activityAvailable boolean <optional>
activityName string <optional>
activitySid string <optional>
options.rejectPendingReservations boolean <optional>