Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

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

Builder Web Components API

Builder web components are a great way to display dynamic Builder content on any tech stack.

You just need the following script tag, <builder-component> custom element, and optionally set the targeting attributes for Builder to dynamically load content.

Attributes

NameRequiredDescription

model

Yes

The name of the your page or component model to display

api-key

Yes

Your Builder public API key

entry

No

Load a specific Builder entry by ID, e.g.

reload-on-route

No

If on, the component will observer location pushState events and reload when the browser URL changes client side, e.g. if you target different content for this code at different URL paths

options

No

Full Builder options object as JSON to customize how content is requested

Events

NameDescriptionExample

load

Fires when the builder content loads and passes you the data loaded. Good for transitioning content, or tracking analytics such as what Builder content and a/b tests were viewed to other analytics providers

error

Fires when builder content failed to load

Initializing

If you need to run some logic before Builder web components fetch and render, you can use declare a window variable called builderWcLoadCallbacks like in the example below:

Registering custom elements

Registering custom elements with Builder is a great way to get support of custom blocks in Builder for any framework.

Let’s say we have a web component called my-hero that takes a title and subtitle as in the following example:

Assume you defined it something like this:

You can register it in your code:

You can see more on our import types supported here - just note that for web components we only support primitive elements–such as text, number, boolean–and not deep objects and arrays like lists and maps.

Also note that it's easy to wrap components of your favorite framework as custom elements, for instance see how to:

Passing data and context for binding

You can pass data and functions down to the Builder component to use in the UIs (e.g. bind data values to UIs e.g. for text values or iterating over lists, and actions to trigger for instance on click of a button).

All data passed down is available in Builder actions and bindings as state.*, for instance in the below example state.products, etc will be available.

Support for passing data was added in the pre-production release version: 1.3.47, you'd want to specify this version explicitly to take advantage of this functionality


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?