Twilio's Flex UI supports Flex Plugins - self-contained code changes that allow users to modify Twilio-hosted Flex environments running on our cloud infrastructure. Plugins use Flex’s core programmability model to change or update any aspect of Flex to your liking. With our React-based architecture, users can quickly and easily create and deploy plugins that change or add new UI elements and functionality. Here are the steps to get you started:
- Flex Plugin Prerequisites
- Create Your Flex Plugin
- Add Your Code
- Test Your Plugin
- Build and Deploy Your Plugin Package
To get started creating Flex Plugins, you'll need a Twilio Flex project, along Node.js (8.0.0+) and NPM (5.0.0+). You can get Node and NPM (automatically installed with Node) from the Node.js website, nodejs.org.
If you already have Node or NPM installed, you can enter the following commands into your terminal to display the installed version:
Once the prerequisites have been met, you will need to download and install the create-flex-plugin NPM package. You can install this package from the terminal using NPM with the following command:
npm install -g create-flex-plugin
Once the create-flex-plugin tool is installed, you can now create new plugins. Create a new plugin project from the terminal with the following command:
Notice: All plugins must begin with "plugin-"; the rest is user defined. For example, a call recording plugin might be called
After submitting this command, you will see the following requests:
- You will be asked for your Twilio Flex project Account SID. You can find this on your Flex project's Project Settings page in Console.
- You will also be asked if you want to include the Admin Plugin. Responding Y (for Yes) will include the Admin UI page in Flex. Responding N (for No) will only include the Agent Desktop and Teams pages.
A new plugin directory called
plugin-name will be created. Navigate to the new plugin folder in the terminal with the following command (replace 'name' with your plugin's name):
Once in the plugin's directory, complete the setup with the following command:
With your plugin project created, you can now add your custom plugin code to the file NamePlugin.js. You can find it in the new folder that was created when you created your new plugin project:
Flex gives you the option to modify just about anything, including themes, adding or removing components, and more. For more information, please see the following Flex UI resources:
- Components - add, replace, and remove (Twilio Docs)
- Overriding themes, branding and styling (Twilio Docs)
- Actions Framework (Twilio Docs)
When your code is set, don't forget to save your file.
Once your plugin file is saved, you can test it out locally with the following command:
This will start a local instance of Flex, with your plugin file loaded up. While in the active local instance, saving your NamePlugin.js file should automatically reload your Flex window with the changes.
When you're satisfied with your code and the performance of your plugin, you will need to package it for rolling out into your hosted Flex instance. Build your plugin package with the following command:
npm run build
This will create a new directory to house your plugin package:
Access the /build folder, and find your plugin package file -
plugin-name.js. Upload this file as a public Twilio Assets file to be used the next time you load into your hosted Flex instance.