Builder Webcomponents Full API
Builder Webcomponents are a great way to display dynamic Builder content on any tech stack
You just need the below script tag and <builder-component> custom element. And optionally set the targeting attributes for Builder to dynamically load content.
Attributes
| Name | Required | Description |
|---|---|---|
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
| Name | Description | Example |
|---|---|---|
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 webcomponents 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 webcomponent called my-hero that takes a title and subtitle like so
That you defined something like this:
You can register it in your code:
You can see more on our import types supported here - just note that for webcomponents we only support primitive elements (text, number, boolean, etc) and not deep objects and arrays (lists, maps, etc)
Also note that it's easy to wrap components of your favorite framework as custom elements, for instance see how to:
