Minimum Flex UI version:
Tested Flex UI versions:
Twilio Flex Plugins allow you to customize the apperance and behavior of Twilio Flex. If you want to learn more about the capabilities and how to use the API, check out our Flex documentation.
This plugin gives workers the ability to add an external participant to an inbound call. Participant controls such as Hold Participant and Remove Participant work properly for each conference participant. After adding an external participant to the call, the worker can drop and the conference will continue with the remaining participants.
This workflow will allow workers to conference in external parties and perform a warm transfer by introducing the customer to the external party before disconnecting from the call.
While this guide uses Twilio Functions for hosting the serverless code, you are free to use the platform of your choice for running server side code. If you decide to use something other than Twilio Functions, be sure to:
fetch
statements to target the appropriate URL for each FunctionTwilio Functions is currently available as a beta release. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Beta products are not covered by a Twilio SLA.
See this article for more information on beta product support.
The Twilio Functions this plugin depends on require ACCOUNT_SID
and AUTH_TOKEN
as environment variables in the context object. Perform the following steps to ensure these variables are available to your functions.
Enable Account_SID and AUTH_TOKEN
is checkedSave
button at the bottom of the pageThere are a couple Node packages these Functions depend on. Perform the following steps to ensure these packages are available to your Functions.
Save
button at the bottom of the pagePlease follow these steps for each file in the /functions
directory before attempting to run this plugin. All Twilio Functions must be deployed prior to running the plugin or certain capabilities will not work.
/functions
directoryBlank
template and click Create
Function Name
and Path
, paste the Function file name you copied in step 2Access Control
box labeled Check for valid Twilio signature
Code
text areaSave
button at the bottom of the page/functions
directory until all Functions have been createdFeel free to reference our Twilio Function documentation for more details on Functions and how they work.
Make sure you have Node.js as well as npm
installed.
Afterwards install the dependencies by running npm install
:
cd
# If you use npm
npm install
In order to develop locally, you can use the Webpack Dev Server by running:
npm start
This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:8080
. If you want to change that you can do this by setting the PORT
environment variable:
PORT=3000 npm start
When you make changes to your code, the browser window will be automatically refreshed.
Once you are happy with your plugin, you have to bundle it, in order to deply it to Twilio Flex.
Run the following command to start the bundling:
npm run build
Afterwards, you'll find in your project a build/
folder that contains a file with the name of your plugin project. For example plugin-example.js
. Take this file and upload it into the Assets part of your Twilio Runtime.
Note: Common packages like React
, ReactDOM
, Redux
and ReactRedux
are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex which would provide them globally.