{

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 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.

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.