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

Flex Manager


The Flex Manager is the access point for controlling your Flex instance and all of the underlying Twilio products used for communications and assigning tasks. This means that within your Flex project, you can access the TaskRouter or Chat client directly through the Flex manager.

Aside from Flex itself, Manager also gives you access to the Programmable Chat, Sync, Client, and TaskRouter SDKs.


Manager Class

manager-class page anchor

See the official Flex UI 1.x docs on the Manager class(link takes you to an external page) for a full list of attributes and methods.


How to obtain the Manager instance

how-to-obtain-the-manager-instance page anchor

You can access the manager as follows:

By calling the getInstance method

by-calling-the-getinstance-method page anchor

_10
Flex.Manager.getInstance()

By calling the create method when initializing Flex

by-calling-the-create-method-when-initializing-flex page anchor

_10
return Flex
_10
.provideLoginInfo(configuration, "#container")
_10
.then(() => Flex.Manager.create(configuration))
_10
.then(manager => {
_10
// use manager here
_10
})
_10
.catch(error => handleError(error));

You can check out the sample project(link takes you to an external page) on how to initialize Flex.

In the init method of your plugin

in-the-init-method-of-your-plugin page anchor

_10
init(flex, manager) {
_10
// use manager here
_10
}


Subscribing to Manager events

subscribing-to-manager-events page anchor

You can use Flex Manager to subscribe to events that occur from Flex. See Flex Events(link takes you to an external page) for more details.


_10
import { Manager } from "@twilio/flex-ui";
_10
const manager = Manager.getInstance();
_10
_10
manager.events.addListener('eventName', (payload) => {
_10
// implement logic here
_10
});

For example, you can subscribe to the pluginsLoaded event to know when all Flex Plugins have loaded.


_10
manager.events.addListener("pluginsLoaded", () => {
_10
console.log("Plugins have been loaded!");
_10
});


Common use cases and examples

common-use-cases-and-examples page anchor

This example logs connect in the browser's console whenever the agent connects to a call:


_10
Flex.Manager.getInstance().voiceClient.on('connect', () => {
_10
console.log('connect');
_10
});

By mixing calls to the Manager with the Actions Framework, you can perform more complex tasks like this example that automatically accepts all inbound chats for agents:


_10
Flex.Manager.getInstance().workerClient.on("reservationCreated", reservation => {
_10
if (reservation.task.taskChannelUniqueName === 'chat' && reservation.task.direction === 'inbound') {
_10
Flex.Actions.invokeAction("AcceptTask", {sid: reservation.sid});
_10
Flex.Actions.invokeAction("SelectTask", {sid: reservation.sid});
_10
}
_10
});


The insightsClient provide access to the Twilio Sync SDK. For Flex accounts, this gives access to workers and tasks data through the use of two classes:

Both classes needs two arguments:

  • Index name: data set the query is executed against. Currently supported index names for Flex are: tr-task , tr-worker , tr-reservation , tr-queue .
  • Query: this is the query used to filter the data from the index. The syntax for the query is documented here . The query can be an empty string: in this case the whole data set is returned (e.g. all workers.)

In this example, the insightsClient is used to query the workers with activity_name set to Available and subscribe to changes. That means that every time a worker change its status to Available, an event itemUpdated is fired. If a worker changes its status from Available to any other status, the itemRemoved event is fired.


_16
Flex.Manager.insightsClient
_16
.liveQuery('tr-worker', 'data.activity_name == "Available"')
_16
.then(function (args) {
_16
console.log(
_16
'Subscribed to live data updates for worker in "Available" activity'
_16
);
_16
args.on('itemRemoved', function (args) {
_16
console.log('Worker ' + args.key + ' is no longer "Available"');
_16
});
_16
args.on('itemUpdated', function (args) {
_16
console.log('Worker ' + args.key + ' is now "Available"');
_16
});
_16
})
_16
.catch(function (err) {
_16
console.log('Error when subscribing to live updates', err);
_16
});


In this example, the insightsClient is used to query the workers with specific skills inside its attributes. This returns an array of workers that can be used to provide static data.


_10
manager.insightsClient.instantQuery('tr-worker').then((q) => {
_10
q.on('searchResult', (items) => {
_10
// Do something with the results
_10
});
_10
q.search('data.attributes.languages contains "english"');
_10
});


Rate this page: