For the Flex UI 2.x.x version of this content, see Use UI Actions.
Auto-Generated Documentation for the Flex UI is now available. The auto-generated documentation is accurate and comprehensive, and so may differ from what you see in the official Flex UI documentation.
Flex UI constantly emits asynchronous events and event payloads that describe how the user is interacting with the platform. With the Flex UI Actions Framework, you can manually invoke certain actions such as completing tasks, transferring tasks, holding a current call, and many more. Each action fires a before and after event, which allows you to handle your own logic before and after the action occurs. You can also replace the default behavior of an Action with your own custom logic. As you develop Plugins, the Actions Framework will allow you to describe how you want to interact with Flex UI or any CRM Data.
Actions.registerAction registers a named action and allows you to invoke the action later. The second argument is an ActionFunction to be executed when the action is invoked. You can implement your logic in the ActionFunction.
1import { Actions } from "@twilio/flex-ui";23Actions.registerAction("AcceptTask", (payload) => {4// Custom Logic Goes Here5});
Actions.invokeAction invokes actions that come out of the box with Flex, and the ones that you register. You can pass in an optional payload as a second parameter if the action needs any data when being invoked. When the named Action is invoked, it fires a before and after event.
1import { Actions } from "@twilio/flex-ui";2Actions.invokeAction("AcceptTask", { sid: "WRXXXXXXXXXXXXXXXXX" });
Actions.replaceAction replaces the default implementation of a named Action with your own. The replaced Action will be called with the same parameters as the original implementation, so you can add additional logic, then invoke the original action in your replacement function.
1import { Actions } from "@twilio/flex-ui";23Actions.replaceAction("AcceptTask", (payload, original) => {4return new Promise((resolve, reject) => {5alert("I have replaced this Action");6resolve();7}).then(() => original(payload));8});
You can add and remove event listeners to events fired when an action is invoked. Every event name is the invoked Action's name prefixed with either "before" or "after".
1import { Actions } from "@twilio/flex-ui";23Actions.addListener("beforeAcceptTask", (payload, cancelActionInvocation) => {4// Implement logic before the AcceptTask action has been invoked5if (someCondition) {6// use this function to prevent the actual AcceptTask action from being invoked7cancelActionInvocation();8}9});1011Actions.addListener("afterAcceptTask", (payload) => {12// Implement logic after AcceptTask action has stopped executing13});14
To remove a listener, you must provide the same function you used as an argument when registering the event. If you need to remove listeners, you should register your event listeners with a named function instead of an anonymous function.
1import { Actions } from "@twilio/flex-ui";2const handleBeforeAcceptTask = (payload, cancelActionInvocation) => {3// Implement logic before the AcceptTask action has been invoked4};56const handleAfterAcceptTask = (payload) => {7// Implement logic after the AcceptTask action has stopped executing8};910// Register beforeAcceptTask and afterAcceptTask events1112Actions.addListener("beforeAcceptTask", handleBeforeAcceptTask);13Actions.addListener("afterAcceptTask", handleAfterAcceptTask);
You can now remove the event listeners by passing the name of the event with the original function used to register the event.
1Actions.removeListener("beforeAcceptTask", handleBeforeAcceptTask);2Actions.removeListener("afterAcceptTask", handleAfterAcceptTask);
For a list of all actions, visit the Actions section of the Flex UI 1.x.x API Reference. All event names take the name of the Action, prefixed with before or after. Every event name is also in camel case.
before[eventName] (for example "beforeAcceptTask")
Called when a named action is triggered, but before the action body is run. You can abort the action that's provided with event body.
after[eventName]
Called after the action has stopped executing.
The afterLogout event isn't supported. When a worker logs out, they return to the Flex login screen.
Raises a JavaScript alert after an Agent has clicked to accept any task.
flex.Actions.addListener("afterAcceptTask", (payload) => alert("Triggered after event AcceptTask"));
Generates a prompt before Task Acceptance; prevent that Action from running with an abort command if the user doesn't confirm.
1flex.Actions.addListener("beforeAcceptTask", (payload, abortFunction) => {2alert("Triggered before event AcceptTask");3if (!window.confirm("Are you sure you want to accept the task?")) {4abortFunction();5}6});
Replaces the original Action for AcceptTask. Injects custom logic to alert about the replacement, but executes the original Action.
1flex.Actions.replaceAction("AcceptTask", (payload, original) => {2return new Promise<void>((resolve, reject) => {3alert("I have replaced this Action");4resolve();5}).then(() => original(payload));6});7
Registers a custom Action called MyAction, which makes a HTTP request. We then add a listener to the action CompleteTask which then invokes this custom Action. For example this could be used to update your CRM system.
1flex.Actions.registerAction("MyAction", (payload) => {2return3fetch("https://my.server.backend.com/test")4.then(response => {5alert("Triggered MyAction with response " + JSON.stringify(response));6})7.catch(error => {8console.log(error);9throw error;10});11});121314flex.Actions.addListener("afterCompleteTask", (payload) => {return flex.Actions.invokeAction("MyAction")});
Sends a post-conversation message once the task is in a wrap-up state. For example, you could use this action to send a survey, or notify a user that the agent closed the session.
1flex.Actions.replaceAction("WrapupTask", (payload, original) => {2// Only alter chat tasks:3if( payload.task.taskChannelUniqueName !== "chat" ) {4original(payload);5} else {6return new Promise(function(resolve, reject) {7// Send the message:8flex.Actions.invokeAction("SendMessage", {9body: 'Thanks for chatting. Your session is now closed.',10channelSid: payload.task.attributes.channelSid11}).then(response => {12// Wait until the message is sent to wrap-up the task:13resolve(original(payload));14});1516});1718}1920});