How to connect a headless CMS (Strapi, Contentful, WordPress and more)

TeleportHQ connects to five headless CMS platforms: Strapi, Contentful, WordPress, caisy.io and Flotiq. Go to Data Sources → Add Data Source → CMS Connection, pick your CMS, enter its credentials, then choose which content types should get automatic pages. TeleportHQ creates a list page and a details page for each content type you pick, for example /blog and one page per article.

Before you start#

• One CMS per project. A project can connect one headless CMS. Once it's connected, the CMS Connection card shows Already connected. To switch CMS, disconnect the current one first.
• Your project stays a website. Connecting a headless CMS doesn't turn a TeleportHQ website into a web app.
• Have your CMS credentials ready. Each CMS form has a Need help? link to a video that shows where to find them.
• Want to show data from a database, API or spreadsheet instead? A CMS connection isn't needed. See What are data sources?

Steps#

1. Choose your CMS#

1. In the left sidebar, click Data Sources (the database icon).
2. In the Data Sources panel, click + (tooltip Add Data Source).
3. Click the CMS Connection card (the first one).
4. Under Select CMS, click the card of your CMS: Strapi, Contentful, Wordpress, Caisy.io or Flotiq. Select CMS folds to one row with your CMS's icon, and the Setup connection section opens below.

2. Enter the connection details#

Under Setup connection, fill in the fields for your CMS, then click its button:

Below the fields, Need help? links to a video tutorial for your CMS (Check out video tutorial).

3. Generate the CMS pages#

1. Under Generate CMS Pages, TeleportHQ lists the content types it found in your CMS. Tick the ones that should get pages, for example Article and Author.
2. Click Complete Setup.
3. A window titled IMPORTANT explains that to change CMS provider or project later, you need to disconnect and reconnect, and how code download is affected. Click I understand.

The CMS connection then appears as a card in the Data Sources panel, named after your CMS, for example "strapi Connection".

Check that it worked#

The panel shows Types & Locales, with your Synced data structures and synced languages. Click View pages to open the Collection Pages list: you'll find a list page and a details page for each content type. In the Elements panel, a new CMS group appears with CMS list, CMS item, Rich Text and Mixed Type. See How to use CMS List, CMS Item, Rich Text and Mixed Type.

Update content types after changing your CMS#

If you add a new content type in your CMS after connecting it to TeleportHQ, sync it:

1. In the Data Sources panel, click the CMS connection card.
2. In the panel header, click ⋮ (tooltip See CMS actions).
3. Click Sync Content Types.

New entries in an existing content type (for example a new blog article) don't need a sync. To show them on your live site, republish or set up the CMS webhook: see Update your site's content without republishing.

Disconnect a headless CMS#

To remove the CMS connection from your TeleportHQ project:

1. In the Data Sources panel, click the CMS connection card.
2. Click ⋮ (tooltip See CMS actions).
3. Click Disconnect CMS.
4. Confirm with Disconnect.

Troubleshooting#

"We could not initialise connection. Check out the video tutorial below or reach out and chat with our support team." TeleportHQ couldn't connect with what you entered. Check that you copied the full URL or ID, and that the token can read your content. Watch the Need help? video for your CMS to find the right token.

A content type is missing from the list Use ⋮ → Sync Content Types, then create the pages from the page creation menu. See Create a page for each item.

"The selected content type no longer exists." The content type was deleted or renamed in your CMS. Select another source for the element, or remove it.

The CMS card has no delete (trash) button That's expected. A CMS is removed with ⋮ → Disconnect CMS.

Good to know#

• Languages: use simple language codes in your CMS, like en, fr or ro. Country-specific formats (like en-US) aren't supported yet.
• Only collaborators who can edit see the ⋮ menu.
• Tokens can be kept as Secrets. Each token field has a button to link a project Secret. See Keep passwords and API keys safe.
• Code download: with a CMS connected, code can only be downloaded as Next.js, and only on plans that include code download (Pro and Premium). See Can I download my site's code?