BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

Getting Started with Models

Model types

Builder.io has a powerful concept of model types that unlock a ton of power. Read more about the 3 main model types to know below

Page models

For drag+drop pages

Data models

For custom data

Component models

For drag+drop page sections

Page models

Page models are great for building custom pages. They require a URL to be chosen for each page and allow drag+drop editing using the standard components as well as your custom components. By default pages are chosen by their chosen URL via targeting

Example Usage

import { BuilderComponent } from '@buidler.io/react';

// Builder.io can render the whole page for you
export const BuilderPage = () => (
  <div>
    <YourHeader />
    // See guides for Next.js and Gatsby for addtional options
    <BuilderComponent model="page" {/* ... other options*/} />
    <YourFooter />
  </div>
)
Learn more

What is a model?

Watch the video or read below for an in depth guide in using models in Builder

In Builder, a model represents a piece of your site that you want to update dynamically with multiple content entries via a single code installation. This is useful for use cases like targeting - e.g. having one piece of content for mobile and another for desktop. This also works well for creating dynamic landing pages, by embedding the component code one time and creating new entries targeting new URLs. Below, we will go over:

  • Models & fields
  • Creating a custom model
  • A/B testing
  • Targeting & scheduling


Models & testing

A good example of using a custom model is the page model. This generally has two custom fields. The title, which is some text you can enter for the title that when you’re using the APIs for Builder, you’ll want to take the title data attribute and insert it into the title tag for your page for SEO purposes. As well as the description field, it is up to you if you want to use that for the meta description tag. You can add your own custom fields if you want to. At the top there are some quick code previews on how to pull and use these models.

Now, if you create a new page or edit an existing page, you can view and edit these custom fields on the page. If you made any fields required, they will appear red until that field is updated. If you don’t complete the required fields, you will not be able to publish your page.

Creating a custom model

Lets go over to Shopstyle.com, and lets say they’ve already made pages in Builder, but now they want to control other areas of the website with some Builder drag and drop content to give their marketers freedom of what they want to present and how they want to do it. Let's make a new custom model. Navigate to the models page, and create a new component. Were going to call this bottom slide up. Once you create this you’ll see the documentation and how to use it. You can just pull the latest bottom slide up content by hitting the HTML API.

You can also add custom fields that your marketers could input that you might use in the API response to dictate how this displays or other options. But for now, we are going to keep this basic. Just by creating a component model you get the full drag and drop editor and all of the APIs to pull the content and the SDKs. For instance, if you’re using react, you just have to enter “<BuilderComponent name="bottom-slide-up" />” where you want the content to be displayed, and it will fetch and display.

Now that we’ve made this model, let’s create some content. Navigate back to the content section and create a new page. You will notice “bottom slide up” is now an option. Select this, and create your content and publish it.

A/B testing

A/B testing, or test variation, is creating another version of your page with changes that you want to test. You can test multiple variations against the control to see which one works best. Go to the “tests” tab and select “create test variation”. Lets give this a 50/50 test ratio. Now, if you go back to preview you’ll see a chooser at the top (variation one and default). In variation, we can change the content. If you use any of the JavaScript SDKs, like React, it will automatically handle choosing the test variation to show. If you’re using the HTML API, you’ll get a map of test variations and you can handle this as you choose. To make this more interesting, we can create multiple instances of this. Go back to the Content section and create another bottom slide up page. We will call this “Mens bottom slide up”, and this will display different content. Now, we have two different entries for the same model type. Builder will choose which one to use by priority. You can change page priority by clicking on the page and dragging it to the top.

Targeting & scheduling

We are going to use targeting and scheduling to decide which page is going to show when. For targeting, we can say anything we know about our users (e.g. locale). You can target off of anything. For our example we are going to target off of URL that starts with “/browse/men”. Now, if a user is at this URL, this slide up will appear. Lets say you want to have a slide up only appear for a certain amount of time (e.g. a one day sale), you can schedule this page for a certain date and time. Now, this slide up will only appear for the date selected.

Questions or comments?

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

CHAT US NOW