Voice Quality Indicator for Flex UI

Replaces the default mute icon and adds in three icons.

• wifi style indicator showing quality issues
• new mute button that changes opacity based on input level/agent speaking
• phone icon that changes opacity when the customer is speaking

Uses voice sdk network error events as to indicate error/warning and check packet loss/jitter to indicate network degraded

Active Call - Good network

Note that mute icon works as per default

ICE sdk event that indicates reconnecting (not good!)

The default view when no call is in progress

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.

Setup

Make sure you have Node.js as well as npm. We support Node >= 10.12 (and recommend the even versions of Node). Afterwards, install the dependencies by running npm install:

cd

# If you use npm
npm install

Next, please install the Twilio CLI by running:

brew tap twilio/brew && brew install twilio

Finally, install the Flex Plugin extension for the Twilio CLI:

twilio plugins:install @twilio-labs/plugin-flex@beta

Development

Run twilio flex:plugins --help to see all the commands we currently support. For further details on Flex Plugins refer to our documentation on the Twilio Docs page.