WhatsApp Setup

Introduction

Twilio API for WhatsApp is one of the most popular ways to send and receive messages programmatically in WhatsApp. Twilio hosts and manages WhatsApp containers in a highly available and geographically redundant infrastructure, providing us a straightforward REST API to integrate with our Bottender apps.

To move into production using the Twilio API for WhatsApp, you need a WhatsApp Business Profile. WhatsApp is currently limiting access to profiles during their API's limited availability stage. Business Profiles must be associated with a Twilio number. Request to enable your Twilio numbers for WhatsApp here.

However, it doesn't mean you have to wait to start building your app. With developer tools like the Twilio Sandbox for WhatsApp, you can test your app in a development environment without the approval from WhatsApp.

Requirements

A Twilio account is required to set up the WhatsApp channel. Make sure to sign up to get an account if you don't have one.

Once signed up, you could find your Account SID and Auth Token in the Dashboard. Just a quick note to let you know you will need them later on.

Enabling WhatsApp Channels

To enable WhatsApp channels, you can start either from new or existing Bottender apps.

New Bottender Apps

Create Bottender App is the best way to start building a new app in Bottender.

To create a project, run:

npx create-bottender-app my-app

Make sure to select the whatsapp option:

After you go through the steps, bottender.config.js and .env are generated automatically for further channel settings.

Existing Bottender Apps

First, you must have a bottender.config.js file includes the following settings:

module.exports = {
  channels: {
    whatsapp: {
      enabled: true,
      path: '/webhooks/whatsapp',
      accountSid: process.env.WHATSAPP_ACCOUNT_SID,
      authToken: process.env.WHATSAPP_AUTH_TOKEN,
      phoneNumber: process.env.WHATSAPP_PHONE_NUMBER,
    },
  },
};

Make sure to set the channels.whatsapp.enabled field to true.

By default, the Bottender server listens to the WhatsApp requests on the /webhooks/whatsapp path. However, you can overwrite the path by assigning the preferred webhook path in the channels.whatsapp.path field.

We highly recommend setting your sensitive config using process.env, so you could avoid any credentials get exposed.

Environment Configuration

Bottender utilizes the dotenv package to load your environment variables when developing your app.

To make a WhatsApp bot work, you must fill the following environment variables in your .env file:

# .env

WHATSAPP_ACCOUNT_SID=
WHATSAPP_AUTH_TOKEN=
WHATSAPP_PHONE_NUMBER=

Note: The WHATSAPP_PHONE_NUMBER variable must be formated as follows: whatsapp:{phone-number-in-e164-format}. The phone number must be e.164 formatted. As an example: WHATSAPP_PHONE_NUMBER=whatsapp:+14155552671

Setting Webhooks

After configuring your environment variables, you may start the server using the following command:

npx bottender dev

Then, you could copy the ngork URL and paste it to the Twilio Sandbox Configuration: