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-uiversions. 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:
- React, to interface with Flex's UI components or to create your own
- Node, to run the development environment and start your local webserver
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-uiwhich 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
- All of your custom development will happen within the
/srcfolder of your plugin. Only that code will be bundled when building a release of your plugin.
/publicfolder holds the assets which will be served by your local webserver. This is where you could update your
appConfig.jsif there are any Flex Configuration values to update, or you could update
plugins.jsonto load additional plugins alongside your development.
/public/index.htmlshould not be updated for development. If you intend to load additional external resources, like JS or CSS assets, you can use the
loadCSSfunctions exposed in the
- 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.