Learn why Gartner just named Builder a Cool Vendor

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

enterprise plans

Global webhooks are essentially notifications sent over the web through HTTP POST requests to an external system or service you control, such as your application's backend server whenever a significant event occurs within your Builder.io account.

Unlike model-specific webhooks that only trigger based on activities within a particular model, global webhooks are Space-wide and can trigger from events across all models and content within your account.

To get the most out of this document, you need:

Often, reasons for using global webhooks include:

  • Workflow automation: Automating tasks that should occur in response to various events in Builder.io, such as content publishing or updating.
  • Integration with other systems: Syncing content changes with external databases, CMS, personalization engines, or even cache invalidation in CDNs, so that changes in Builder reflect immediately wherever needed.
  • Efficiency and scalability: Reducing the need for manual checks or API polling to detect changes, which can be inefficient and not scalable.

To set up a global webhook:

  1. Go to the Space Settings.
  2. On the Space tab, click on the Edit button.
  3. In the dialogue that opens, click + Webhook.
  4. Expand the new Webhook that displays and add the endpoint (URL) for Builder to send the POST request.
  5. Optionally add any custom headers as needed, providing a Name and Value; for example, a specific header required by your server, such as an Authorization header for security.
  6. Optionally prevent actual data from being included in the payload by expanding the advanced section by clicking Show Advanced and toggle on Disable Payload.
  7. Click the Save button.

Tip: Enabling the Disable Payload Toggle option means the POST request from Builder does not include the actual data, such asnewValue and previousValue, related to the event. This can be useful if you're only interested in knowing that an event occurred — such as a content update — but don't need the details about what changed. This might be the case if you're using the webhook to trigger a generic task, like clearing a cache, where the specifics of the change are not relevant.

The video below shows where to set up a global webhook:

When Builder sends data to your specified endpoint, your server needs to be prepared to process it. The payload for global webhooks follows the same structure as model-specific webhooks, containing the newValue and previousValue fields, which represent the new and previous states of the content, respectively.

{
  "newValue": { 
     "id": "cs3df",
     "published": "draft",
     "name": "My great page",
     "data": {
        "property": "value"
     }
  },
  "previousValue": { ... },
  "modelName": "page",
  "operation": "publish"
}

Note that the operation property can be one of

  • publish
  • archive
  • delete
  • unpublish
  • scheduledStart
  • scheduledEnd

A null newValue indicates a deletion, and a null previousValue indicates a first publish.

Below is an example of how you might handle incoming webhook data in a Next.js application where you can handle webhooks on the API routes.

Create a file for your webhook handler inside the pages/api directory of your Next.js project. You might name it webhook.js for clarity. The path to the file defines the URL path. For example, a file at pages/api/webhook.js handles requests at /api/webhook.

Implement the POST handler in your webhook.js file. Here's how you might code it:

// pages/api/webhook.js

export default async function handler(req, res) {
  // Ensure method is POST
  if (req.method === 'POST') {
    const { newValue, previousValue } = req.body;

    console.log('New Value:', newValue);
    console.log('Previous Value:', previousValue);

    // Here you can add the logic to process the webhook data
    // For example, updating your local database, invalidating cache, etc.

    // Respond to the request indicating success
    return res.status(200).json({ message: 'Webhook received and processed' });
  } else {
    // Handle any other HTTP methods
    res.setHeader('Allow', ['POST']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Make sure that your webhook endpoint is secured:

  • Validate incoming requests to make sure they originate from Builder.io.
  • Use HTTPS to protect the data in transit.
  • Consider rate limiting to protect against abuse. This can sometimes be handled at the infrastructure level, depending on your hosting provider.

Global webhooks in Builder.io are triggered under specific scenarios, primarily focusing on significant state changes of content within your account:

  • Publishing content: triggered when content moves from a non-published state (such as draft or archived) to a published state.
  • State changes from published: triggered when content that was previously published is now moved to a different state, such as draft or archived.
  • Content deletion: triggered when newValue is null, indicating that content has been deleted.
  • Initial publishing: triggered when previousValue is null, indicating that content has been published for the first time.
  • Scheduled start/end dates: If content is scheduled to be live on a certain date, webhooks associated with that content will be fired on that given date and time.

Importantly, global webhooks do not trigger for routine content updates or modifications within non-published states — such as transitions from draft to archived or deleted.

This precise activation ensures that the webhooks are used for critical notifications, which is particularly useful for workflow automation and synchronizing significant content state changes with external systems.

When you've configured the webhook URL in Settings, Builder sends HTTP POST requests to the specified URL whenever the defined events occur; for example, content updates.

Your endpoint should be prepared to parse and handle the incoming data, which typically includes fields like newValue and previousValue, representing the new and previous states of the content.

This document covered global webhooks. For information on webhooks for models, visit Webhooks.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Mitosis

AI Shell

Mitosis

Micro Agent

Mitosis

GPT Crawler

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024