Templates
Template Setup Guides

Twillio API for Whatsapp Plugin

Link to plugin page: https://zeroqode.com/plugin/twilio-whatsapp-1570261404097x134635481500483580

Introduction

On WhatsApp, users message each other using phone numbers. To send and receive messages on WhatsApp using the Twilio Programmable Messaging API you'll need a phone number as well.

Prerequisites

You must have an account with Twilio to interact with the API for Whatsapp. Create you development account at: https://www.twilio.com/

To start using the Twilio API for WhatsApp in production, you need to enable your Twilio numbers for WhatsApp. Head over to request Twilio numbers for Whatsapp: https://www.twilio.com/whatsapp/request-access

Pricing details can be seen here: https://www.twilio.com/whatsapp/pricing/us

Twilio Sandbox for Whatsapp

Twilio Sandbox for WhatsApp allows you to prototype with WhatsApp immediately, without waiting for your Twilio number to be approved for WhatsApp. It is pre-provisioned with a Twilio phone number that is shared across all sandbox users. You can pick from a list of sandbox numbers to use when you activate the sandbox via the WhatsApp console here.

You can use the Twilio sandbox during the development period until your number is approved for Whatsapp. You can find more details on setup here.

Installation Setup

  1. Install plugin Twilio for Whatsapp

Plugin page shows the plugin is installed

2. Enter your private key into the username and password fields in plugin settings.

Plugin Settings

The key could be found in your Twilio Console Dashboard:

Twilio Console, Account SID and AUTH Token

3. After you've installed and set the plugin, create Webhook API for plugin to receive messages to your application and status callback.

Don't forget to save them in the database so that they can be displayed in your application.

You can create API workflows/endpoints after checking the box 'This app exposes a Workflow API' in the API section in the Settings Tab. These workflows are defined in the API Workflow page found in the Application Menu above the Palette.

More info regarding the API: https://bubble.io/reference#API

  • Create an API Workflow:

Image 1 Endpoint
  • From settings set option “Parameter definition” to “Detect request data”.

Image 2 Parameter definition
  • Press the “Detect data” button.

Image 3 Detect data

If the include headers in the detected data is toggled on. Please refer to Image 7 API Workflow Request Data.

  • When the “Detecting Request Data” window pops up, copy the link provided by Bubble, and add it to the Twilio.

Image 4 Detecting Request Data
  • In the "Twilio Sandbox for WhatsApp" compartment you can find the Programmable SMS > Sandbox. Put the link of your app there and press the save button.

Image 5 Adding links of your app
  • From our phone send a message to the sandbox number you've set in Twilio, but make sure that your phone number has already been included in the list of numbers in the sandbox.

  • After you receive a response as the example below, delete the word “initialization” from the link added in Twilio and press the save button (the same procedure you do with callback states).

Image 6 API Workflow Request Data
Image 7 API Workflow Request Data

In order to save the response to the database, you need to extract the data from either the ”Request Data’s body” or “Request Data’s” .

Image 8 Saving Response to database

Action:

Action “Send Message” - For this action it works to find the following parameters:

Sidtoken

AccountSid

From

Your Twilio for Whatsapp number.

To

Whatsapp destination number.

Body

Your message

Image 9 Action Send Message

Twilio WhatsApp - Forward to autopilot

We call this action at APIs Workflow when we receive a message from the Sandbox and send the new autopilot message with parameters that were received from the “Message” API Workflow. - The first parameter is Account Sid. - The second parameter can be found it in the link that Twilio offers, in the Autopilot menu > Channels > WhatsApp.

After the Autopilot was activated, Autopilot’s message must be sent back to the user, so that he would see the bot’s reply.

Image 10 Sending Autopilot's message to user

Demo to preview the settings: