Made in Builder.io

Watch the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

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

You can integrate Builder with your app using webhooks. This can be useful if you want your app to be aware of content changes that should trigger any workflows you have on your end. An example of this could include storing the data that has changed in your database or triggering a cache bust in your CDN.

To add a webhook for a model:

  1. Go to Models.
  2. Choose the model you want to edit.
  3. Scroll down and choose Show More Options.
  4. Click Edit Webhooks.
  5. Enter a URL you would like Builder to POST to with the updated content.

Builder will POST to the endpoint you provide every time content is published, unpublished, archived, or deleted. Note that a null newValue indicates a deletion, and a null previousValue indicates a first publish.

Below is an example of a POST format:

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

The next example demonstrates rendering data.

Suppose you were using webhooks to store Builder content changes to use at render time; for example, side-loading. Each time your app received a webhook from Builder, your app would store the new value in its database.

Then, when your app received a request from a user, it would query its own database for the content instead of hitting the Builder API as requests came in.

If you were using the Builder React SDK to render components or pages on your site, you'd pass the JSON data that came in the webhook,newValue, to the content prop of the BuilderComponent or Content (depending on your SDK generation) and the component would handle rendering for you, as in the snippet below:

// Gen 1 SDK
import { BuilderComponent } from '@builder.io/react';

<BuilderComponent model="page" content={theJsonFromTheWebhook} />


// Gen 2 SDK
import { Content } from '@builder.io/sdk-react';

<BuilderComponent model="page" apiKey="YOUR_API_KEY" content={theJsonFromTheWebhook} />

You can extend or modify this approach to fit your app's way of rendering data for your users, even if you are not using a Builder-supplied SDK.

Another option if you are not using JavaScript to render your frontend is to have Builder pre-render the HTML for you. Using pre-rendering means you can store the HTML that Builder generates and serve it to your users according to your use case.

When your app gets a webhook from Builder, use the id supplied in the request to make a call to Builder's HTML API. Then store that HTML in your database and send it to your users in a way that works for your app.

Since this example only calls Builder once every time the app receives a webhook, use the query parameter cachebust=true to ensure your app gets the most up-to-date data. The response below uses cachebust=true:

let response = fetch('https://cdn.builder.io/api/v1/html/DOC_ID?apiKey=YOUR_KEY&cachebust=true')
// Now you can save and later serve the HTML as you please
let html = response.data.html

Tip:  Only use cachebust: true in the SDKs or APIs for build time requests; such as static building pages.

We do not recommend it for runtime requests—such as when serving live pages.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

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