Twilio Flex Plugins allow you to customize the appearance and behavior of Twilio Flex. If you want to learn more about the capabilities and how to use the API, check out our Flex documentation.
This plugin contains a set of enhancements for the Real-Time Queues View.
- Filter Queues View by Agent's team_name attribute
- Manual filter to only display a "group" of queues (based on partial queue name match).
- Selectively remove a metric (waiting-tasks) based on the Queue Name
- Add Titles with Active/Waiting tasks aggregated for a set of queues (using Queue Name)
- Add tiles with metrics aggregated by Channel
The Flex Real-Time Queues View displays all queues unless you set a filter that hides or displays only some queues.
The Queues Data Table can be modifed by removing and (re)adding columns with metrics.
As you can see from this example in our Flex documentation, you can connect a custom Data Tile to the Flex Redux application store using connect from React-Redux. You need to provide the equivalent of a mapStateToProps function and return an object with props. Alternatively, in Flex v2 you can now leverage the useFlexSelector wrapper method to extract the real time queues data from the Flex Redux store for use in a React component.
To better understand the queues data that is available in the Flex Redux store, you can either use the Redux Dev Tools in Chrome or use this command in the Chrome console to inspect the real-time Queue data in the Flex Redux store via the Flex Manager:
Twilio.Flex.Manager.getInstance().store.getState().flex.realtimeQueues
To be able to display the Active and Waiting Tasks for a specific Task Channel (e.g voice, chat, sms), we would first need to calculate these totals by aggregating the Channels data for all Queues. See code for this is contained in the QueueDataUtil.getTaskCountsByChannel method. Leveraging the getTaskCountsByChannel utility method, we can create our custom Channel Data Tile component.
The Flex Real Time Queues View shows the SLA % for each Queue (and further broken down by Channel, if available). If there are a large number of queues, it may be preferable to display the SLA % aggregated by Channel across all queues. The code for this aggregation is contained in the QueueDataUtil.getSLTodayByChannel method. Leveraging this utility method, we can now create our custom Channel SLA Data Tiles:
Since there is limited screen space at the top of the Queues View to add new Data Tiles, it may make sense to combine several SLA metrics into a single data tile. For example:
This pie chart Data Tile is just one possible visualization of this data. Other options include vertical bar charts or donut charts. There are a variety of chart libraries available in npm for inclusion in your plugin.
Furthermore, for large Flex implementations with dozens or even 100s of Queues, it may make sense to aggregate the data across a group of related Queues and calculate the SLA % for this group of Queues. To be able to aggregate the data across all Queues into groups, you would need to have a consistent Queue naming format where the group is a predetermined part of the queue name (for example sales.mobile.voice.en). Here is an example of what this could look like:
The native Agent Activity Tile adds up all Unavailable activities into 1 category (Unavailable) and does not show the agent counts for each specific Unavailable activity (for example, Break, Training, Lunch etc). The Workspace agent activity data can be aggregated by Activity to display this more granular breakdown.
Several of these data tiles (Task Counts, Channel SLA, All Channels, Enhanced Agent Activity) are now also available as a feature in the PS Project template
This plugin also includes sample code to add "Data Tiles" to the Flex Teams View. Using the Worker data in the Flex Redux store associated with the Teams View, we can aggregate Worker Activity data to show Worker Activity / Status by team (assuming the team_name attribute is populated). Furthermore, we can differentiate agents in the Available activty that are truly Idle (have no tasks) or are Available but Busy (have at least 1 task)
The TypeScript (TS) version of this plugin contains the latest code for the Teams View additions. The current version of the Task Summary by Channel & Team and Activity Summary by Team now looks like this:
Note: The Teams View can only display up to 200 agents, so the worker data available for aggregation is limited to this data set.
To deploy this plugin, you will need:
- An active Twilio account with Flex provisioned. Refer to the Flex Quickstart to create one.
- npm version 5.0.0 or later installed (type
npm -vin your terminal to check) - Node.js version 12 or later installed (type
node -vin your terminal to check). We recommend the even versions of Node. - Twilio CLI along with the Flex CLI Plugin and the Serverless Plugin. Run the following commands to install them:
# Install the Twilio CLI
npm install twilio-cli -g
# Install the Serverless and Flex as Plugins
twilio plugins:install @twilio-labs/plugin-serverless
twilio plugins:install @twilio-labs/plugin-flex
Install the dependencies by running npm install:
cd plugin-dashboards
npm install
From the root directory, rename public/appConfig.example.js to public/appConfig.js.
mv public/appConfig.example.js public/appConfig.jsThe serverless function (updateWorkerWithCapacity) is only required if you are going to use the ChannelCapacityTile on the Teams View. This data tile requires that the worker channels capacity is copied to the worker attributes to be able to aggregate the total capacity across all workers. This function runs once at agent login (Plugin load) and will only update the channels in the Worker Attributes if not present or if different from the configured WorkerChannels.
Create the Serverless config file by copying .env.example to .env.
cd channel-capacity-service
cp .env.example .envEdit .env and set the TWILIO_WORKSPACE_SID variable to your Twilio TaskRouter Workspace Sid.
Set the TWILIO_SYNC_SERVICE_SID variable to your default Sync Service Sid.
Next, deploy the Serverless functions:
cd channel-capacity-service
twilio serverless:deployAfter successfully deploying your function, you should see at least the following:
✔ Serverless project successfully deployed
Deployment Details
Domain: worker-channel-capacity-service-xxx-dev.twil.io
Service:
worker-channel-capacity-service (ZS...)
Functions:
https://worker-channel-capacity-service-xxxx-dev.twil.io/updateWorkerWithCapacity
Your function will now be present in the Twilio Functions Console and be part of the "worker-channel-capacity-service" service. Copy the base URL from the function.
Create the plugin config file by copying .env.example to .env.
cd plugin-dashboards
cp .env.example .env(Add FLEX_APP_FUNCTIONS_BASE=https://worker-channel-capacity-service-xxxx-dev.twil.io if you deployed the serverless function above. Only required for Channel Capacity Tile on the Teams View)
To run the plugin locally, you can use the Twilio Flex CLI plugin. Using your command line, run the following from the root directory of the plugin.
cd plugin-dashboards
twilio flex:plugins:startThis will automatically start up the webpack dev server and open the browser for you. Your app will run on http://localhost:3000.
When you make changes to your code, the browser window will be automatically refreshed.
Once you are happy with your Flex plugin, you have to deploy then release it on your Flex application.
Run the following command to start the deployment:
twilio flex:plugins:deploy --major --changelog "Releasing Dashboards plugin" --description "Dashboards plugin"After running the suggested next step, navigate to the Plugins Dashboard to review your recently deployed plugin and confirm that it’s enabled for your contact center.
Note: Common packages like React, ReactDOM, Redux and ReactRedux are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex to provide them globally.
You are all set to test this plugin on your Flex application!
No warranty expressed or implied. Software is as is.