Create a Chatbot using WhatsApp Cloud API
Tags: javascript, opensource, webdev, showdev
Published: 2022-06-27 05:02:05

Hello folks, today in this article, we will be going through how you can create a chatbot and integrate it with **WhatsApp Cloud API**. We will be also giving this chatbot a brain using an **OpenAI** model.

## Prerequisites

To create a WhatsApp chatbot you will need a few Prerequisites:

- A Meta Business Account
- A Meta Developer Account
- An OpenAI Account

You can create these easily using your existing Facebook account or create a new one.

Once you have all of these ready, we can get started by configuring in Meta Developer account to enable WhatsApp integration.

## Configuration

### Create Meta App

Logon to [https://developers.facebook.com/apps/](https://developers.facebook.com/apps/).

Create a New App.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4q5okp52n4qfier5e4t.png) 

Choose **Business**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbv78kyiv4rafmvsmtqi.png)

Choose your **Business Manager Account** and enter other details

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drgxog3717gz99w8h5m9.png) 

Click on **Create App** and your app will be created.

### Add WhatsApp Integration

Open your app page and you will land on this screen.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezvo1x40gafq2bd7bxsb.png)
 
Scroll down and find **WhatsApp**. Click on **Set up**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmafaq9tsh92dxe59par.png) 

### WhatsApp Configuration

You will see this screen. Here you have been assigned **a Temporary Token** and **a Test WhatsApp Number**. We will use these to send and receive messages on that Test WhatsApp Number. In future, if you want, you can connect real numbers as well which will be a proper WhatsApp Business account. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc06lfikhta4zjald6rv.png) 

You have to configure a few recipient WhatsApp numbers for testing, up to 5 numbers can be added.

The **Phone Number ID** shown will be used later to use WhatsApp Cloud API, so keep it handy.

### Authentication Token

The final piece of configuration is generation of an authentication token which will be used while communicating with Meta APIs. 

Log on to [https://business.facebook.com/](https://business.facebook.com/) and open your Business Settings.

Navigate to the **System Users** section from left-hand menu

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7cvkdj1a34b77skacgv.png) 

You can add a user or if it already exists, click on **Generate New Token**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r8zum32vrtgm4lvjwuv.png)

Select the app you created earlier and check **whatsapp_business_management** and **whatsapp_business_messaging** permissions and then copy this token.

## Application

So we will develop our application using **NodeJS and Express**

We will install basic dependencies like `express` `morgan` `helmet` `cors` `axios` `dotenv`

We will create two API routes one for verification of the webhook (this will be only used once) and one to receive messages/updates from WhatsApp

- GET `/api/webhook` - To verify this webhook
- POST `/api/webhook` - To receive messages from WhatsApp

So, we can configure a webhook in WhatsApp so that every time a message or update comes we will get notified of that and we can respond accordingly.

This GET API of `/api/webhook` will be used for verification of this webhook where WhatsApp will send a token and a couple of parameters and we will verify if all those matches whatever is configured on our server. It is called a Verification Token. We create a random long verification token and store it in the environment variables of our server.

This will be our API route for GET `/api/webhook`

```javascript
app.get("/api/webhook", (req, res) => {
  const VERIFY_TOKEN = process.env.VERIFY_TOKEN;

  // Parse params from the webhook verification request
  let mode = req.query["hub.mode"];
  let token = req.query["hub.verify_token"];
  let challenge = req.query["hub.challenge"];

  // Check if a token and mode were sent
  if (!mode || !token) {
    return res.status(403).send({ error: "Missing mode or token" });
  }

  // Check the mode and token sent are correct
  if (mode === "subscribe" && token === VERIFY_TOKEN) {
    // Respond with 200 OK and challenge token from the request
    console.log("WEBHOOK_VERIFIED");
    return res.status(200).send(challenge);
  } else {
    // Responds with '403 Forbidden' if verify tokens do not match
    return res.sendStatus(403);
  }
});
```

To verify our webhook we go to **WhatsApp Configuration** from the Meta App page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2m3j0gr4uw34dydamo4.png) 

Add the **Webhook API URL** and the **Verification token** and click on **Verify and Save**. You can use a proxy like **ngrok** if you are still in development. Webhook URL must be an HTTPS one with no Self-signed certificate in the chain.

In **Webhook fields**, Subscribe to **messages**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85eazr6civwi974zsp70.png)
 

Now for the receiving messages webhook, POST `/api/webhook`

```javascript
app.post("/api/webhook", async (req, res) => {
  try {
    // Parse the request body from the POST
    const body = req.body;

    // Check the Incoming webhook message
    console.log("Incoming webhook: " + JSON.stringify(body));

    // Validate the webhook
    if (req.body.object) {
      // Handle the event
      if (req.body.object === "whatsapp_business_account") {
        const entry = req.body.entry[0];

        // Handle the message
        if (entry.changes) {
          for (const change of entry.changes) {
            if (
              change.value &&
              change.field === "messages" &&
              change.value.contacts &&
              change.value.messages
            ) {
              // Handle the value
              const value = change.value;

              const userName = value.contacts[0].profile.name;

              const messages = value.messages;

              // Handle messages
              for (const message of messages) {
                if (
                  message.type === "text" &&
                  message.text &&
                  message.text.body
                ) {
                  const waid = message.from;
                  const text = message.text.body;
                  const msgId = message.id;
                  console.log(
                    "Message from " + waid + " - " + userName + ": " + text
                  );
                }
              }
            }
          }
        }
      }
    }
  } catch (err) {
    console.error("Error occured " + err);
  }
});
```
This is how we will extract messages from the incoming webhook when the user sends a Text message on the configured number. We can use this text message and then reply accordingly. 

For our application, we pass this as a prompt to an OpenAPI model and then get a response from the AI and respond to the user. We are using `openai` package for this.

For responding to the user, we will use the `https://graph.facebook.com/v13.0/<phonenumberid>/messages` API endpoint with the authentication token we collected earlier in Headers like below:

```javascript
  await axios.post(
    process.env.WHATSAPP_SEND_MESSAGE_API,
    {
      messaging_product: "whatsapp",
      recipient_type: "individual",
      to: waid,
      type: "text",
      text: {
        preview_url: false,
        body: reply,
      },
    },
    {
      headers: {
        Authorization: "Bearer " + process.env.WHATSAPP_TOKEN,
      },
    }
  );
```
By this response will be send to the user.

## Conclusion

This is how we will use WhatsApp Cloud API and integrate WhatsApp with your application. There are endless possibilities since Meta recently made this API available to all, which was earlier only available to business owners or BSP (Business Service Partners). 

**Documentation:** [https://developers.facebook.com/docs/whatsapp/cloud-api/reference](https://developers.facebook.com/docs/whatsapp/cloud-api/reference)