Twilio Flex plugin that empowers contact center users to configure default and custom keyboards shortcuts in their day-to-day activities to increase efficiency and enjoyment when using Twilio Flex.
The Keyboard Shortcuts Manager Twilio Flex plugin empowers contact center users to configure default and custom keyboards shortcuts in their day-to-day activities to increase efficiency and enjoyment when using Twilio Flex.
With the release of Flex 2.1, Flex now supports keyboards shortcuts for the most common actions performed by agents. The official documentation can be found here.
The 2.1 Flex UI exposes various APIs to interact with the default keyboard shortcuts, as well as adding custom ones. The official documentation can be found here.
The plugin is available to both agents and supervisors alike and it allows the following functionalities:
View default Flex keyboard shortcuts:
This view allows users to see the default Flex keyboard shortcuts and their current mappings.
View custom Flex keyboard shortcuts
This view allows users to see custom added keyboard shortcuts and their current mappings.
A settings screen for easy management
Delete shortcuts
Remap a shortcut
Adjust key throttling
Disable keyboard shortcuts
Reset keyboard shortcuts to default values
User modification to both default and custom keyboard shortcuts are stored into browser local storage and read during plugin initialization.
Twilio Flex comes with a list of default shortcuts which can be found here.
| Action | Description | Shortcut |
|---|---|---|
| Toggle status menu | Opens and closes the agent Activity menu | CTRL + SHIFT + S |
| Accept task | Accepts incoming tasks. Call tasks will always be accepted first. If there are multiple tasks, they will be accepted one at a time in the order they came in (with the oldest first). If there are no incoming tasks, this shortcut will do nothing. | CTRL + SHIFT + A |
| Reject task | Rejects incoming tasks. Call tasks will always be rejected first. If there are multiple tasks they will be rejected one at a time in the order they came to the user (oldest first).If there are no incoming tasks, this shortcut will do nothing. | CTRL + SHIFT + R |
| Navigate down/up the task list | Navigates up and down from the currently selected task in the task list. If no task is selected, the top task is selected. Repeated presses will go down and up the list to the next task, looping round to the other end when you reach the top or bottom of the list. | CTRL + SHIFT + T (up) and CTRL + SHIFT + Y (down) |
| Toggle mute on active call | Places yourself on and off mute. | CTRL + SHIFT + M |
| Toggle hold on active call | Places the other participant of a call on and off hold. If there are more than two participants in the call, this shortcut will do nothing and a notification will appear. | CTRL + SHIFT + H |
| Logout | Will log out the user out of Flex UI.If the user has an active call or pending tasks, this shortcut will do nothing. | CTRL + SHIFT + 0 |
| End the currently selected task | This shortcut has two behaviors based on the channel type and status of the selected task. The first keypress of this shortcut will close the channel and move the task to "wrap up". Ongoing calls will hang up and chats will be ended. If the call has multiple participants, the conference will end for everyone. The second keypress (or if the task is already in "wrap up" mode) will complete the task.There is a 1-second timeout to prevent accidental repeat keypresses. If the shortcut is used a second time too quickly, it will do nothing. A notification will appear. | CTRL + SHIFT + 1 |
| Return to active call | Will navigate back to the call view if the agent is not on this view. | CTRL + SHIFT + C |
With the help of new Flex APIs, it is possible to add custom shortcuts like described here. The following list of custom shortcuts are all custom values preconfigured as a part of this plugin.
| Action | Description | Shortcut |
|---|---|---|
| Toggle dialpad | Open and close the dialpad | CTRL + SHIFT + D |
| Toggle sidebar | Open and close the sidebar | CTRL + SHIFT + Q |
| Navigate to tasks | Navigate to the Tasks view | CTRL + SHIFT + K |
| Debugging assistance | A debugging assistenance shortcut that looks various Agent information into the browser console for easy assistance. Currently logged information includes: account SID, worker SID, workspace SID, and worker attributes. | CTRL + SHIFT + 9 |
| Navigate to keyboard shortcuts | Navigate to the Keyboard Shortcuts manager | CTRL + SHIFT + L |
| Navigate to Teams View | Open the Teams View | CTRL + SHIFT + I |
| Navigate to Real-time Queues View | Open Real-time Queues View | CTRL + SHIFT + O |
This plugin only supports Twilio Flex 2.1 and above because support for keyboard shortcuts has been introduced with Flex 2.1.
The only known issue at the moment is that the number 2 mapping does not work. There are no errors captured, but at the moment, it will simply not map any new actions to that keybind.
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.
To deploy this plugin, you will need:
- An active Twilio account with Flex provisioned. Refer to the Flex Quickstart to create one.
- Flex version 2.1 or above
- 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). Even versions of Node are. Note: In order to install Twilio Flex CLI plugin that is needed for locally running Flex, Node version 16 is the latest supported version (if you are using Node 18., please revert back or use Node Version Manager). - Twilio CLI along with the Flex CLI Plugin
- Once the Twilio CLI and Twilio Flex CLI plugins are successfully installed, configure your Twilio CLI profile. Note: This step is required if you are running Twilio CLI for the first time or if you have multiple Twilio CLI profiles configured.
Install the dependencies by running npm install:
cd flex-keyboard-shortcuts
npm installFrom the root directory, rename public/appConfig.example.js to public/appConfig.js.
mv public/appConfig.example.js public/appConfig.jsTo 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 flex-keyboard-shortcuts
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 Keyboard Shortcuts Manager" --description "Keyboard Shortcuts Manager"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.
Additionally, it is also possible to create a relase using the Twilio CLI as described here.
twilio flex:plugins:release --plugin [email protected] --name "Autogenerated Release 1679673397275" --description "Keyboard shortcuts manager for Flex UI"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!
This software is to be considered "sample code", a Type B Deliverable, and is delivered "as-is" to the user. Twilio bears no responsibility to support the use or implementation of this software.
Special thanks to my buddy Mike Schmitt for his insights, testing, and input; I appreciate you.