Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Actions Framework


(information)

Info

Auto-Generated Documentation for the Flex UI(link takes you to an external page) 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.


Register and Invoke an Action

register-and-invoke-an-action page anchor

Actions.registerAction(link takes you to an external page) registers a named action and allows you to invoke the action later. The second argument is an ActionFunction(link takes you to an external page) to be executed when the action is invoked. You can implement your logic in the ActionFunction.


_10
import { Actions } from "@twilio/flex-ui";
_10
_10
Actions.registerAction("AcceptTask", (payload) => {
_10
// Custom Logic Goes Here
_10
});

Actions.invokeAction(link takes you to an external page) 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.


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


Actions.replaceAction(link takes you to an external page) 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.


_10
import { Actions } from "@twilio/flex-ui";
_10
_10
Actions.replaceAction("AcceptTask", (payload, original) => {
_10
return new Promise((resolve, reject) => {
_10
alert("I have replaced this Action");
_10
resolve();
_10
}).then(() => original(payload));
_10
});


Add and Remove Event Listeners

add-and-remove-event-listeners page anchor

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".


_13
import { Actions } from "@twilio/flex-ui";
_13
_13
Actions.addListener("beforeAcceptTask", (payload, cancelActionInvocation) => {
_13
// Implement logic before the AcceptTask action has been invoked
_13
if (someCondition) {
_13
// use this function to prevent the actual AcceptTask action from being invoked
_13
cancelActionInvocation();
_13
}
_13
});
_13
_13
Actions.addListener("afterAcceptTask", (payload) => {
_13
// Implement logic after AcceptTask action has stopped executing
_13
});

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.

Registering event listeners with named functions

registering-event-listeners-with-named-functions page anchor

_13
import { Actions } from "@twilio/flex-ui";
_13
const handleBeforeAcceptTask = (payload, cancelActionInvocation) => {
_13
// Implement logic before the AcceptTask action has been invoked
_13
};
_13
_13
const handleAfterAcceptTask = (payload) => {
_13
// Implement logic after the AcceptTask action has stopped executing
_13
};
_13
_13
// Register beforeAcceptTask and afterAcceptTask events
_13
_13
Actions.addListener("beforeAcceptTask", handleBeforeAcceptTask);
_13
Actions.addListener("afterAcceptTask", handleAfterAcceptTask);

Removing event listeners with named functions

removing-event-listeners-with-named-functions page anchor

You can now remove the event listeners by passing the name of the event with the original function used to register the event.


_10
Actions.removeListener("beforeAcceptTask", handleBeforeAcceptTask);
_10
Actions.removeListener("afterAcceptTask", handleAfterAcceptTask);


For a list of all actions, visit the Actions(link takes you to an external page) part of the Flex UI 1.x docs. 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 is provided with event body.

after[eventName]
Called after the action has stopped executing.

(information)

Info

The afterLogout event is not supported. Once the Worker has logged out, they will be returned to the Flex login screen.


Common use cases and examples

common-use-cases-and-examples page anchor

Add an Action after a Task is accepted

add-an-action-after-a-task-is-accepted page anchor

Raises a javascript alert after an Agent has clicked to accept any task.


_10
flex.Actions.addListener("afterAcceptTask", (payload) => alert("Triggered after event AcceptTask"));

Ask for confirmation before accepting a Task

ask-for-confirmation-before-accepting-a-task page anchor

Generates a prompt before Task Acceptance; prevent that Action from running with an abort command if the user doesn't confirm.


_10
flex.Actions.addListener("beforeAcceptTask", (payload, abortFunction) => {
_10
alert("Triggered before event AcceptTask");
_10
if (!window.confirm("Are you sure you want to accept the task?")) {
_10
abortFunction();
_10
}
_10
});

Customizing an Existing Action

customizing-an-existing-action page anchor

Replaces the original Action for AcceptTask. Injects custom logic to alert about the replacement, but executes the original Action.


_10
flex.Actions.replaceAction("AcceptTask", (payload, original) => {
_10
return new Promise<void>((resolve, reject) => {
_10
alert("I have replaced this Action");
_10
resolve();
_10
}).then(() => original(payload));
_10
});

Registering a Custom Action

registering-a-custom-action page anchor

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.


_14
flex.Actions.registerAction("MyAction", (payload) => {
_14
return
_14
fetch("https://my.server.backend.com/test")
_14
.then(response => {
_14
alert("Triggered MyAction with response " + JSON.stringify(response));
_14
})
_14
.catch(error => {
_14
console.log(error);
_14
throw error;
_14
});
_14
});
_14
_14
_14
flex.Actions.addListener("afterCompleteTask", (payload) => {return flex.Actions.invokeAction("MyAction")});

Sending a message after a Task is completed

sending-a-message-after-a-task-is-completed page anchor

Sends a post-conversation message once the task is in a wrap-up state. Could be used to send a survey, or notify a user that the agent closed the session.


_20
flex.Actions.replaceAction("WrapupTask", (payload, original) => {
_20
// Only alter chat tasks:
_20
if( payload.task.taskChannelUniqueName !== "chat" ) {
_20
original(payload);
_20
} else {
_20
return new Promise(function(resolve, reject) {
_20
// Send the message:
_20
flex.Actions.invokeAction("SendMessage", {
_20
body: 'Thanks for chatting. Your session is now closed.',
_20
channelSid: payload.task.attributes.channelSid
_20
}).then(response => {
_20
// Wait until the message is sent to wrap-up the task:
_20
resolve(original(payload));
_20
});
_20
_20
});
_20
_20
}
_20
_20
});



Rate this page: