Ask toddle AI

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

Working with APIs

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

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.

Click

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

Click

Then make sure to save your changes.

Click

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.

Click on

Fill out the Title and Subtitle for your landing page.

Fill out the

Then click publish!

Click

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.

Click

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

Click

Now go back to toddle and create a new API

Click the

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.

Copy the space_id from the url in contentful

The entry_id under the info tab on the content page.

Copy the entry_id from the info panel on the content entry page.



The environment is called "master"

Change the environment_id to

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

Go to Settings > API keys.
Click Add API key and copy the content delivery key.

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.

Data returned from the contentful 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.

Select the text inside the H1 element and and use the formula editor to set it to the

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

Change the Title field in contentful

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

Refresh the toddle editor to see 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.

๐Ÿฅณ