Queued Callbacks and Voicemail for Flex (Working Remix w/More Complete Instructions & Advanced Tips)

The Queued Callback and Voicemail for Flex plugin helps Flex admins automate handling of agent callback requests from customers instead of having them wait longer in a queue.

Demo

Set up

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 version 12.21 or later installed (type node -v in your terminal to check)

• 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
  

• A GitHub account

• Native Dialpad configured on your Flex instance

Twilio Account Settings

Before we begin, we need to collect all the config values we need to run the application:

Config Value	Description
Account Sid	Your primary Twilio account identifier - find this in the Console.
Serverless Deployment Domain	The resulting Serverless domain name after deploying your Twilio Functions
Workspace SID	Your Flex Task Assignment workspace SID - find this in the Console TaskRouter Workspaces page

Local development

After the above requirements have been met:

1. Clone this repository

git clone git@github.com:twilio-contact-center/plugin-queued-callbacks-and-voicemail.git

2. Change into the public subdirectory of the repo and run the following:

cd plugin-queued-callbacks-and-voicemail/public && mv appConfig.example.js appConfig.js

2.5 Update the appConfig.js file to point to the correct twilio project.

var accountSid = "SOME_ACCOUNT_SID";
var serviceBaseUrl = "melon-ocelot-5745.twil.io";
...

3. Install dependencies

npm install

4. Deploy your Twilio Functions and Assets

5. Run the application

twilio flex:plugins:start

See Twilio Account Settings to locate the necessary environment variables.

7. Run the application

npm start

8. Navigate to http://localhost:3000

9. If you want to commit without the linter interferring, run git commit -am "SOME_MESSAGE" --no-verify with the --no-verify flag.

Twilio Serverless deployment

You need to deploy the functions associated with the Callback and Voicemail Flex plugin to your Flex instance. The functions are called from the plugin you will deploy in the next step and integrate with TaskRouter, passing in required attributes to generate the callback and voicemail tasks, depending on the customer selection while listening to the in-queue menu options.

Pre-deployment Steps

1. From the root directory of your copy of the source code, change into serverless and rename .env.example to .env.

cd serverless && mv .env.example .env

2. Open .env with your text editor and modify TWILIO_WORKSPACE_SID with your Flex Task Assignment SID.

