Creating Plugins for Twilio Flex

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. Try your plugin
  5. Deploy your plugin

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
  • NPMnpm -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 --install

Notice: 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-name

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:

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 start

This 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 deploy

This 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.

Related Topics

Have more questions? Submit a request
Powered by Zendesk