Contentful

Contentful is a powerful headless CMS that lets you easily author and manage content for your site.

When using Contentful with toddle you get the best of both worlds. A powerful website editor that lets you build any site you want and an easy to use but flexible CMS platform for authoring content.

Setting up Contentful

Lets start by creating new content model.

Now add some fields to your new content model.
For this example we are going to add two text fields: "Title" and "Subtitle".

Then make sure to save your changes.

Great job 🎉

Now that we have created a content model that describes what form our content should have, we are ready to add an entry.

Fill out the Title and Subtitle for your landing page.

Then click publish!

All done! We are now ready to create our content site in toddle 🥳

Making your toddle site fetch content from Contentful

Lets create a new project in toddle based on the blank template.

New lets wire our application up to use the Title and Subtitle we defined in contentful.
To do that, we need to create a new API, but first we need to know the URL were we can find our content.

Go to Contentful API docs And copy the url for fetching a single entry

Now go back to toddle and create a new API

Toddle will automatically parse the URL into its relevant parts. The URL we copied from Contentful includes some placeholders that we need to replace with real values.

You can find the "space_id" as part of the url in contentful.

The entry_id under the info tab on the content page.

The environment is called "master"

Finally you need add an access_token in form of an api key.

In contentful, go to Settings > API keys. Click Add API key and copy the Content Delivery API - access token

Then paste it in the API panel in toddle instead of {access_token}.

On the right hand side of the API panel you can now see the returned data from the API.

Using the API content in your toddle site

Now that we have successfully configured toddle to fetch data from contentful, we need to use that content inside our site.

Select the main title on the page. then click again to select the text inside the H1 element.

Then set the formula for the text node to use the title returned from the Content API.

Repeat for the p element and Subtitle.

Testing the setup

To test that the setup is working as intended try changing the title in contentful

And refresh the toddle app to se the new content changes.

There are a ton of great things you can build with contentful and toddle, and we have only just scratched the surface.

If you build something cool, please share it with us in our discord server.

🥳