BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

USER GUIDES

Creating Content

Learning the visual editor

Responsive design tricks

Saving layers as templates

Importing your site pages

Connecting custom data

Interactive pages with state and actions

Creating reusable components with Symbols

Targeting and scheduling content

Building custom forms

How To

Sidebar Menu

Dropdown Menu

Platforms

Shopify

Wordpress

Custom

DEVELOPER GUIDES

Guides

Quick start

SEO optimizing Builder.io content

Creating custom models

Using custom fields

Enable on-site previewing and editing

Dynamic URLs and advanced data fetching

Adding Custom Code

Using 3rd party libraries

Import HTML

Extending Builder.io with plugins

REST API

HTML API

Content API

GraphQL API

Webhooks

Write API

React

Getting started

Using Next.js

Using Gatsby

Using your React components in Builder

New!

Components-only mode

Triggering custom actions

Angular

Ruby on rails

Webcomponents

Github

Webhooks

Builder has the ability to integrate with your app via webhooks. This can be useful if you want your app to listen for content changes that should trigger any workflows you might have on your end. An example of this might be to store the data that has changed in your database, or maybe to trigger a cache bust in your CDN.

Adding a webhook

To add a webhook for a model, go to the models page choose the model you want to edit. Then scroll down and choose "show advanced" then "edit webhooks." Enter a URL you would like us to POST to with the updated content. We 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 "newValue" indicates a first publish.

POST Format

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

Rendering the data

Let's say you are using webhooks to store Builder content changes to use at render time, i.e. side-loading. Each time your app receives a webhook from Builder, your app stores the new value in its database. Then, when your app gets a request from a user, it queries its own database for the content instead of hitting the Builder API as requests come in.

If you are using the Builder React SDK to render components or pages on your site, pass the json data that came in the webhook (newValue) to the content prop of the BuilderComponent and the component will handle rendering for you.

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

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

This approach can be extended or modified to fit your apps approach to rendering data for your users, even if you are not using the React SDK, or another 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 allows you to store the html that Builder generates, and then you can serve it to your users however you want to. 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 however you want to. Note: Since in this case we are only calling Builder once every time your app receives a webhook, be sure to use the query parameter cachebust=true to ensure your app gets the most up to date data.

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

Questions or comments?

Visit the Builder Forum

Visit our Github