Twilio Flex plugin Guide with basic example


This Tutorial covers following things of 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 command line interface for creating, develop,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 following command

npm --version
node --version

if nodejs installed to your machine,This gives node and npm version to console.

Once npm installed, twilio-cli can be installed using npm command

npm install twilio-cli -g

Letโ€™s start create a react code base for 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 this details, This will be stored in C:\Users\user.twilio-cli\config.json

How to create a flex plugin

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

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

The below command used to create a plugin which is based in JavaScript version

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

if you want to install plugin with typescript version, you can use 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 create following things

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

Once plugin is created, You need to start the plugin in development environment by running 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 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 flex dashboard UI of twilio

Conclusion

To conclude, Twlio 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.