Flex Plugins

Flex Plugins are the recommended way of customizing the Flex UI. Plugins have access to all of the frontend APIs: adding and replacing components, using the Actions Framework, triggering Notifications, and more. And they provide a few additional benefits:

  • Plugins can be applied to any running Flex instance. This lets you use the same plugins across projects that simulate dev/stage/prod environments, and it's also the preferred path for any partner integration.
  • It decouples the customizations from individual flex-ui versions. As new versions are released, the plugins do not need to be rebuilt and redeployed.
  • It allows for modular development. Plugins can be scoped to particular pages, personas, or functions to help separate concerns.

The Plugin Builder is our interface for developing, testing, and releasing a plugin.

There are two ways to use the Flex Plugin Builder. You can add it to the Twilio CLI with a CLI Plugin. Alternatively, you can use the Flex Plugin Builder as a standalone tool. The Plugin Builder is an open-source project, available on npm and Github, that creates a React environment using Facebook's create-react-app. You will typically use the following technologies when building a Flex Plugin:

  • JavaScript or TypeScript, as your primary language for building a frontend experience
  • React, to interface with Flex's UI components or to create your own
  • Node, to run the development environment and start your local webserver

Using the Plugin Builder

The Plugin Builder is initiated from your command line. A new project will generate a directory that houses everything you need to interact with Flex's frontend APIs and run a local instance of the UI. By default, creating a project and then running npm start will start a local webserver, launch Flex, and display a component that demonstrates changing the default experience. The Plugin Quickstart walks through a full end-to-end example.

There's a few items to keep in mind when developing with the Plugin Builder:

  • Each project is intended to create a single plugin. If you want to build multiple plugins, you would initiate the Plugin Builder for each one.
  • Your plugin will build against the version of flex-ui which is referenced in your package.json. For example, if this is "@twilio/flex-ui": "^1", then you would start with the latest release of Flex UI v1. However, if new flex-ui versions are released, you'll only pull those in after an npm update.
  • All of your custom development will happen within the /src folder of your plugin. Only that code will be bundled when building a release of your plugin.
  • The /public folder holds the assets which will be served by your local webserver. This is where you could update your appConfig.js if there are any Flex Configuration values to update, or you could update plugins.json to load additional plugins alongside your development.
  • /public/index.html should not be updated for development. If you intend to load additional external resources, like JS or CSS assets, you can use the loadJS and loadCSS functions exposed in the flex-plugin library.
  • Although running locally, the Flex UI is still interacting with Twilio's live APIs. Be aware that tasks you complete and messages you send could potentially impact your production account. This is why we recommend developing on a dedicated 'dev' Twilio Project.

Next Steps

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.