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.

<builder-component model="page" api-key="YOUR_KEY">
  <!-- HTML here will display while your content is loading, e.g. put a gif here, or leave empty -->
</builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>

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. `<builder-component entry="3dasdf3" model="page" api-key="YOUR_KEY"> </builder-component>`
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 `<builder-component reload-on-route model="page" api-key="YOUR_KEY"> </builder-component>`
options	No	Full Builder options object as JSON to customize how content is requested `<builder-component options='{"cacheSeconds": 10}' model="page" api-key="YOUR_KEY"> </builder-component>`

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	`element.addEventListener('load', event => { var data = event.detail.data if (!data) { // No matching content was found show404() } else { animateIn() } })`
error	Fires when builder content failed to load	`element.addEventListener('error', event => { console.error(event.detail) showErrorPage() })`

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:

<script>
window.builderWcLoadCallbacks = [
  (context) =>
   context.builder.setUserAttributes({
      /* Add your targeting attributes for Builder
       * to dynamically load content to the web component above
       */
      locale: navigator.language,
    }),
];
</script>

Was this article helpful?