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:

1. Flex Plugin Prerequisites
2. Create Your Flex Plugin
3. Add Your Code
4. Test Your Plugin
5. Build and Deploy Your Plugin Package

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

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

Create Your 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:

create-flex-plugin plugin-name

Notice: All plugins must begin with "plugin-"; the rest is user defined. For example, a call recording plugin might be called plugin-recording.

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):

cd plugin-name

Once in the plugin's directory, complete the setup with the following command:

npm install

Add 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.js

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)
• How to Control Recordings with Twilio Flex

Once your code is set, don't forget to save your file.

Test Your Plugin

Once your plugin code is saved, you can test it out locally with the following command:

npm start

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.

Build and Deploy Your Plugin Package

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:

../plugin-name/build

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.

Related Topics

• Overview of Flex UI (Twilio Docs)
• Building Flex Plugins (Twilio Docs)
• Adding Components to Flex UI (Twilio Docs)