Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

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

Made in Builder

‹ Back to blog

Using Contentful data in Builder's Visual Editor

By Kapunahele Wong

When you have data that resides in Contentful that you want to use in your Builder app, you can use Builder's data provider plugins to fetch and display it on your site.

Goals

This tutorial shows you how to to get data from Contentful into your Builder app through the following steps:

  • Enabling Contentful
  • Authenticating to Contentful
  • Using your data in your Builder app

What we'll create

In this example, we'll pull in Contentful data about some historical figures. Our layout uses one of the Builder.io built-in templates to display some leaders from the past. You can duplicate what we have or create your own data.

Image credits:

If you'd like these images, you can find them on Wikipedia.

The sample data

In Contentful, we have a Content Model called Monarch.

Within Monarch, we have a number of fields, Name, Place, Reign, Image, and Image Credit.

Enabling Contentful

To enable a third-party data provider, you have to configure Builder to be able to see the provider.

Open a page in the Builder visual editor.

In the page, open the Data tab.

The Data tab displays the sources available. Builder as a data source works by default, but the other options need you to enable them. In this example, we’ll enable Contentful, so click the icon for Contentful.

Builder prompts you to enable the plugin. Click Enable Contentful Plugin.

Authenticating to Contentful

In order for Builder and Contentful–or other data provider–to communicate, you must authenticate from within Builder.

When you enable a data provider, Builder prompts you to configure your settings at the bottom of the screen.

Click Configure so you can authenticate.

👉Tip: If you miss this prompt, you can still continue setting up your data provider by going to Integrations and clicking on the Settings button for that data provider.

In the settings dialogue, enter your Space ID and Access token (called Content Delivery API - access token in Contentful), both of which you can find in your Contentful account under Settings -> API Keys.

Click the Connect button.

Using your Contentful data

Now that you've authenticated, click on the Contentful icon or +Connect Data in the Data tab to see your resources.

Select Monarch.

Now that we are connected to our data, we need something on the page to display it. Weʻll use a pre-made template included in Builder. Under the Insert tab, in the Featured section, hover over Columns and drag in Gifts x 4 onto the page.

On the Data tab, you should see your Contentful Monarch featured at the top. Click Pick an Entry.

Select Queen Liliʻuokalani.

Select the first heading.

On the Options tab, click the Data Binding icon with the four dots in the upper right corner.

Scroll down or type to filter and select Monarch - Fields - Name.

Now "Queen Liliʻuokalani" populates the text field.

There's also a note that the text field is bound to dynamic data.

👉Tip: If you need to change the data you're binding to, click the same Data Binding icon to the right of the note in the Options tab.

Repeat this process for the other fields, such as place and reign.

Adding an image

Select the placeholder image in the template. With the image selected, you can bind the monarchʻs picture.

To find the Queenʻs photo, click the Bind Data icon to the right of the Image Options tab.

Select Monarch - Fields - Image - Fields - File - Url.

The Queenʻs image should show up when you select it.

Adding a second data source

Now that you've added one Monarch, you can add many more. To get to our other historical figures, we need to add more Monarchs so we can get to their data.

In the Data tab, you'll see the current Monarch, but we need to add another. Click the +Connect Data button and select Contentful or just click the Contentful icon.

When prompted, choose Monarch.

Now Monarch 2 appears in the Data tab.

To make the second Monarch's data available, you need to select it so Builder knows which Monarch to use for Monarch 2. Click on the three dots to the right of Monarch 2 to expand the options. Click the Pick an Entry button.

Select another Monarch to associate it with Monarch 2.

Now, when you click the Bind Data icon for the different elements, you'll see that Monarch 2 data is available.

👉Tip: As this feature is still in beta–that is, active development–you might see some slight differences from this article as we iterate.

Next steps

This article walked you through pulling in data from Contentful. Data binding is a robust feature available throughout Builder, wherever you see the four dots. You can use data binding to get styles, list data, and you can even filter your results.

Read more on the blog
$14m to build faster together
Connecting dynamic data in Builder's Visual Editor
Using Contentstack data in Builder's Visual Editor

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

INTEGRATIONS

All Integrations

Shopify

React

Angular

Next.js

Gatsby

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

PRODUCT

Features

Pricing

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service