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.
The name of the your page or component model to display
Your Builder public API key
Load a specific Builder entry by ID, e.g.
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
Full Builder options object as JSON to customize how content is requested
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
Fires when builder content failed to load
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
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.