BUILDER

Resources

Ɨ

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

ā˜°

Home

Forum

Blog

Github

Login

Signup

This page was made in Builder!

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

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.

<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

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

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?