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.
See the official Flex UI 1.x docs on the Manager class for a full list of attributes and methods.
You can access the manager as follows:
_10Flex.Manager.getInstance()
_10return 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 on how to initialize Flex.
_10init(flex, manager) {_10 // use manager here_10}
You can use Flex Manager to subscribe to events that occur from Flex. See Flex Events for more details.
_10import { Manager } from "@twilio/flex-ui";_10const manager = Manager.getInstance();_10_10manager.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.
_10manager.events.addListener("pluginsLoaded", () => {_10 console.log("Plugins have been loaded!");_10});
This example logs connect
in the browser's console whenever the agent connects to a call:
_10Flex.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:
_10Flex.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:
tr-task
,
tr-worker
,
tr-reservation
,
tr-queue
.
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.
_16Flex.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.
_10manager.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});