Use UI Actions

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.

Actions.invokeAction(name: string)

Invokes a named action. Returns a Promise.

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

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

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.

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.

Raises a JavaScript alert after an Agent has clicked to accept any Task.

1
flex.Actions.addListener(
2
  "afterAcceptTask",
3
  (payload) => alert("Triggered after event AcceptTask")
4
);

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

1
flex.Actions.addListener(
2
  "beforeAcceptTask",
3
  (payload, abortFunction) => {
4
    alert("Triggered before event AcceptTask");
5
    if (!window.confirm("Are you sure you want to accept the task?")) {
6
      abortFunction();
7
  }
8
});

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

1
Actions.addListener("beforeAcceptTask", (payload) => {
2
    if (payload.task.taskChannelUniqueName === 'voice') {
3
        console.log("Call detected");
4
    }
5
});

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

1
flex.Actions.replaceAction("AcceptTask", (payload, original) => {
2
  return new Promise((resolve, reject) => {
3
    alert("I have replaced this Action");
4
    resolve();
5
  }).then(() => original(payload));
6
});
7

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.

1
flex.Actions.registerAction("MyAction", (payload) => {
2
  return 
3
    fetch("https://my.server.backend.com/test")
4
      .then(response => {
5
        alert("Triggered MyAction with response " + JSON.stringify(response));
6
      })
7
      .catch(error => {
8
        console.log(error);
9
        throw error;
10
      });
11
});
12

13

14
flex.Actions.addListener("afterCompleteTask", (payload) => {
15
  return flex.Actions.invokeAction("MyAction");
16
});

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.

1
flex.Actions.replaceAction("WrapupTask", (payload, original) => {
2
  // Only alter chat tasks:
3
  if(payload.task.taskChannelUniqueName !== "chat") {
4
    original(payload);
5
  } else {
6
    return new Promise((resolve, reject) => {
7
      // Send the message:
8
      flex.Actions.invokeAction("SendMessage", {
9
        body: 'Thanks for chatting. Your session is now closed.',
10
        conversationSid: payload.task.attributes.conversationSid
11
      }).then((response) => {
12
        // Wait until the message is sent to wrap-up the task:
13
        resolve(original(payload));
14
      });
15
    });
16
  }
17
});