Outbound Caller ID 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.

Notice

This plugin is no longer maintained as of October 17th, 2022. Work to maintain this feature in Flex V2 has been moved over to the Flex Project Template where it is an optional feature

How it works

This Flex plugin add a Caller Id selection menu to the Dialpad to allow agents making outbound calls to pick the appropriate Outbound Caller Id for each call.

This plugin leverages a Twilio Function to read the list of caller Ids from an Json config file asset upon initialization. The array is stored in the application's Redux store. This config file should be updated with the Phone Numbers you have provisioned in your Twilio account. Since customers could call you back on these numbers, they should route back into your Flex application through Studio Flows & TaskRouter.

A beforeStarOutboundCall action listener is added to override the payload.callerId attribute with the selected caller Id.

Additionally this plugin includes functionality to play an announcement to both the customer and agent/worker that the Call May Be Recorded for Quality Purposes. After the outbound call task reservation has been accepted by the worker, the plugin waits for the customer to join the conference before updating the conference with the announceUrl

Configuration

Requirements

To deploy this plugin, you will need:

• An active Twilio account with Flex provisioned. Refer to the Flex Quickstart to create one.
• npm version 5.0.0 or later installed (type npm -v in your terminal to check)
• Node.js version 12 or later installed (type node -v in your terminal to check). We recommend the even versions of Node.
• Twilio CLI along with the Flex CLI Plugin and the Serverless Plugin. Run the following commands to install them:

# Install the Twilio CLI
npm install twilio-cli -g
# Install the Serverless and Flex as Plugins
twilio plugins:install @twilio-labs/plugin-serverless
twilio plugins:install @twilio-labs/plugin-flex

Setup

Install the dependencies by running npm install:

cd plugin-outbound-callerid
npm install
cd ../serverless
npm install

From the root directory, rename public/appConfig.example.js to public/appConfig.js.

mv public/appConfig.example.js public/appConfig.js

Serverless Function and Asset

This plugin includes a Twilio function that reads a config file (Twilio Asset). The config file (config.private.json) contains the list of Twilio phone numbers that the agent can select from. Update this file to match your list of allowed (and provisioned) Twilio phone numbers associated with Flex (Inbound Studio IVR flows).

Deployment

cd serverless
twilio serverless:deploy

After successfully deploying your function and asset (config file), you should see at least the following:

✔ Serverless project successfully deployed

Functions:
   https://config-functions-xxxx-dev.twil.io/get-asset-file
Assets:
   [private] Runtime.getAssets()['/config.json']

Your function will now be present in the Twilio Functions Console and be part of the "config-functions" service. Copy the base URL from the function.

Flex Plugin

Development

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

cd plugin-outbound-callerid
cp .env.example .env

Edit .env and set the FLEX_APP_FUNCTIONS_BASE variable to your Twilio Functions base URL (like https://config-functions-xxxx-dev.twil.io).

Create a new Twiml Bin in Flex with this Twiml:

<Response>
    <Say>This call will be recorded for training and monitoring purposes</Say>
</Response>

Update the FLEX_APP_ANNOUNCE_URL variable with your Twiml Bin URL (or link to mp3/wav file if you so prefer)

To run the plugin locally, you can use the Twilio Flex CLI plugin. Using your command line, run the following from the root directory of the plugin.

cd plugin-outbound-callerid
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 your Flex Plugin

Once you are happy with your Flex plugin, you have to deploy then release it on your Flex application.

Run the following command to start the deployment:

twilio flex:plugins:deploy --major --changelog "Releasing Outbound Caller Id plugin" --description "Outbound Caller Id plugin"

After running the suggested next step, navigate to the Plugins Dashboard to review your recently deployed plugin and confirm that it’s enabled for your contact center.

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.

You are all set to test this plugin on your Flex application!

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.