Transfer and deflect phone calls to WhatsApp using Twilio
Deflecting calls to messaging can decrease the load on your customer service department and at the same time improve your customer satisfaction rates.
In this tutorial, we’ll walk you through setting up phone deflection to WhatsApp using Twilio and Flow.
The solution
In this use case we will configure a phone number that has an IVR. The IVR will offer a customer the choice to use WhatsApp instead of waiting on the phone for a customer service agent.
So the customer flow looks like:
A customer dials the phone number
An IVR picks up the call and will ask the customer to press 1 if the customer would like to use WhatsApp instead
If the customer presses 1, a WhatsApp templated message is sent and the call gets disconnected
If the customer presses 2, the call gets forwarded to a human operator
Requirements
To make this work you’ll need a couple of things:
Login to Flow Pro or Enterprise account
Twilio account with the connected phone number (see below)
WhatsApp phone number connected to Flow
An approved WhatsApp templated message
Note: This article demonstrates WhatsApp and does not explain how to enroll a WhatsApp Business Account. Also note that this same use case would work with for example SMS, MessageMedia or a customer service solution like Khoros
Step 1. Setting up the phone number
It all starts with a phone number: you’ll need to buy one or add an existing number to Twilio. This can be, but does not have to be the same phone number you use for WhatsApp.
Using an existing number, not connected to Twilio
For using an existing phone number that is not connected to Twilio you’ll have 3 options:
Migrate your phone number to Twilio. This will take a couple of weeks and you’ll need to contact Twilio support
Transfer, or forward, a call to a Twilio connected number using your existing phone solution like Avaya, Genesys etc
Create a SIP connection between Twilio and the existing software connected to your phone number
Note: Need help with this? No worries, please contact Twilio Support.
Buying a new phone number
Twilio offers unused phone numbers for different countries. Most of them you can easily buy within the Twilio console. Make sure the phone number you purchase supports voice! If you have any questions regarding the availability in your region, please contact Twilio Support.
Step 2. Configuring Flow
Open the Flow dashboard
Go to the API Keys section of your organization settings
Add a new Management API key
Choose the Flow project that is connected to WhatsApp
Add a new flow that starts with an event trigger named DEFLECT_CALL
Add a code action below the event that executes the following code:
async payload => {
// CHANGE THE ID WITH YOUR OWN TEMPLATE ID
return await toolbelt.whatsapp.send360Template({
id: 'YOUR UNIQUE ID'
})
}
After saving the code action and flow, open the integrations section
Add a new REST API integration
Choose a Management API key, save the integration and copy the token
Step 3. Configuring Twilio
When we are able to receive inbound calls with Twilio, you can configure the Twilio Voice API. Flow provides a built-in Twilio Voice integration that allows you to create an intelligent IVR system, but you can also create the setup using the Twilio Voice API or Twilio Studio.
Option 1: Using Twilio Studio
Setting up the IVR using Twilio studio requires a Flow REST API integration. We basically configure the IVR within Twilio and when a user presses 1 we execute a piece of code that will send the WhatsApp templated message.
Configuring Twilio Studio
Open Twilio Studio
Create a new flow and add a starting trigger
Add a Gather input on call and add the speech-to-text: Welcome! Press 1 for WhatsApp or 2 to connect with an agent
Add a Split Based on... and connect it with the User Pressed key of the Gather input widget
Add 2 conditions for the key pressed 1 and 2
Add a Run function widget and choose to create a new Function
Add the following code to this new Function:
const request = require("then-request"); //6.0.2
// READ MORE INSTRUCTIONS HERE:
// https://flow.ai/docs/api-docs/#rest-api-broadcast
const apiEndpoint = 'https://api.flow.ai/rest/v1/broadcast/instant';
// REPLACE THE FOLLOWING CONFIGURATION
const channelName = 'whatsapp360';
const eventName = 'DEFLECT_CALL';
const channelExternalId = '+1234567890'; // Your WhatsApp phone number
const apiToken = '' // The API token from the Flow.ai REST API
exports.handler = function(context, event, callback) {
var phoneNumber = event.phonenumber.trim().replace('+','');
var body = {
audience: [{
name: 'Anonymous',
phoneNumber,
profile: {
}
}],
channel: {
channelName,
externalId: channelExternalId
},
payload: {
type: 'event',
eventName: eventName
}
};
var options = {
headers:{
'Content-Type': 'application/json',
'Authorization': apiToken
},
body: JSON.stringify(body)
};
request('POST', apiEndpoint, options).done(function(res) {
callback(null, "OK");
});
};
You'll need to paste the Flow.ai REST API token (we've created in step 2) into the above code and your WhatsApp phone number as the externalId
Make sure you save the function and navigate to the Phone numbers section
Choose a phone number and configure the Voice and Fax setting
Select Voice calls and Configure with: Webhooks, TwiML Bins, Functions, Studio or Proxy
This is the basic setup in Twilio studio, you can now try it out by dialing the phone number!
Option 2: Using the Flow Phone integration
Create a separate Flow project
Choose the phone channel or add a new (phone) Twilio voice integration
Copy the Webhook URL
Login to the Twilio console
Navigate to the Phone numbers section
Choose a phone number and add the copied webhook into the A CALL COMES IN field. Make Sure the drop down has “HTTP POST” selected!
Save your changes and return to the Flow dashboard.
Create a new flow and add a New Phone call trigger
Add an Ask reply action and enter the text Welcome! You can also reach us using WhatsApp. Press #1 for whatsapp or press #2 to ask a question
Next add 2 Digit triggers
Right below the first digit trigger, add an Action reply
Select Create new Code action and paste the following code:
async payload => {
try {
// READ MORE INSTRUCTIONS HERE:
// https://flow.ai/docs/api-docs/#rest-api-broadcast
const apiEndpoint = 'https://api.flow.ai/rest/v1/broadcast/instant';
// REPLACE THE FOLLOWING CONFIGURATION
const channelName = 'whatsapp360';
const eventName = 'DEFLECT_CALL';
const channelExternalId = '+1234567890'; // Your WhatsApp phone number
const apiToken = '' // The API token from the Flow.ai REST API
await request({
method: 'POST',
url: apiEndpoint,
headers:{
'Content-Type': 'application/json',
'Authorization': apiToken
},
body: {
audience: [{
name: 'Anonymous',
phoneNumber,
profile: {
}
}],
channel: {
channelName,
externalId: channelExternalId
},
payload: {
type: 'event',
eventName: eventName
}
}
})
} catch(err) {
console.error('An error making a request', err)
}
}
You'll need to paste the Flow.ai REST API token (we've created in step 2) into the above code and your WhatsApp phone number as the externalId
Save the Code action and Flow
This is the basic setup in Flow, you can now try it out by dialing the phone number!
Need any help?
No problem, if you have questions regarding Twilio Studio or phone numbers, reach out to Twilio support! Any other questions? Feel free to ask at our Flow slack.
View full article