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.

B:\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 a 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.