Travis Bobier
 · Professional Nerd

Contentful and Ceros

What is Contentful & why do customers use it?

Contentful is considered a Headless CMS or Composable Content Platform. The platform orchestrates content from multiple sources and ensures it is freely reusable by allowing publishing to any and every digital channel. (Think publishing to your website, mobile apps, social media, and intranet all at once.)  Like Ceros, it helps teams scale output and work more efficiently by limiting the drain on dev resources and extending the flexibility and reach of each piece of content. 

The Partnership & what it means for workflow:

Our aim in partnering with Contentful is primarily to streamline the process for implementing Ceros content in the Contentful CMS. We have created an app that will allow Marketers to use the Ceros published link within the Contentful platform to embed content inline.

Benefits of the app

  • Eliminates the need for developers to create custom content types or embed fields in Contentful

  • Removes the use of the embed code altogether to reduce issues that commonly arise when teams send code via messaging apps

Getting started 

To get started, install the Ceros app from the Contentful Marketplace (here). Once you install it, you’ll be taken to the app configuration screen. Follow these steps to configure the app:

  1. Choose the content type that you want the app to use. If you don’t already have a content type that can display HTML embeds, click the “Content-Type” dropdown and choose “>>> Create new Ceros Experience content type”.

  2. If you want to use the app with an existing content type, choose it from the dropdown and then map the Title, URL, and Embed Code fields to their equivalents in the existing content type.

  3. Click Save at the top right corner to save your changes.

 Now, we can create some content. Navigate to the "Content" tab and follow the steps below:

  1. Click "Add Entry" in the top right corner and select "Ceros Experience" from the dropdown.

  2. You should see the Ceros app. Enter your published experience URL (like and click “Link Experience”. You should see a preview of your experience appear.

  3. Finally, click “Publish”.

The experience is now ready for use! It can be used directly or it can be embedded in another piece of content. For example, here’s how you would embed a Ceros experience on another page:

  1. Open any page or blog post.

  2. Go to the content-rich text field and place your cursor where you want the Ceros experience to be embedded.

  3. In the top right corner of the rich text editor, click “Embed” and then “Entry”.

  4. Choose the Ceros experience that you just created.

  5. All of the data required to display the experience should now be sent via Contentful’s API.

For developers

If you configured the app to use the default “Ceros Experience” content type, you can render them by inserting the code from the embedCode field directly into the webpage (or in a web view if you’re on mobile). There are also fields called title and URL if those are helpful.

If you’re planning to embed Ceros experiences in other pieces of content (like in the example above), you should expect a new embedded entry block of type “CerosExperience” to appear when fetching that content. You’ll also need to modify your REST or GraphQL query to pull in the title and embedCode fields. Here are the changes necessary to modify Contentful’s example Next.js blog to support Ceros experiences: gist

Headless CMS vs Traditional CMS:

Traditional CMS: Ex. WordPress

A Traditional CMS is involved in every part of the content experience from editing the front end to generating the HTML on the backend. For many teams, this is exactly what they need because it handles every piece of the journey for them. However, there are many limitations in what the final product can look like because creating custom themes takes significant dev resources. Another common issue with Traditional CMSs is that if a dev team does not optimize them properly and frequently, they can often perform slowly, resulting in limitations to scale.

Headless CMS: Ex. Contentful

You can think of a Headless CMS as a content database filled with various content types. The output of the Headless CMS is an API that anything can talk to. This means that a website that's set up to talk to this API can fetch all of the content, but you can also have, for example, a mobile app that pulls the same content and displays it inside of an app. This is the main differentiator from WordPress which can only spit out website HTML and therefore cannot support the same range of content use cases. For this reason, we see teams increasingly moving towards the Headless CMS because of the flexibility it provides.