TWILIO_WORKSPACE_SID=WSxxxxxxxxxxxxxxxxxxxxxx`

3. To deploy your Callback and Voicemail functions and assets, run the following:

$ cd serverless && npm run deploy

## Example Output
Deploying functions & assets to the Twilio Runtime
Env Variables
⠇ Creating 4 Functions
✔ Serverless project successfully deployed

Deployment Details
Domain: plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io
Service:
  plugin-queued-callbacks-voicemail-functions 
Functions:
  https://plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io/inqueue-callback
  https://plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io/inqueue-utils  
  https://plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io/queue-menu
  https://plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io/inqueue-voicemail

Assets:
  https://plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io/assets/alertTone.mp3
  https://plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io/assets/guitar_music.mp3

Note: Copy and save the domain returned when you deploy a function. You will need it in the next step. If you forget to copy the domain, you can also find it by navigating to Functions > API in the Twilio Console.

Debugging Tip: Pass the -l or logging flag to review deployment logs. For example, you can pass -l debug to turn on debugging logs.

4. Open .env with your text editor and add DOMAIN_NAME with your newly published serverless domain name to the serverless .env file, make sure you exclude the https:// portion whereas the serverless function code adds it back itself.

...
DOMAIN_NAME=plugin-queued-callbacks-voicemail-functions-4135-dev.twil.io

5. Finally, republish the serverless functions by running npm run deploy again, so that the serverless functions will have access to the correct DOMAIN_NAME env variable. This will only work right if the deploy script has the --override-existing-project flag. Otherwise it will generate a new domain name every time you deploy.

$ cd serverless && npm run deploy

Deploy your Flex Plugin Using The Twilio Hosted Method

Once you have deployed the functions, it is time to deploy the plugin to your Flex instance.

Run the following commands in the plugin root directory. We will leverage the Twilio CLI to build and deploy the Plugin.

1. Rename .env.example to .env.

2. Open the root .env file with your text editor and modify the REACT_APP_SERVICE_BASE_URL property to the Domain name you copied in the previous step. Make sure to prefix this one with "https://".

   plugin-queued-callbacks-and-voicemail $ mv .env.example .env
   
   # .env
   REACT_APP_SERVICE_BASE_URL=https://plugin-queued-callbacks-voicemail-functions-4135-dev.twil.io
   

3. When you are ready to deploy the plugin, run the following in a command shell:

   plugin-queued-callbacks-and-voicemail $ twilio flex:plugins:deploy --major --changelog "Updating to use the latest Twilio CLI Flex plugin" --description "Queued callbacks and voicemail"
   

4. To enable the plugin on your contact center, follow the suggested next step on the deployment confirmation. To enable it via the Flex UI, see the Plugins Dashboard documentation.

Deploy your Flex Plugin Using The Self Hosted Method

Once you have deployed the functions, it is time to deploy the plugin to your self hosted location.

Run the following commands in the plugin root directory. We will leverage the Twilio CLI to build the Plugin and we will leverage S3 and Cloudfront to deploy the built plugin bundle along with a default Twilio index.html file which will load the plugin for you once they are all deployed.

1. Rename .env.example to .env.

2. Open the root .env file with your text editor and modify the REACT_APP_SERVICE_BASE_URL property to the Domain name you copied in the previous step. Make sure to prefix this one with "https://".

   plugin-queued-callbacks-and-voicemail $ mv .env.example .env
   
   # .env
   REACT_APP_SERVICE_BASE_URL=https://plugin-queued-callbacks-voicemail-functions-4135-dev.twil.io
   

3. When you are ready to deploy the plugin, run the following in a command shell:

   plugin-queued-callbacks-and-voicemail $ S3_ACCESS_KEY=SOME_ACCESS_KEY S3_SECRET=SOME_SECRET S3_DEPLOY_PATH=s3://zoot.dev/queued-callbacks-and-voicemail/ CLOUDFRONT_DISTRIBUTION_ID=E2F0VFY6O682TE npm run deploy
   

Phone Number Configuration(s)

1. Change some phone numbers in the twilio console to point to your default Voice IVR studio flow.

Studio Configuration

1. Change your default Voice IVR studio flow's SendCallToAgent widget's HOLD MUSIC TWIML URL to point to your new deployed serverless functions' domain with /queue-menu at the end, so that it will invoke the appropriate serverless function after task creation--PLEASE NOTE, this is just a hacky way I got it work in trying to put together a quick working example--there is most definitely a better spot to tie into everything for this--the key is you just got to tie this into all your existing infrastructure AFTER you first create the task-router task--otherwise it won't work. A better spot to tie into everything might be via the task-router workspace's ON_TASK_CREATED callback.

   Regardless, make sure you update the first part of the following url to YOUR serverless functions' domain name.

   https://plugin-queued-callbacks-voicemail-functions-xxxx-dev.twil.io/queue-menu
   

Task Router Configurations

1. You need to add a new task-channel named Callback for the callbacks to work right in this example
2. You need to add a new task-channel named Voicemail for the voicemails to work right in this example

Local Serverless Functions Custom Queued Callback Configurations

The serverless implementation can be customized using the file options.js. Options include:

• sayOptions: Attributes for the <Say> verb used to prompt the customer. You can read more about these attributes and their values on TwiML™ Voice: <Say>
• holdMusicUrl: Relative or absolute path to the audio file for hold music (default: /assets/guitar_music.mp3). If no domain is provided (i.e. relative path), the serverless domain will be used.
• getEwt: Enable Estimated Waiting Time in voice prompt (default: true)
• statPeriod: Time interval (in minutes) for Estimated Waiting Time stats evaluation (default: 5 minutes)
• getQueuePosition: Enable Queue Position in voice prompt (default: true)
• VoiceMailTaskPriority: Priority for the Task generatared by the VoiceMail (default: 50)
• VoiceMailAlertTone: Relative or absolute path to the ringback tone that Twilio will play back to the Agent when calling a customer from a voice mail task (default: /assets/alertTone.mp3). If no domain is provided (i.e. relative path), the serverless domain will be used. This is not currently implemented in the Flex plugin, and it's for future usage
• CallbackTaskPriority: Priority for the Task generatared by VoiceMail (default: 50)
• CallbackAlertTone: Relative or absolute path to the ringback tone that Twilio will play back to the Agent when calling a customer from a callback task (default: /assets/alertTone.mp3). If no domain is provided (i.e. relative path), the serverless domain will be used. This is not currently implemented in the Flex plugin, and it's for future usage
• TimeZone: Timezone configuration. This is used to report time and date of voicemail (default America/Los_Angeles)

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.