[BETA] Headless CMS Integrations
Here are all the resources you'll need for the duration of the Headless CMS Integrations BETA. We will continue to add information to this article so make sure you check it from time to time.
Introduction
Connect to your headless CMS
Building bocks
States
How to use a CMS list
How to give us feedback
In order to be able to use Teleport's Headless CMS integrations you'll need a working instance of one of the following headless CMS-es:
Connect to Contentful (video)
Connect to Strapi (video)
Connect to Wordpress (video)
Once you are connected, Teleport will fetch the data from your instance and make it available into your project.
Data is retrieved in the form of collections. A collection can have one or more items. An item can have one or more properties.
In order to display the fetched data you can use one of the following 4 building blocks:
A CMS List can be drag and dropped in any page of your project in order to display data from any of your available collections.
This building block is useful when you want to insert into an existing page some dynamic content as a list.
A CMS Item can be drag and dropped in any page of your project in order to display a specific item from any source of your headless CMS collections.
This building block is useful when you want to insert into an existing page a specific item from a collection alone.
A CMS Listing Page is a specific type of page which will by default display all the items from a given collection.
By default, the URL of a listing page will be dynamically controlled by one the property of your collection.
If your collection name is authors then when you'll access /authors you will see a list of all the items available in your authors collection.
You can change the default route from the Listing Page settings contextual menu.
A CMS Details Page is a specific type of page which will by default display all the properties from a specific item from a given collection.
By default, the URL of the page will be dynamically controlled by one the property of your collection.
If you collection name is authors, when you'll access /authors/1 you will see all the properties of the author with the id 1 from the authors collection.
You can change the default route from the Details Page settings contextual menu.
Before displaying data in Teleport or in your deployed project we need to fetch it first. Sometimes everything goes well, but sometimes the fetching process might fail for various reason.
This is why, by default, all the headless CMS building blocks have 3 possible states: success, loading, and error. You can customize their appearance for each of those states in order to let your users know if everything went well.
Success: visible when the node has some content fetched from the CMS (A valid source and eventually and ID have been set in the inspector settings)
Loading: visible while the data is being fetched
Error: visible when the fetch failed. We either chose an invalid ID or we got some connection problem. This can be seen in both the visual editor AND in the deployed site. We can deploy a site that tries to fetch an invalid ID for example.
Once you are connected to your headless CMS instance, you will need to drag and drop a CMS List into a page.
From the Right panel select a source for your CMS list. This will retrieve all the data from your headless CMS and will make it available in this page.
At this stage, your CMS List will use an empty placeholder for each of the items of your collection.
To display some data, drag and drop a text element on top of one of the placeholders.
Select the text element, and in the Right panel in the Text content section connect your text element to one of the available properties.
Once you bind the property the CMS List will dynamically inject the values coming from your headless CMS collection directly into your project, for every item in the collection.
Styling an item in a list will also apply the same styling to all of the elements simultaneously.
Join our Discord channel to keep up with the Headless CMS discussions
You can also write to us directly on Live chat on the platform
Introduction
Connect to your headless CMS
Building bocks
States
How to use a CMS list
How to give us feedback
Introduction
In order to be able to use Teleport's Headless CMS integrations you'll need a working instance of one of the following headless CMS-es:
| Contentful | Wordpress | Strapi | Flotiq (coming soon) | Caisy |
Connect to your headless CMS
Connect to Contentful (video)
Connect to Strapi (video)
Connect to Wordpress (video)
Display dynamic data
Once you are connected, Teleport will fetch the data from your instance and make it available into your project.
Data is retrieved in the form of collections. A collection can have one or more items. An item can have one or more properties.
Building bocks
In order to display the fetched data you can use one of the following 4 building blocks:
CMS List
A CMS List can be drag and dropped in any page of your project in order to display data from any of your available collections.
This building block is useful when you want to insert into an existing page some dynamic content as a list.
CMS item
A CMS Item can be drag and dropped in any page of your project in order to display a specific item from any source of your headless CMS collections.
This building block is useful when you want to insert into an existing page a specific item from a collection alone.
CMS Listing Page
A CMS Listing Page is a specific type of page which will by default display all the items from a given collection.
By default, the URL of a listing page will be dynamically controlled by one the property of your collection.
If your collection name is authors then when you'll access /authors you will see a list of all the items available in your authors collection.
You can change the default route from the Listing Page settings contextual menu.
CMS Details Page
A CMS Details Page is a specific type of page which will by default display all the properties from a specific item from a given collection.
By default, the URL of the page will be dynamically controlled by one the property of your collection.
If you collection name is authors, when you'll access /authors/1 you will see all the properties of the author with the id 1 from the authors collection.
You can change the default route from the Details Page settings contextual menu.
States
Before displaying data in Teleport or in your deployed project we need to fetch it first. Sometimes everything goes well, but sometimes the fetching process might fail for various reason.
This is why, by default, all the headless CMS building blocks have 3 possible states: success, loading, and error. You can customize their appearance for each of those states in order to let your users know if everything went well.
Success: visible when the node has some content fetched from the CMS (A valid source and eventually and ID have been set in the inspector settings)
Loading: visible while the data is being fetched
Error: visible when the fetch failed. We either chose an invalid ID or we got some connection problem. This can be seen in both the visual editor AND in the deployed site. We can deploy a site that tries to fetch an invalid ID for example.
How to use a CMS list demo
Once you are connected to your headless CMS instance, you will need to drag and drop a CMS List into a page.
From the Right panel select a source for your CMS list. This will retrieve all the data from your headless CMS and will make it available in this page.
At this stage, your CMS List will use an empty placeholder for each of the items of your collection.
To display some data, drag and drop a text element on top of one of the placeholders.
Select the text element, and in the Right panel in the Text content section connect your text element to one of the available properties.
Once you bind the property the CMS List will dynamically inject the values coming from your headless CMS collection directly into your project, for every item in the collection.
Styling an item in a list will also apply the same styling to all of the elements simultaneously.
How to give us feedback:
Join our Discord channel to keep up with the Headless CMS discussions
You can also write to us directly on Live chat on the platform
Updated on: 17/08/2023
Thank you!