Visually present data stored in Contentful by connecting your Contentful account to Builder. Once connected, use Data binding to keep your content entries up-to-date with your Contentful data.
- Connect Contentful within the Visual Editor through the Connect Data panel within the Data tab.
- Once your data is connected, use Data binding to connect your data to visual blocks within your content entry.
The video below demonstrates data within Contentful displayed within the Builder Visual Editor. The values are synced, so that changes to Contentful data propagate to Builder.
Begin by creating or updating a Content Model and associated content.
Keep in mind that you should not include emojis in any content model name, content name, or field name.
For example, in the video below the user inspect the Person Topic content, and views what values are available within a single content entry as well as the general fields available.
Next, connect Contentful to Builder:
- Go to your Space's Integration page and find the Contentful plugin.
- Toggle the button to connect to enable the Contentful plugin.
- Click the Settings button on the Contentful plugin listing.
- Enter your Contentful Space ID and Access token. To find these values within Contentful, click the Settings icon and then choose API Keys in the dropdown menu.
This provides the Builder Visual Editor with access to Contentful data.
The video below shows the process of connecting Contentful to Builder through the Integration page.
Within the Visual Editor:
- Open the Data tab.
- Open the Connect Data panel.
- Click the + Add Data button.
- Choose Contentful from the dropdown.
- Within the search bar that appears, choose your content model.
- Depending on the type of data you are connecting, choose Entry or Query. In this example, Query is chosen because the goal is to retrieve multiple records.
Your data is now available within your content entry and can be bound to specific blocks within the Visual Editor.
Now that Contentful data is connected to your Builder Visual Editor, follow the standard Data binding pattern.
For example, in the video below, the location text is bound to the location data stored within Contentful.
Learn more about Data binding, visit Bind data, State and actions, and Custom code. Or, read more about Builder plugins.