Builder Webcomponents Full API

Builder Component

This is the webcomponent that displays your data

<builder-component name="page" api-key="YOUR_KEY"></builder-component>

Attributes

Name	Required	Description
name	Yes	The name of the component model
api-key	No	Optionally use this to initialize your API key with this component
entry	No	Load a specific Builder entry by ID, e.g. `<builder-component entry="3dasdf3" name="page" api-key="YOUR_KEY"> </builder-component>`

Events

Name Description Example

Name	Description	Example
load	Fires when the builder content loads and passes you the data loaded	`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() })`

load

Fires when the builder content loads and passes you the data loaded

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()
})

Up next

Technical FAQ

Questions or comments?

Give us a chat, we respond quickly and are here to help!

CHAT US NOW

Was this article helpful?