We interact with the internet by way of web browsers and apps using links. We click on a link or type a URL into a browser or app and voilà, a website, image, or search results appears.
We get links in emails, from text messages, or via social media posts. We share links with friends, family, colleagues, customers, and everyone else on the planet. These links seem to be everywhere and have become embedded in our daily communication. This might sound radical to you, but websites (and web apps) use links for communication too. They use links to communicate with each other like we use links to connect with them.
A website can ask another site to perform some kind of action just by using a link. An action can range from sending an SMS message or posting something to social media to creating an invoice or enrolling you in a course.
What are webhooks?
As you might have guessed, the links that websites and web apps use to talk to each other are not your ordinary links. These are special links powered by a technology called webhooks.
The term webhook came from a programmer named Jeff Lindsay. In 2007, he described a webhook as a “callback over HTTP”. In plain English, when something happens, send or post information to an interested web site or app using a link.
Breaking it down
Let’s cover the basic terminology, so we’re on the same page.
- Webhooks: A framework that allows two or more websites and web apps to communicate using a standard HTTP request (link aka payload link).
- Payload link: A URL provided by the site or app that will receive the data. This can also be called an endpoint in API lingo.
- Sender: A site or app that uses a payload link to send information to the site or app that provided the payload link.
- Receiver: A site or app that provides a payload link (its phone number if you will). The receiver does the action part of a webhook. The receiver can use data passed through a payload link to perform an action.
- Payload: The data posted or sent to the receiver using the payload link.
- Trigger: An event that causes a post to the payload link.
- Action: The activity that takes place when a post is received.
Now, we’ll put it all together using a food delivery scenario to help illustrate the concept.
A food delivery analogy
One day, a paper flyer slides under your door. It’s a food menu from a restaurant that delivers meals. The flyer has a phone number to call for placing orders.
The next day, you’re hungry and want to call in for food (trigger). You decide to use the flyer you got yesterday. You review the menu and make your selections. Then, you (sender) dial the phone number (payload link) on the flyer.
A friendly voice on the other end (receiver) takes your order, location details, and payment information (payload). The food is prepared, sent, and delivered to your door (action). You sit down and enjoy your meal. Life is good.
It’s important to note that it’s highly unlikely the restaurant is calling you every 5 minutes to see if you want to place an order. Hold that thought. We’ll see the significance of this coming up next.
How are webhooks different from APIs?
If you are a web developer, this is an excellent interview question to be able to answer. It’s a bit of a trick question because webhooks are a type of an application programming interface (API). If you look up the definition for REST API, it will look almost identical to a webhook.
Push versus pull
What sets webhooks apart from its predecessors and contemporaries is how they behave. Webhooks are triggered when something new happens rather than polling to check if something has happened. This sounds subtle at first, but it’s kind of a big deal.
Let’s do a quick flashback to our food delivery example. What if the delivery person didn’t have direct access to your front door? If so, there are two different ways we can find out when our food has arrived. We can either walk out to the curb every 5 minutes to see if the delivery person is out there—we’re polling for information. Or, we can get a text message (pushed to us) that says, “Your food’s here! ;-)” the moment the food arrives.
By nature, webhooks are considered real-time or near real-time processes. Webhooks push data or notifications as things happen. APIs (including REST) need to continually ping a site or app to see if anything’s changed.
The “programming” in API
To be fair, we should compare webhooks with more traditional APIs. APIs were originally designed for developers to communicate with and extend other applications. The Asana app, for example, provides a public set of functions that third-party programmers can call to make their application interface with Asana. Then, the third-party programmers could write code to call the specific API functions they need from Asana. Here’s a Node.js code snippet that retrieves a list of Asana workspace memberships for a given user.
Webhooks, on the other hand, are usually set up using a standard web form without any coding. You simply define your trigger, grab the payload link, specify your parameters, set up your action, and hit the save button. Below is an image of setting up a webhook to receive data in an Uncanny Automator recipe.
Why use webhooks?
If you’ve followed along so far, you’re probably on the verge of an aha moment. The game-changer advantage of webhooks is this: they can make your life easier! If you take advantage of webhooks, you can say goodbye to manually repetitive tasks and complex APIs that can bog down your business.
Here are some things to consider when deciding whether or not a webhook applies to your situation:
- Automation: As we just mentioned, webhooks are perfect for automating those manual tasks that are repetitive and suck up your precious time. Do you really want to keep copying and pasting your email campaigns to every social media channel you have?
- Communication: Webhooks are a popular go-to strategy for sending notifications and alerts. You can use webhooks to notify you when your customers update their profile, when your competition publishes a new post, or when your new webinar is almost fully booked. The list is endless.
- Push versus pull: If you don’t need to ask for information at regular intervals 24 hours a day, then a webhook is better. Only getting notified about something as it happens is where webhooks excel. It’s the difference between “Are we there yet? Are we there yet? Are we there yet?” and “We’re here!”
- Code debt: Let’s say you need to integrate with an app. The app gives you two choices. One choice is to code your integration using its traditional API. The second choice is to use a UI for setting up a webhook. If a webhook does the job, then you’re done. You don’t have to invest time, money, and resources to do a code development project. Writing code isn’t a bad thing. But, why create the extra overhead and code debt when you don’t need it?
What can you do with webhooks?
A webhook use case can be as simple as Mailchimp adding a new subscriber from an opt-in form. Or, they can be as complex as a multi-step workflow to enrol course participants, invite them to a welcome webinar, register them to a group forum, and send them a customised confirmation email.
Here’s a short list of curated use cases we think will get your creative juices flowing:
- Uncanny Automator customers use webhook recipes to automatically register and enrol students in courses on an LMS site after the course is purchased on a WooCommerce site.
- Netlify provides webhooks for their customers to use to automatically trigger new application builds and deployments.
- Microsoft Azure uses webhooks to automatically create cards and lists in Trello to respond to operational events.
We’re not going to list every tool that uses or supports webhooks. But, we’ll give you some of the most popular ones we know of to whet your appetite.
Zapier has been referred to as one giant webhook. This is a generalisation, of course. But, Zapier also supports sending and receiving data through webhooks. That’s in addition to integrating with more than 2,000 apps at the time of writing. You can create webhook enabled Zaps directly from the Zap editor.
With Uncanny Automator, you can create recipes that send and receive data using webhooks. Automator supports 32 WordPress plugin integrations. Automator even integrates with Zapier by way of (you guessed it) webhooks! You can have your Automator recipes harness the power of webhooks with a few simple settings. There’s absolutely no coding required.
Integromat has a unique way of creating what they call scenarios (workflows) and modules (triggers and actions). Their advanced UI makes them stand out from the competition. With Integromat’s UI, you can choose from instant trigger webhooks, create custom webhooks, and even create custom webhook responses.
Twilio uses webhooks to let you know the status of your SMS messages. Twilio can even tell you if your message was read on WhatsApp.
Slack has extensive support for webhooks built into the app. There are also APIs for developers so they can extend Slack webhooks to their apps. Just in case you didn’t think that was enough, Slack has a GUI driven Workflow Builder for creating workflows using webhooks.
WordPress forms plugins
Some WordPress forms plugins such as Gravity Forms and Ninja Forms have add-ons that support webhooks. Think about it. With webhook support, you can have your form trigger email drip campaigns, onboarding workflows, or create and assign project tasks. Again, the possibilities are too numerous to list here.
Tools for testing webhooks
Use these two sites to generate test payload links that you can send data to. Then, inspect what the test webhook received.
We hope this overview helps reveal to you the superpowers of a webhook.
After reading this article, you should have a better understanding of:
- What a webhook is and what they can do.
- The terms that define a webhook.
- What webhooks bring to the table compared to competing technologies.
- The use cases where if webhooks are used, can make life a lot easier.
The bottom line is, if your site or app needs an immediate alert when an event occurs, then webhooks should be high on your list of options.
With this new awareness, we look forward to seeing what you’ll create with webhooks.