Date:29/09/2023

Headless CMS integrations in beta

TeleportHQ's September 2023 release puts Headless CMS integrations live in beta, with dedicated CMS pages and elements, and also simplifies custom fonts, adds nested URLs and reworks the Figma plugin.

Major feature

Headless CMS live in BETA

Our biggest project, Headless CMS Integrations, is now live in BETA. This functionality allows users to connect one of several Headless CMS platforms and create dynamic pages by mapping data from the CMS to elements in the Teleport visual editor.

Connecting a headless CMS in the editor and mapping its data to elements

Available integrations

The first five Headless CMSs you can integrate are Strapi, Contentful, Caisy, Flotiq and WordPress.

Users can integrate with only one project and CMS for now, and the connection will be established inside the editor using unique tokens.

Once the connection is complete, users can use all the data stored in the CMS inside Teleport.

Read more about integrations on our Help center.

Dedicated CMS elements

CMS Pages

When a CMS connection is final, CMS List and Details pages are generated automatically based on the content types that you have selected to import.

You can find these pages marked in green in the left panel under your regular pages.

CMS List pages contain all entries for a specific content type created in the CMS. By default, they all appear one beneath the other, and users can apply various actions: sort, filter, and pagination.

Ex: A list page can be the main page of a blog that lists all of the articles or a hub page for related landing pages.

A CMS List page showing all entries of a content type

CMS Details pages contain all of the data for an individual entry. These pages have unique properties, including the option to change the URL, meta title, description, social image, and more dynamically.

Example: Using a details page, you can create a dynamic page that allows users to generate entire lists of blog posts or landing pages automatically.

A CMS Details page with its dynamic URL and meta properties

CMS Item element

The CMS Item element can be added on any page, even non-cms pages, and will only use the data from a single entry of a specific type created in the CMS.

When added to the canvas, the item will display a default message. Once a data source is selected, you can drop regular items such as containers, text, or images and link data from the CMS to them.

You can select which item to display based on its ID.

The CMS Item element linked to a single CMS entry

CMS List element

The CMS list element can be added to any page to display and customize ALL of the elements from a list you have created in a CMS.

The list will also display a default message when added to the canvas. Once the source is selected, adding elements or editing a list item will affect all the items from that list. This makes it easy to configure all entries in a list simultaneously.

Once you have a CMS list, you can configure, filter, sort, and add pagination.

The CMS List element showing all items of a list

Rich text element

Using the Rich text element from the editor, you can import and display big chunks of HTML from the WYSIWYG editor in the CMS. Once a source is selected, the entire rich text block will be available for editing using CSS classes and combinators.

Updates

Custom fonts upload improved

We simplified how you can add custom fonts to your projects. Now, you only need to go to Project settings -> Fonts, upload your font file, and you can immediately use it inside of your project.

Uploading a font file in Project settings and using it in the project

Nested URLs

We added the possibility to create nested URLs in your Teleport projects. The process is the same as creating a standard URL, but instead of a simple slug, you can add “/” at any point. For example, you can use a slug like: /templates/blog and will get the URL www.yourdomain.com/templates/blog.

Entering a slug containing a slash for a page

Video tutorials added to Editor

We reworked the lower part of the Left panel to make the resources stand out more. We also added a new Video icon that opens a panel with some of our most important video tutorials. This is where you can expect new videos to be added as well.

The Video icon in the Left panel opening the tutorials panel

Figma plugin reworked

We’ve made a significant update to the Figma plugin, including an updated UI, optimized flow and functionality, and compatibility with the new Figma Dev mode.

The reworked Figma plugin interface

Improvements & Fixes

  • UI Improvements on the assets manager
  • No-index switch added to page settings
  • Added warning message when publishing with private files
  • Supporting more font files like .woff or .woff2
  • Figma plugin improved when copying large number of .svg files
  • Dropdown elements can be made into a component
  • Navbar smart element revamped and decluttered
Share