# Flex Manager

> \[!NOTE]
>
> For the Flex UI 2.x.x version of this content, see [Manager](/docs/flex/developer/ui/overview-of-flex-ui-programmability-options#manager) in the overview of Flex UI programmability options.

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 the Chat client directly through the Flex Manager.

Aside from Flex itself, Manager also gives you access to the [Programmable Chat](/docs/chat), [Sync](/docs/sync), [Client](/docs/voice/sdks/javascript), and [TaskRouter](/docs/taskrouter) SDKs.

## Manager class

For a full list of attributes and methods, see the [Manager class](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Manager.html) documentation in the Flex UI API Reference.

## Obtain the Manager instance

You can access the Manager using these methods:

* the `getInstance` method
* the `create` method
* the `init` method

### Call the `getInstance` method

```javascript
Flex.Manager.getInstance()
```

### Call the `create` method when initializing Flex

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

You can check out the [sample project](https://github.com/twilio/flex-ui-sample) to learn how to initialize Flex.

### Call the `init` method of your plugin

```javascript
init(flex, manager) {
  // use manager here
}
```

## Subscribe to Manager events

You can use Flex Manager to subscribe to events that occur from Flex. For more details, see [Flex Events](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/FlexEvent.html) in the Flex UI API Reference.

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

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

```

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

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

```

## Common use cases and examples

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

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

```

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:

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

## insightsClient

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](https://media.twiliocdn.com/sdk/js/sync/releases/0.12.2/docs/LiveQuery.html) class: to query Flex data and receives pushed updates whenever new (or updated) records would match the given expression
* [InstantQuery](https://media.twiliocdn.com/sdk/js/sync/releases/0.12.2/docs/InstantQuery.html) 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](/docs/sync/live-query). The query can be an empty string, in which case, the whole data set is returned (for example, all workers).

### LiveQuery example

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.

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

```

## InstantQuery example

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.

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