WhatsApp Business Platform

Sample Callback URL for Webhooks Testing

You can clone our sample callback app using Glitch to create a public callback URL on Glitch's servers that you can use to test Webhooks. The purpose of creating the Glitch project is that it writes webhook payloads to a log file that you can view in real-time as webhooks are triggered.

Before you set up an endpoint for webhook testing for Cloud API

This guide is part of a multiple step process and you must have completed a number of these steps before you start configuring your sample app endpoint using Glitch. You must have completed the following:

  1. Set up Developer Assets and Platform Access
  2. Send a Test Message
  3. Configure a Webhook

Full instructions for getting started with WhatsApp Business Cloud API so you can send your first test message is located at Get Started With the WhatsApp Business Cloud API.

Set up and Configure Glitch

  1. Head over to glitch.com and create an account. This allows you to use all the features that we discuss in this guide and ensures that the UI we discuss and the UI you see are consistent. If you don't create an account, most of the UI features will be missing and will look different.
  2. After you have set up your Glitch account, open our starter Glitch project template using the following link: WhatsApp Platform Webhook project template.
  3. Click the Remix to Edit button at the top right corner of the Glitch webpage to clone our sample app.
    Click Remix to Edit to create your own Gitch project
    A copy of the project will be created for your account.
  4. In the .env file, update the value of the WEBHOOK_VERIFY_TOKEN to a random string of your choosing. Then, you can optionally, copy the value of your temporary/permanent access token from WhatsApp > API Setup in your App Dashboard and paste that value for GRAPH_API_TOKEN.
    Update Glitch environment variables for your project
  5. Click Share at the top right to get the Live site URL. Add /webhook at the end of the URL to get your complete callback URL. It will look something like https://<project-name>.glitch.me/webhook.

Now that your endpoint is ready, you need to return to your App Dashboard.

Configure App Dashboard with Glitch endpoint and verification token

  1. In your App Dashboard, find the WhatsApp product and click Configuration.
  2. Then, find the webhooks section and click Edit. After the click, a dialog appears on your screen and asks you for the Callback URL and Verify Token. You need to use the values you used to configure your Glitch project in section Set up and Configure Glitch. For instance, (https://<project-name>.glitch.me/webhook) for Callback URL and ("HAPPY") for Verify token.
  3. Back in the Configuration page, click Manage to launch the App Dashboard Webhook Fields dialog.
    Manage Webhook Fields Dialog
  4. In the field table, click Subscribe to all the Webhook events you want to subscribe to (we recommend that you subscribe to all of them) at the far right column of the table.
  5. Then in the messages row, click Test to send a notification to your endpoint.

    To confirm that a Webhook notification was triggered, go back to Glitch and select LOGS and the output should look like the following image.

    The complete Webhook notification payload should look like the following: 
    {
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "0",
      "changes": [
        {
          "field": "messages",
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "16505551111",
              "phone_number_id": "123456123"
            },
            "contacts": [
              {
                "profile": {
                  "name": "test user name"
                },
                "wa_id": "16315551181"
              }
            ],
            "messages": [
              {
                "from": "16315551181",
                "id": "ABGGFlA5Fpa",
                "timestamp": "1504902988",
                "type": "text",
                "text": {
                  "body": "this is a text message"
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

WhatsApp Business Platform On-Premises API

  1. Go to our starter webhook project on Glitch: Remix on Glitch
  2. Click server.js in the left navigation to for the Webhook endpoint implementation.
  3. Click Share at the top right to get the live site URL. This will be your callback URL. It will look something like https://<project-name.glitch.me/webhook.
  4. Click on the Status button in the left navigation pane. You will see that your app is listening on a specific port.
  5. Send a message or send yourself a test message to see the notification. The following example of the log shows a received text message with a body of "Hi" and a sent message with updated status of sent, then delivered, then read. 
    Incoming webhook: {"messages":[{"from":"1234567890","id":"ABGGhSkIc2B_Ago-sDy5BNm-1gI5","text":{"body":"Hi"},"timestamp":"1529381066","type":"text"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"sent","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"delivered","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"read","timestamp":"1529381076"}]}