Post-Call Survey Transfer Twilio Flex Plugin

Flex Plugin

Twilio Flex Plugins allow you to customize the appearance 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.

How it works

This Flex plugin adds an automatic transfer to an external number when the agent Hangs Up the call. The call transfer is invoked from the beforeHangupCall event handler. This functionality can be used in conjunction with a Studio IVR flow where caller would be prompted to opt into taking a post-call survey. The studio flow would have to set a task attribute that can be checked in the beforeHangupCall event handler.

This plugin leverages a Twilio function to perform the actual call transfer through a Twiml Dial API call.

Alternatively, this plugin also includes a Survey Transfer Button on the Call Canvas to allow the agent to initiate the post-call survey transfer. Disable or remove this button if not required for your implementation.

The application repo contains both a Flex Plugin project as well as a Twilio Serverless project. Deploy the Serverless function before deploying the Flex plugin.

Configuration

Setup

Make sure you have Node.js as well as npm. We support Node >= 10.12 (and recommend the even versions of Node). Afterwards, install the dependencies by running npm install:

cd survey-transfer-plugin
npm install
cd ..
cd serverless
npm install

Next, please install the Twilio CLI by running:

brew tap twilio/brew && brew install twilio

or

npm install twilio-cli -g

Finally, install the Flex Plugin extension for the Twilio CLI:

twilio plugins:install @twilio-labs/plugin-flex@beta

Install the Serverless toolkit for the Twilio CLI:

twilio plugins:install @twilio-labs/plugin-serverless

Serverless Functions

Deployment

cd serverless
twilio serverless:deploy

After successfull deployment you should see at least the following:

✔ Serverless project successfully deployed
Functions:
   https://<your base url>/survey-transfer/external-transfer
   

Your function will now be present in the Twilio Functions Console and part of the "post-call-survey" service. Copy the URL from one of the functions.

Flex Plugin

Development

Create the plugin config file by copying .env.example to .env

cd survey-transfer-plugin
cp .env.example .env

Edit .env and set the REACT_APP_SERVICE_BASE_URL variable to your Twilio Functions base url (this will be available after you deploy your functions). In local development environment, it could be your localhost base url.

In order to develop locally, you can use the Twilio CLI to run the plugin locally. Using your commandline run the following from the root dirctory of the plugin.

cd survey-transfer-plugin
twilio flex:plugins:start

This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:3000.

When you make changes to your code, the browser window will be automatically refreshed.

Deploy Plugin

Once you are happy with your plugin, you have to deploy then release the plugin for it to take affect on Twilio hosted Flex.

Run the following command to start the deployment:

twilio flex:plugins:deploy --major --changelog "Notes for this version" --description "Functionality of the plugin"

After your deployment runs you will receive instructions for releasing your plugin from the bash prompt. You can use this or skip this step and release your plugin from the Flex plugin dashboard here https://flex.twilio.com/admin/plugins

For more details on deploying your plugin, refer to the deploying your plugin guide.

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 to provide them globally.

Disclaimer