cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Flow Designs: Deflect phone calls to WhatsApp

Flow Designs: Deflect phone calls to WhatsApp

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:

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

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

phone-deflect-whatsapp-token.png

 

  • Choose the Flow project that is connected to WhatsApp
  • Add a new flow that starts with an event trigger named DEFLECT_CALL
 

phone-deflect-whatsapp-flow1.png

 

  • 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
 

3.png

 

  • 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
 

4.png

  • 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
 

5.png

  • Choose a phone number and configure the Voice and Fax setting
  • Select Voice calls and Configure with: Webhooks, TwiML Bins, Functions, Studio or Proxy
 

 

6.png

  • 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
 

7.png

 

  • Copy the Webhook URL
 

8.png

  • Login to the Twilio console
  • Navigate to the Phone numbers section
 

9.png

  • 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!
 

10.png

 

  • Save your changes and return to the Flow dashboard.
  • Create a new flow and add a New Phone call trigger
 

11.png

 

  • 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
 

 

12.png

  • 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
 

13.png

 

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

Labels (1)

Flow Designs: Deflect phone calls to WhatsApp

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:

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

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

phone-deflect-whatsapp-token.png

 

  • Choose the Flow project that is connected to WhatsApp
  • Add a new flow that starts with an event trigger named DEFLECT_CALL
 

phone-deflect-whatsapp-flow1.png

 

  • 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
 

3.png

 

  • 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
 

4.png

  • 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
 

5.png

  • Choose a phone number and configure the Voice and Fax setting
  • Select Voice calls and Configure with: Webhooks, TwiML Bins, Functions, Studio or Proxy
 

 

6.png

  • 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
 

7.png

 

  • Copy the Webhook URL
 

8.png

  • Login to the Twilio console
  • Navigate to the Phone numbers section
 

9.png

  • 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!
 

10.png

 

  • Save your changes and return to the Flow dashboard.
  • Create a new flow and add a New Phone call trigger
 

11.png

 

  • 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
 

 

12.png

  • 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
 

13.png

 

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

Labels (1)
Last Reviewed:
02-03-2022 08:04 PM

Flow Designs: Deflect phone calls to WhatsApp

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:

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

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

phone-deflect-whatsapp-token.png

 

  • Choose the Flow project that is connected to WhatsApp
  • Add a new flow that starts with an event trigger named DEFLECT_CALL
 

phone-deflect-whatsapp-flow1.png

 

  • 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
 

3.png

 

  • 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
 

4.png

  • 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
 

5.png

  • Choose a phone number and configure the Voice and Fax setting
  • Select Voice calls and Configure with: Webhooks, TwiML Bins, Functions, Studio or Proxy
 

 

6.png

  • 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
 

7.png

 

  • Copy the Webhook URL
 

8.png

  • Login to the Twilio console
  • Navigate to the Phone numbers section
 

9.png

  • 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!
 

10.png

 

  • Save your changes and return to the Flow dashboard.
  • Create a new flow and add a New Phone call trigger
 

11.png

 

  • 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
 

 

12.png

  • 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
 

13.png

 

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

Labels (1)
Version history
Last update:
‎06-19-2021 02:31 PM
Updated by:
Contributors