How to Connect or Integrate WhatsApp to Webhook

WhatsApp’s global popularity is due in large part to its accessibility, cross-platform functionality, and simple, straightforward features. WhatsApp Webhooks is a more advanced of cross platform functionality.

webhook (also called a web callback or HTTP push API) is a way for an app to provide other applications with real-time information. A webhook delivers data to other applications as it happens, meaning you get data immediately.

Unlike typical APIs where you would need to poll for data very frequently in order to get it real-time. This makes webhooks much more efficient for both provider and consumer. The only drawback to webhooks is the difficulty of initially setting them up.

Introduction to Webhooks

Webhooks are a powerful mechanism for real-time communication between applications. They act as automated messengers, sending notifications to a specified URL whenever a specific event occurs within another application.

Webhooks use requirements similar to If This Then That (IFTTT) statements. When an event triggers the webhook to “fire,” it calls another external API. This allows the application to “push” the knowledge of the event to any third party, such as an enterprise architecture integration (EAI) platform or directly to other applications. Imagine it like subscribing to an event and receiving instant updates – that’s the essence of webhooks. This event-driven approach enables seamless integration and automation, making it a crucial tool in modern application development.

How to Setup Whatsapp and Webhooks Connection

• Method 1 – Inbound Notifications
• Method 2 – Message Status Notifications

Method 1 – Inbound Notifications

• If a Whatsapp webhook event isn’t delivered for any reason (e.g., the client is offline) or if the Whatsapp webhook request returns a HTTP status code other than 200, retry the Whatsapp webhook delivery is perform.
• Also continuing retrying delivery with increasing delays up to a certain timeout (typically 24 hours, though this may vary), or until the delivery succeeds.

Method 1A – Components

WhatsApp Business API Client Webhooks have a top-level array field indicating what is being communicated. The members of the array are JSON objects with detailed fields relevant to the Webhook:

• Messages: Used to notify you when you get a new message and what is in the new message.
• Statuses: Used to notify you when there’s a status change in a message you sent.
• Errors: When there are any out-of-band errors that occur in the normal operation of the application, the errors array provides a description of the error. This type of error can be caused by transient network connectivity errors, invalid credentials, management controllers in unavailable status, etc.

Method 1B – Requirements

To deploy a live Whatsapp Webhook that can receive Whatsapp Webhook events from the WhatsApp Business API, your code must have the following:

• HTTPS support
• A valid SSL certificate

Method 2 – Configure Notifications Settings

Following the instructions in the Application Settings documentation, configure the following settings for Whatsapp Webhooks notifications:

Settings Option	Description
webhooks	Required when you are using Whatsapp Webhooks. Provide the URL for your Webhook. If the Whatsapp Webhook URL is not set, then callbacks are dropped. See the Sample Testing App for a simple way to see and test your Whatsapp Webhooks. You can validate Whatsapp Webhook events by specifying a shared secret as a query parameter when you set the Webhook URL. Example: https://url?auth='[shared_secret]’.
sent_status	Specify if you want to receive notifications when a message is received by the server. By default, these notifications are set to off.
callback_persist	Select whether to store callbacks on disk until they are successfully acknowledged by the Whatsapp Webhook or not. Notifications that are not successful (no HTTPS 200 response) are retried indefinitely. Use this setting to configure the retry.

Method 2A – Network Rules

The WhatsApp Business API Client sends the Whatsapp Webhook callbacks to you via the Coreapp container. Therefore, your Whatsapp Webhook endpoint needs to be configured to accept inbound requests from the Coreapp.

Method 2B – Sample Testing App

One way to see the messages sent to your WhatsApp Webhook is to create a cross-platform runtime environment (node.js) and run a server-side JavaScript application (server.js) to implement endpoint handler code to parse the JSON format.

The handler will route inbound and outbound message notifications to your Webhook.

You can use any tool of your choice to see your WhatsApp Webhook in action. We have provided a sample node.js application created in Glitch that you can replicate.

Upon “remixing” the project, you will have a new project that uses Express to expose WhatsApp Webhook endpoints that the WhatsApp Business API Client can send to.

1. Click this Remix on Glitch button: 
2. Once the project is created, the URL will be in the form of https://<project-name>.glitch.me (or simply click Show App at the top to navigate to the URL).
3. Select server.js in the left navigation pane to see the Webhook endpoint implementation.
4. Click on the Status button in the left navigation pane. You will see that your app is listening on a specific port.
5. Use the Application Settings to set the Whatsapp Webhook URL to point to your newly created project (Step 2 above). Append /webhook to the project URL as that is the endpoint being exposed (i.e., https://<project-name.glitch.me/webhook).
6. 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"}]}

Learn More About:

• Salesforce WhatsApp Integration
• HubSpot WhatsApp Integration
• IFTTT Webhook Integration

Conclusion

This article gave a comprehensive guide on Whatsapp and Webhooks. It also gave a step-by-step guide on Whatsapp Webhooks Connections.

Hevo can help you Integrate your data from numerous sources like Whatsapp and load them into a destination to Analyze real-time data with a BI tool such as Tableau. It will make your life easier and data migration hassle-free. It is user-friendly, reliable, and secure. Connect your Webhooks using a 14-day free trial and see for yourself how Hevo automates the data migration process and simplifies your work.

FAQs on WhatsApp Webhooks