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

Use UI Actions


The Flex UI is constantly emitting event data that describes how the user is interacting with the Flex UI. As you write Plugins, the Actions Framework allows you to harness these events and define your own logic to describe how you want the Flex UI, CRM Data, or any other data, to change. You can register events before or after an action fires, or even replace the behavior of an Action.

Learn more about UI actions in our API documentation(link takes you to an external page).


Register and Invoke an Action

register-and-invoke-an-action page anchor

_10
Actions.registerAction(name: string, action: ActionFunction, payloadUpdate?: PayloadUpdateFunction)

Registers a named action and provides the code that should be run when invoking it. The payloadUpdate method is optional, and used for triggering a callback to modify the payload given to action invocation.


_10
Actions.invokeAction(name: string)

Invokes a named action. Returns a Promise.


_10
Actions.addListener(name: string, action: ActionFunction)

Implements a custom function to be triggered either Before or After a specific Action.


Add and Remove Event Listeners

add-and-remove-event-listeners page anchor

You can add and remove event listeners.

Events supported:

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.

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



_10
Actions.replaceAction(name: string, action: ReplacedActionFunction)

Replaces the default implementation of a named action and provides an alternative implementation. 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.


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(
_10
"afterAcceptTask",
_10
(payload) => alert("Triggered after event AcceptTask")
_10
);

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(
_10
"beforeAcceptTask",
_10
(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
});

Detect a running call on Flex UI 2.0

detect-a-running-call-on-flex-ui-20 page anchor

Listens for an incoming call within the Flex UI and logs a message to the web console.


_10
Actions.addListener("beforeAcceptTask", (payload) => {
_10
if (payload.task.taskChannelUniqueName === 'voice') {
_10
console.log("Call detected");
_10
}
_10
});

Customize an existing Action

customize-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((resolve, reject) => {
_10
alert("I have replaced this Action");
_10
resolve();
_10
}).then(() => original(payload));
_10
});

Register a custom Action

register-a-custom-action page anchor

Registers a custom Action called MyAction, which makes an 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.


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

Send a message after a Task is completed

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


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


Rate this page: