Flex Manager

For a full list of attributes and methods, see the Manager class documentation in the Flex UI API Reference.

You can access the Manager using these methods:

• the getInstance method
• the create method
• the init method

1
return Flex
2
  .provideLoginInfo(configuration, "#container")
3
  .then(() => Flex.Manager.create(configuration))
4
  .then(manager => {
5
    // use manager here
6
  })
7
  .catch(error => handleError(error));

You can check out the sample project to learn how to initialize Flex.

You can use Flex Manager to subscribe to events that occur from Flex. For more details, see Flex Events in the Flex UI API Reference.

1
import { Manager } from "@twilio/flex-ui";
2
const manager = Manager.getInstance();
3

4
manager.events.addListener('eventName', (payload) => {
5
  // implement logic here
6
});
7

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

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

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

1
Flex.Manager.getInstance().voiceClient.on('connect', () => {
2
  console.log('connect');
3
});
4

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:

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

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

• LiveQuery class: to query Flex data and receives pushed updates whenever new (or updated) records would match the given expression
• InstantQuery class: to get a static snapshot of Flex data

Both classes need two arguments:

• Index name: the data set that the query is executed against. Flex supports the following index names: tr-task, tr-worker, tr-reservation, and 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 which case, the whole data set is returned (for example, 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 changes their status to Available, the itemUpdated event is fired. If a worker changes their status from Available to any other status, the itemRemoved event is fired.

1
Flex.Manager.insightsClient
2
  .liveQuery('tr-worker', 'data.activity_name == "Available"')
3
  .then(function (args) {
4
    console.log(
5
      'Subscribed to live data updates for worker in "Available" activity'
6
    );
7
    args.on('itemRemoved', function (args) {
8
      console.log('Worker ' + args.key + ' is no longer "Available"');
9
    });
10
    args.on('itemUpdated', function (args) {
11
      console.log('Worker ' + args.key + ' is now "Available"');
12
    });
13
  })
14
  .catch(function (err) {
15
    console.log('Error when subscribing to live updates', err);
16
  });
17

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

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