Integrate content from headless CMS (Contentful)

As a marketer you might want to reuse your messaging designs across multiple platforms. Headless content management systems (CMS) are a popular way to achieve this. Examples of popular headless CMSes include Contentful, Contentstack, Strapi, Ghost, and Sanity. These systems allow you to manage your content in one central location and then deliver that content to any digital channel as needed.

If you are using a headless CMS, you can bring your content into Blueshift in the form of a catalog item and use the custom catalog Liquid function to include the content in your messages.

To use content from a headless CMS in templates in Blueshift, complete the following steps:

Design your content in the headless CMS is a format that is consumable in Blueshift.
Send the content to Blueshift as a custom attribute for a catalog item.
Create an HTML email template in Blueshift.
Use the custom catalog Liquid function to include the content in your message.

Design your content

You must consider the content that you want to use in your template and design your content structure accordingly. For example, your content might include a subject line, preheader text, and 2 paragraphs. The content might also include an image.

Example 1:

Hi there!
Setting achievable goals is crucial for success in any endeavor. Clearly define your goals. Vague objectives make it difficult to measure progress and success. Be precise about what you want to achieve. Ensure your goals are realistic and within your reach. While it's good to aim high, setting unattainable goals can lead to frustration and demotivation.
Set a timeframe for achieving your goals. This creates a sense of urgency and helps you stay focused.

Let’s see how we can structure this content in the form of custom attributes for a catalog item. We are using a single custom attribute here for all the text content.

newsletter_content :
[
  {
    "author": "Jane Doe",
    "subject": "Your weekly roundup",
    "preheader": "Still following those New Year resolutions?",
    "body_para_first": "<p>Hi there!</p><p>Setting <span style="color:#8e44ad"><strong>achievable
  goals</strong></span> is crucial for success in any endeavor. <span
  style="color:#2980b9">Clearly define your goals.</span> Vague objectives
  make it difficult to measure progress and success. <span style="color:#16a085">Be
  precise about what you want to achieve.</span> Ensure your goals are realistic
  and within your reach. While it&#39;s good to aim high, setting unattainable
  goals can lead to frustration and demotivation.</p><p>Set a <span
  style="color:#8e44ad"><em>timeframe</em></span> for achieving
  your goals. This creates a sense of urgency and helps you stay focused.</p>",
    "image_first": "http://mydemosite/newsletter/jan24/snow.jpg"
  }
]

Example 2:

This example contains a URL along with the text.

Hi {{user.firstname}}!
Setting achievable goals is crucial for success in any endeavor. Clearly define your goals. Vague objectives make it difficult to measure progress and success. Be precise about what you want to achieve. Ensure your goals are realistic and within your reach. While it's good to aim high, setting unattainable goals can lead to frustration and demotivation.
Set a <a href=”https://demosite.com/goalcalendar”>timeframe</a> for achieving your goals. This creates a sense of urgency and helps you stay focused.

Let’s see how we can structure this content in the form of custom attributes for a catalog item. We are using custom attributes here, one for the text content and one for the URL.

newsletter_content :
[
  {
    "author": "Jane Doe",
    "subject": "Your weekly roundup",
    "preheader": "Still following those New Year resolutions?",
    "body_para_first": "Setting achievable goals is crucial for success in any endeavor.
  Clearly define your goals. Vague objectives make it difficult to measure progress
  and success. Be precise about what you want to achieve. Ensure your goals are
  realistic and within your reach. While it's good to aim high, setting unattainable
  goals can lead to frustration and demotivation.",
    "body_para_second": "Set a ",
    "cta_text": "timeframe",
    "body_para_thrid": "for achieving your goals. This creates a sense of urgency
  and helps you stay focused."
  }
]

cta_url: “https://demosite.com/goalcalendar”

Recommendations

When you design your content structure, you must consider personalization and tracking requirements. As such, we recommend that you structure the content in such a way that it is split at points where personalization and links are to be inserted and that you separate the URLs for the links.

Break down the content at the points where personalization or URL is to be inserted. Put the content before and after such points in separate attributes such as body_para_first, body_para_second, and so on.
Add text that is to be hyperlinked in separate attributes such as body_cta_text.
Add links/URLs as independent custom attributes at the product catalog level (cta-url).
If you want to include multiple versions for the content, include the content in the form of an array of objects.

Note:

Any link/URL included in the email body is not indexed as the Blueshift rendering engine cannot separate the entire value of the URL from the text.
Any Liquid syntax inserted for personalization is not rendered. Rendering Liquid within a rendered Liquid syntax is not currently possible in Blueshift.

Send content to Blueshift

Send the content to Blueshift as a custom attribute for a catalog item.

Create a catalog for the content.
Use the Add item to a catalog API to add the content.
Go to Catalogs in the left navigation, search for the catalog and item and verify that the content is added correctly.

Catalog item added for Example 1:

Catalog item added for Example 2:

In this example, the two custom attributes are newsletter_content and cta_url.

Include content in message

Use the custom catalog Liquid function to include the content in your message.

Email subject and preheader

To include the email subject, use the following liquid expression:

{% catalog_items sample_catalog 'nl_jan_2024' %}
  {% assign my_text = sample_catalog[0].extended_attributes.newsletter_content %}
  {% for section in my_text %}
    {{section.subject}}
  {% endfor %}

To include the email preheader, use the following liquid expression:

{% catalog_items sample_catalog 'nl_jan_2024' %}
  {% assign my_text = sample_catalog[0].extended_attributes.newsletter_content %}
  {% for section in my_text %}
    {{section.preheader}}
  {% endfor %}

Image and text

To include the image and paragraph from Example 1, use the following liquid expression:

{% catalog_items sample_catalog 'nl_jan_2024' %}
  {% for item in sample_catalog %}
    {% assign my_text = item.extended_attributes.newsletter_content %}     
      {% for section in my_text %}
        <img src="{{section.image_first}}" width="25%" height="25%">
        <p>{{section.body_para_first}}</p>
      {% endfor %}
  {% endfor %}

Text and URL

In Example 2, the text is broken into several parts. To include the paragraph from Example 2, use the following liquid expression:

{% catalog_items sample_catalog 'nl_jan_2024' %}
  {% for item in sample_catalog %}
    {% assign my_url = item.extended_attributes.cta_url %}
    {% assign my_text = item.extended_attributes.newsletter_content %}     
      {% for section in my_text %}
        <p>{{section.body_para_first}}</p>
        <p>{{section.body_para_second}} <a href="{{my_url}}">{{section.cta_text}}</a> {{section.body_para_third}}</p>
      {% endfor %}
  {% endfor %}

Note: You can also use Blueshift’s Create email template API to programmatically create the template.