Webhooks explained and how to use them in Strapi

Webhooks is a term you might have heard before in other apps, and you might have been hooked on it, wondering what it is about. Webhooks are a simple way for your different applications to communicate and get notified when a new event happens.

When you make an online payment via bank transfer, for example, the payment gateway provider will utilize webhooks to communicate the transaction status to the third party app, this process is automated.

In the headless CMS world, webhooks are very useful to build your frontend upon modification in your administration panel. Let's break it down and see how it works in Strapi!

What is Strapi?

Strapi is an open-source headless CMS that allows you to effectively manage your application content by separating the backend and front end utilizing Jamstack technology. it provide flexible and dynamic method of exchange content across your applications.

Strapi webhooks enable you to exchange content with third-party applications when a specific event occurs. For example, webhooks are triggered when you create, update, or delete content. The latest version we strongly advise you to use is Strapi v5, and you can learn all about migrating to it here.

What are Webhooks?

Webhooks are automated messages that are sent each time an event happens. They have one unique mission: transmitting a message or data to a unique address or URL. Think of your email inbox. In ancient times, you had to connect to your inbox to check if you had new emails. Nowadays, your new emails come directly to you through push notifications. Checking your emails is much easier. You receive an automated message as soon as you receive a new email. Well, webhooks are the same, but between apps.

How do Webhooks Work?

Webhooks use HTTP POST requests. When an event is triggered, the first app sends an HTTP POST payload to the URL of the second app configured in the webhook. The most straightforward way HTTP requests work is by appending data to a URL and ping that URL. The URL looks like this, with data following a question mark in the URL: https://yourapp.com/data/12345?Author=John&title=my_article&content=lorem_ipsum

Then, your app will receive the information that something new happened, and do what it has to do. To make it simpler, it's like a command-line with data, sent from one app to another over HTTP.

The data sent will look like this:

1    {
2      "event": "entry.create",
3      "created_at": "2020-01-10T08:47:36.649Z",
4      "model": "address",
5      "entry": {
6        "id": 1,
7        "geolocation": {},
8        "city": "Paris",
9        "postal_code": null,
10        "category": null,
11        "full_name": "Paris",
12        "created_at": "2020-01-10T08:47:36.264Z",
13        "updated_at": "2020-01-10T08:47:36.264Z",
14        "cover": null,
15        "images": []
16      }
17    }

Are Webhooks the Same as APIs?

There are many ways applications interface with data; webhooks are just one of them. APIs (Application Programming Interfaces) are similar but different at the same time and useful in specific instances.

The main difference is in the fact that webhooks are automatic: you set up them once, and then they run with any manual action. APIs require to manually request data and are very useful when you know you'll have constant changes in your data.

To use an example, you could see an API like getting a meal you ordered from the waiter at the restaurant. A webhook would be more like your waiter throwing you a pizza every time they pass by. Let's see how it works in Strapi.

Getting Started with Strapi

If you are new to Strapi, just give it a try!

Take a look at the Getting Started guide to begin, or get started with the following command line:

    npx create-strapi-app@latest my-project --quickstart

How to Use Webhooks in Strapi

Setting up webhooks in Strapi is straightforward. Webhooks enable you to automate tasks and integrate Strapi with external services seamlessly.

Setting Up Webhooks

To set up webhooks in Strapi:

1. Navigate to the Settings: From your dashboard menu, go to Settings.

2. Access Webhooks: Under the Global Settings, select the Webhooks section.

3. Create a New Webhook: Click on Create new webhook.

4. Configure the Webhook:

   • Name: Give your webhook a name.
   • URL: Specify the URL where events will be sent.
   • Headers: Add any necessary headers that the receiving application may require.
   • Events: Select the events you want to trigger the webhook (e.g., entry create, update, delete).

Testing Your Webhook

After creation, you can test your webhook to ensure it's functional. Strapi provides a Trigger button, allowing you to see if your webhook correctly sends data to the specified URL.

Enabling or Disabling Webhooks

You can create as many webhooks as you need; the only limit is your imagination. Webhooks can be used to send emails when content is updated, trigger a website build, notify a messaging app upon modification, or any other scenario you can think of. The Strapi UI allows you to easily enable or disable any webhook created.

Leveraging Lifecycle Hooks to Automate Workflows

In addition to webhooks, Strapi provides lifecycle hooks like afterCreate, beforeUpdate, and afterDelete that allow you to execute custom code at specific points in your content's lifecycle.

The afterCreate hook runs after a new entry is added to your content type. By combining lifecycle hooks with webhooks, you can automate complex workflows. For example, you might want to send a notification to your team whenever new content is published or update an external system when data changes occur.

To use a lifecycle hook, you can add custom logic in your content-type's model file:

1// path: src/api/[content-type]/models/[content-type].js
2
3module.exports = {
4  lifecycles: {
5    async afterCreate(data) {
6      // Your custom code here
7    },
8  },
9};

Integrating Strapi with External Services

Webhooks make it easy to integrate Strapi with external services like Salesforce, HubSpot, or AI-powered tools. By sending real-time data to these platforms whenever events occur in Strapi, you can keep your systems synchronized and automate repetitive tasks.

For instance, you could set up a webhook that triggers an update in your CRM system whenever new user data is added in Strapi. Or, you could integrate with an AI-powered tool to analyze content as it's created.

Advanced Use Cases for Webhooks in Strapi

Webhooks can be leveraged for various advanced scenarios, such as:

• Continuous Deployment: Automatically trigger deployment pipelines whenever content changes, ensuring your front-end applications are always up-to-date.

• Notifications and Alerts: Send notifications to team collaboration tools like Slack or Microsoft Teams when certain events occur.

• Data Synchronization: Keep external databases or data warehouses in sync with your Strapi content.

• Automated Testing: Trigger automated tests when new content is published to ensure everything works as expected.

Get Involved

Check out our public product roadmap to see what features we’ll be working on next.

Don’t see a feature you’d like in the backlog? Feel free to submit new feature requests or even better, start contributing to Strapi on GitHub. All contributions and users are welcome!