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
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:
- Node.js:
node -v - NPM:
npm -v
Create Your Flex Plugin
Once these prerequisites have been met, you can now create new plugins. Create a new plugin project from the terminal with the following command:
npm init flex-plugin plugin-sample --installNotice: All plugins must begin with "plugin-"; the rest is user defined. For example, a call recording plugin might be called plugin-recording.
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):
cd plugin-nameAdd Your Code
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:
../plugin-name/src/NamePlugin.jsFlex 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)
- How to Control Recordings with Twilio Flex
Once your code is set, don't forget to save your file.
Try your plugin
Once your plugin code is saved, you can try it out locally with the following command:
npm startThis will start a local instance of Flex running on localhost:3000with your plugin file loaded. While in the active local instance, saving your NamePlugin.js file should automatically reload your Flex window with the changes.
Deploy your plugin
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. Deploy your plugin package with the following command:
npm run deployThis will publish your plugin as a Private Asset that is accessible by the Functions & Assets API and can be used the next time you load your hosted Flex instance.