Automation

Webhooks Explained: A Beginner's Guide to Event Handling

Learn what webhooks are, how they work, and step-by-step instructions to integrate them with your applications.

5 min read

Webhooks are a mechanism that allows applications to communicate events in real-time. This guide dives deep into understanding webhooks, how they function, and provides step-by-step instructions to integrate them into your application workflows.

What is a Webhook?

Webhooks are a powerful way for applications to notify each other when specific events occur. Unlike traditional APIs that rely on polling to retrieve data, webhooks employ a push model, where one application sends an HTTP POST request to another when an event triggers.

For example:

  • GitHub sends a webhook when a new commit is pushed.
  • Stripe uses webhooks to notify your application about payment transactions.
  • Twilio employs webhooks for call and message notifications.

This approach ensures real-time integration and reduces the overhead of constant polling.


Prerequisites for Using Webhooks

Before setting up webhooks, ensure you have the following:

prerequisites

  • A basic understanding of HTTP and API principles.
  • A development environment where you can run a local or serverless server.
  • Familiarity with tools such as Postman, curl, or ngrok, which are often used for testing and debugging webhooks.

Setting Up Webhooks with GitHub

Follow these steps to register and test webhooks with a GitHub repository:

steps

  1. Navigate to Settings of your GitHub repository.
  2. Click on Webhooks, then select Add webhook.
  3. In the Payload URL, enter the URL of the server that will handle the webhook.
  4. Choose the Content type (commonly application/json).
  5. Select the events you want to trigger the webhook (e.g., push).
  6. Click Add webhook to save your settings.
  7. To verify, make a test event (e.g., push a commit) and monitor your server for the incoming POST request.

Testing Webhooks Locally

Setting up webhooks locally requires making your local server accessible to the internet. Tools like ngrok allow you to create a publicly accessible URL for your local server.

Setting up a local server and testing with ngrok

# Step 1: Run a local server on your machine (e.g., using Python).
$ python -m http.server --bind localhost 8000
# Server is now running at http://127.0.0.1:8000

# Step 2: Open a tunnel using ngrok to expose your local server to the internet.
$ ./ngrok http 8000
# Outputs a public URL like https://<random>.ngrok.io, which you can use for the webhook payload URL

# Test by sending a sample payload to your public URL.
$ curl -X POST -H "Content-Type: application/json" -d '{"event": "test"}' https://<random>.ngrok.io
# Check your terminal for logs indicating the payload has been received

Securing Webhooks with HMAC

To ensure the authenticity of webhook requests, use HMAC (Hash-based Message Authentication Code) with a secret token shared between your application and the webhook sender.


Using Serverless Functions for Webhooks

To reduce infrastructure overhead, you can leverage serverless platforms like Netlify or AWS Lambda for hosting webhook handlers.

Choose serverless when...

  • Your application doesn’t require a full-fledged backend.
  • You want minimal hosting costs with scalable execution.
  • You need event-driven execution with pay-as-you-go billing.

Deploying a serverless function on Netlify:

Deploying a serverless function with Netlify

# Initialize a new Netlify project
$ npm install netlify-cli -g
$ netlify init

# Deploy the project using Netlify's CLI
$ netlify deploy
# Follow the instructions to deploy the function and get its public URL

Integrating Webhooks with Twilio

You can integrate webhooks with Twilio to handle events like incoming messages or calls. For example, to build a function that responds to calls with a recorded voicemail:

steps

  1. Sign up for a Twilio account and set up a trial number.

  2. Go to Phone Numbers in your Twilio Console and select your number.

  3. Under Voice & Fax, set the A Call Comes In webhook payload URL to your server.

  4. Configure your webhook handler to return TwiML with instructions for the call flow.

    Example TwiML for recording a voicemail:

    xml
    <Response>
        <Say>Please leave your message after the beep.</Say>
        <Record maxLength="60" />
    </Response>
  5. Test the endpoint by calling your Twilio number.



FAQ

What is a webhook and how does it work?

A webhook is a user-defined HTTP callback that allows one system to send real-time data to another when specific events occur. It operates on a push model, sending a POST request to a specified endpoint when the event is triggered.

How do I test a webhook locally?

To test a webhook locally, you can use tools like ngrok to create a public-facing URL for your local server. This allows the webhook sender to deliver payloads to your local environment for real-time debugging and testing.

How do I secure my webhook endpoints?

Secure your webhook endpoints by using HMAC-based signature verification. Most webhook providers include a signature header to verify that the request originated from the expected source. Ensure you store your webhook's secret token securely.

Can I use serverless functions for webhook handling?

Yes, serverless functions are ideal for webhook handling as they are lightweight, automatically scale based on demand, and often come with generous free-tier quotas. Platforms like AWS Lambda and Netlify Functions provide robust options for deploying serverless webhook handlers.


Official reference: MDN HTTP documentation.