Once a data source is synchronized on your site (could be any of them, Airtable, Google Sheets, Contentful, API, you name it...), it's time to bind some data to elements on a page in WeWeb.io.

To do so, first, click on the element you want to bind, like a text or an image.

In this example, I clicked on a title 👇

See the "Data" tab in the sidebar? That's where the magic happens.

Underneath it, you'll see all the bindable properties for this element. These properties depend on the element's type. For example, for this title, the text itself is bindable. For an image, the source of the image is bindable, etc.

Let's try to bind this title to data, by first clicking on "Text". You'll land here 👇

Here, you can choose which of your page's languages to bind data to. Once you've chosen your language, click on it.

Now, it's time to select which data source you want to bind data from. Here, I've got two 👇

ℹī¸ If you don't see your data, click on "Synchronize" to make sure your current data is downloaded inside WeWeb. And if you still don't see it, make sure your data source is properly configured.

Once selected, you'll see all the instances of elements your data source contains. Here, I have a list of Airbnb Properties. Select the one you want to bind data to 👇

ℹī¸ Remember the "Display by" field you had to select during the data source configuration? It's visible here! That's the field WeWeb will display the value from to help you choose between instances. You can select another one by clicking on the dropdown (in this example, it's the Airbnb Properties names).

Finally, you'll land on this screen, where you can select which field to bind data to 👇

For this example, I chose the "Name" by clicking on "Bind field" and tadaa! The name now displays on WeWeb.

The element is now bound to the name. If I change it in my data source, it'll change automatically in WeWeb!

ℹī¸ To unbind it, click on the "Binded" button (it should change to "Unbind" when you hover it).

Was this article helpful?
Thank you!