{

Twilio Flex plugin Guide with basic example


This Tutorial covers the following things about the twilio flex plugin.

  • twilio flex plugin CLI tutorials with examples
  • How to create a custom plugin
  • Deploy and release the plugin to production

Twilio provides Cli for creating, running, and testing the plugins.

CLI is abbreviated as a command-line interface for creating, developing, testing, and release of the flex plugins for Twilio.

Flex plugins are useful for customizing Flex UI and component modifications in Twilio,

Required things

  • Nodejs installed
  • npm command

Install flex plugin cli

flex plugin is based on Nodejs framework, Please make sure that nodejs is installed by running the following command

npm --version
node --version

if nodejs is installed on your machine, This gives node and npm versions to the console.

Once npm is installed, twilio-cli can be installed using the npm command.

npm install twilio-cli -g

Letโ€™s start to create a react code base for the plugin.


twilio login

It will ask for Account SID and Auth Token details.

The Account SID for your Twilio Account or Subaccount:

Once you entered all these details, This will be stored in C:\Users\user.twilio-cli\config.json.

How to create a flex plugin

flex:plugins: create is a command to create a plugin,

The name of the plugin always starts with the plugin-[name], the name is your plugin name

The below command is used to create a plugin that is based on the JavaScript version.

twilio flex:plugins:create plugin-example --install4

if you want to install the plugin with a typescript version, you can use the below command

twilio flex:plugins:create plugin-example --install --typescript

Letโ€™s create a new plugin project plugin-example


:\flex>twilio flex:plugins:create plugin-example --install --typescript
ยป   Warning: twilio-cli update available from 2.19.0 to 2.22.0.
 Creating project directory
 Installing dependencies

  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
  โ”‚                                                                    โ”‚
  โ”‚   Your Twilio Flex Plugin project has been successfully created!   โ”‚
  โ”‚                                                                    โ”‚
  โ”‚                                                                    โ”‚
  โ”‚   Development:                                                     โ”‚
  โ”‚   $ cd plugin-example/                                             โ”‚
  โ”‚   $ npm start                                                      โ”‚
  โ”‚                                                                    โ”‚
  โ”‚   Build Command:                                                   โ”‚
  โ”‚   $ cd plugin-example/                                             โ”‚
  โ”‚   $ npm run build                                                  โ”‚
  โ”‚                                                                    โ”‚
  โ”‚   Deploy Command:                                                  โ”‚
  โ”‚   $ cd plugin-example/                                             โ”‚
  โ”‚   $ npm run deploy                                                 โ”‚
  โ”‚                                                                    โ”‚
  โ”‚   For more info check the README.md file or go to:                 โ”‚
  โ”‚   โžก https://www.twilio.com/docs/flex                               โ”‚
  โ”‚                                                                    โ”‚
  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

The above command creates the following things

  • Created plugin project directory based on React
  • Install npm dependencies

Once the plugin is created, You need to start the plugin in the development environment by running the following commands

cd plugin-name
twilio flex:plugins:start

Now flex dev instance is running at 3000 port, You can call http:\localhost:3000 you can write a plugin code with react component javascript can able to customize contact center styles and component flow can be modified

Deploy flex plugin to production

Twilio CLI provides deploy command as seen below

twilio flex:plugins: deploy --description "Sample plugin example"

You can release the plugin and enable the plugin in the production

twilio flex:plugins:release --name "initial version release" --description "Enable  Plugin example"--plugin plugin-name@1.0.0โ€‹

You can check the plugin in the flex dashboard UI of Twilio

Conclusion

To conclude, Twilio CLI installation is covered, Then how to create a plugin, build, deploy and release the flex plugin to production.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.