BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

USER GUIDES

Creating Content

Learning the visual editor

Responsive design tricks

Saving layers as templates

Importing your site pages

Connecting custom data

Interactive pages with state and actions

Creating reusable components with Symbols

Targeting and scheduling content

Building custom forms

How To

Sidebar Menu

Dropdown Menu

Platforms

Shopify

Wordpress

Custom

DEVELOPER GUIDES

Github

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

Questions or comments?

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

CHAT US NOW