Back to Blog

Deflecting Phone calls to WhatsApp

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.ai.

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:


Requirements

To make this work you’ll need a couple of things:

  1. Flow.ai Pro or Enterprise account
  2. Twilio account with connected phone number (see below)
  3. WhatsApp phone number connected to Flow.ai
  4. 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:

  1. Migrate your phone number to Twilio. This will take a couple of weeks and you’ll need to contact Twilio support
  2. Transfer, or forward, a call to a Twilio connected number using your existing phone solution like Avaya, Genesys etc
  3. 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 or Flow.ai 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.ai

Select Phone numbers in Twilio

New flow

async payload => {
  // CHANGE THE ID WITH YOUR OWN TEMPLATE ID
  return await toolbelt.whatsapp.send360Template({
    id: 'YOUR UNIQUE ID'
  })
}

Step 3. Configuring Twilio

When we are able to receive inbound calls with Twilio, you can configure the Twilio Voice API. Flow.ai 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.ai 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

Twilio studio new gather

Twilio studio new split

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");
  });
};

Select Phone numbers in Twilio

Select Phone numbers in Twilio


Option 2: Using the Flow.ai Phone integration

Create a new Phone IVR project

Copy the webhook URL

Select Phone numbers in Twilio

Select Phone numbers in Twilio

Create flow with call trigger

Add ask and digit triggers

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)
  }
}

Add ask and digit triggers


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.ai slack.

Get StartedContact us