Bind content

What is content binding?

How content binding works?

Content binding allows you to connect the visual layout in an experience to your structured content. You can fill the components in your experience with your existing content. 

You can add content to a component through its content properties. Some content properties are used for content that is directly visible on the canvas, others aren’t. To explain this, let's consider a button component as an example. Binding content to the content properties of a button component results in the following:

  • "Text" property - Updates the button text in the canvas.

  • "URL" property - Updates the link that is opened when the button is clicked.

How to bind content in Experiences?

In Experiences, you can bind content to your component according using the following sources:

  • Structured content - Bind content from the entries, assets, and experiences.

  • Manually - Manual content is not reusable and only lives within a single experience you are editing. Use manual binding for single-use content - such as a marketing campaign landing page.

Bind content to a component

Bind content

To bind content to a component:

  1. Log in to the Contentful web app.

  2. Go to the Experiences tab.

  3. Either go to the existing experience and open it or create a new one.

  4. Select a component on the canvas or drag and drop a new one to it.

  5. Switch to the Content tab in the right sidebar. When a component is selected, its content properties are displayed in the Content tab.

  6. For each property, select a content source according to the following options:

    • Entry - Select an existing entry or create a new one to bind its content.

    • Asset - Select an existing asset or create a new one to bind its content.

    • Experience - Select this option to link to another experience.

    • Manual - Select this option to manually add text or link to an asset.

  7. Select a specific entry, asset or experience to fill its content into your component. Then, select a field you would like to bind to. The content is displayed in the canvas.

  8. Click Save to apply changes to your experience.

Edit bound content

You can edit the content of an entry or asset that is bound directly from the experience editor.

NOTE: Publishing updates to an entry or asset that is bound affects all entries and experiences where it is referenced.

Edit bound content

To make changes to the bound content:

  1. Log in to the Contentful web app.

  2. Go to the Experiences tab.

  3. Go to the existing experience and open it.

  4. Select the component on the canvas in which you would like to update the content.

  5. Switch to the Content tab in the right sidebar. A selected component’s properties and previously bound content are displayed.

  6. Сlick on the bound content card to navigate to its fields.

  7. To edit the entry, asset or experience, click Edit icon. The editor page is displayed, and you can make updates.

  8. Optional: Click Publish so that the changes go live.

  9. Go back to your experience. The bound content is updated.