Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Customize the Look and Feel of an Experience Builder Template
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: Lightning Locker and CSP
Analyze and Improve Experience Builder Site Performance
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Connect Your External CMS to Your Experience Builder Site
Before Using CMS Connect
Create a CMS Connection
Build a CMS Connect Root Path and Component Paths
Set Up Language Mapping in Your CMS Connection
Reuse Content with CMS Connect JSON
Set Up a Connection for Your JSON CMS
Edit a CMS Connection
Manage CMS Connections
Add CMS Content to Your Experience Builder Pages
Personalize Your CMS Content
CMS Connect Recommendations for Optimal Usage
CMS Connect Examples
Create Custom Content Types for Salesforce CMS
Edit Custom Content Types for Salesforce CMS
Delete Custom Content Types for Salesforce CMS
Report on Deflections: The Deflection Signals Framework
Deploy an Experience Cloud Site from Sandbox to Production
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Reuse Content with CMS Connect JSON

Want to reuse blogs and articles that you’ve already published in WordPress, Drupal, or some other CMS? Easy! You can bring in JSON content to your Experience Builder site pages using CMS Connect.

Content Item or Content List?

Suppose that you want to reuse JSON content that’s in your CMS and display it in your site. CMS Connect supports two basic types of JSON content. What they’re called in one CMS can differ from what another CMS calls them. To keep things simple, in CMS Connect, we call them content item and content list.

An example of a content item is a single blog post. When it displays on a page, it’s the full blog post, not just a blurb about it. A content list, on the other hand, is a grouping of items, such as a series of blogs. When a content list displays on a page, you see a title and summary for each list item, with a link to the full blog.

How to Reuse JSON Content

The process boils down to three key steps.

  1. If needed, set up Cross-Origin Resource Sharing (CORS). If your CMS resources aren’t available to your site, add your site host to the trusted hosts in the CORS header of your CMS system. All CMS connections must use unauthenticated HTTPS (HTTP over SSL).
  2. Create a CMS connection. When you set up the connection, you define whether the content is a content item or a content list and specify the server URL and content paths.
  3. Add CMS Connect (JSON) components to your site pages. Using the Experience Builder, drag the component to your site page and configure its properties. Use JSON expressions to bring in the title, author, blog content, and so on from your CMS.

Preview Your JSON Content

It helps to preview the JSON response body so that you understand the data format of your CMS system. For example, suppose that the URL for your WordPress website is https://capricornblog.wordpress.com. Enter the full JSON endpoint for the CMS content in a browser, for example, https://public-api.wordpress.com/rest/v1.1/sites/capricornblog.wordpress.com/posts.

You use this endpoint when you define the CMS connection. The endpoint has two parts: the server URL and a JSON path. In this example, the server URL points to a WordPress site, and the JSON path is the path for a set of blogs. When you configure a CMS Connect (JSON) component, you retrieve the blog series as a content list, and each individual blog as a content item.

enter the endpoint to preview JSON content

When you enter the endpoint in a browser, you see the data format of the JSON response body. Previewing the response helps you understand how to configure the CMS Connect component on your site pages.

endpoint returns JSON values for component properties

Example Drupal Responses

Example

Let’s say you have JSON content in a Drupal CMS. Here’s what the JSON response body for an example content item looks like.

The path to the content item is structured as {baseUrl}/jsonApi/node/blogs/{id}. The JSON object {baseUrl} is a variable containing the server URL for the content. The path to the content is jsonApi/node/blogs/{id}. The elements in braces ({ }) act as variables that pass values at runtime.

In this example, @data points to the parent node. Attribute nodes for @data are nested below the parent.

All JSON data sources can have only one parent node. Multiple parent nodes in the JSON structure cause an error. For more information on constructing a data source that meets these criteria, see your JSON API options in your CMS.

Note

When you configure a CMS Connect (JSON) component, use JSON expressions to specify the connection and content that you want to retrieve.

For example, this JSON expression pulls the title of the content.

This expression retrieves the content ID.

And this JSON expression retrieves the content body, for example, the blog text.

JSON expressions can handle any node depth.

Example

Here’s an example of a JSON content list in a CMS connection that uses Drupal. The path to the content list is {baseUrl}/jsonApi/node/page.

You can display JSON content from multiple sources on your site pages. Set up JSON connections in your CMS Connect workspace. Then drag components to your pages and define JSON expressions that pull in your CMS content.