---
schema_version: "1"
id: 6f24565a91a2db1d9f0de0cce90711e6c4113762444cf8295f058dbaac1094c4
title: CMS Connect (JSON)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_cms_connect_json.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_cms_connect_json.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 4d160d992eba8a921447539e360e2bf62a736fbf5caa22220e652ef075085243
description: The CMS Connect (JSON) component displays JSON content from a content management system (CMS).
products:
  - Experiences
release: "264"
---
# CMS Connect (JSON)

The CMS Connect (JSON) component displays JSON content from a content management system (CMS).

Before using the CMS Connect (JSON) component, see [Create a CMS Connection](https://developer.salesforce.com/docs/atlas.en-us.cms_dev.meta/cms_dev/cms_connect_create_connection.htm) in CMS Developer Guide. The connection includes the server URL and paths to your JSON information. It also defines content lists and content items that you want to display. Then choose **Use in Builder** for the connection you want to use.

![CMS Connect Workspace](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/cms_connect_use_in_builder.png)

1. In Experience Builder, drag a CMS Connect (JSON) component from the Components panel to the location on the page where you want to display it.
2. Using the property editor, configure the component’s properties.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:27.624309392265197%">
              <col style="width:72.37569060773481%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d116930e66">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d116930e69">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">CMS Source</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Select the CMS source containing the content that you
                  want to display. If no sources are listed, go to your CMS
                  Connect workspace and define content items and content lists
                  for the connection. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">JSON Content</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Select the JSON content. Choose from the content items
                  and content lists that you set up in the connection. In the
                  property editor, the fields that you see depend on what you
                  select. For example, if you select a content list, you see
                  the layout options for a list.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Component Path</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Applies only for content items. Enter the path to the
                  component to display. For example, enter the ID of a
                  blog.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Content List Layout</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Choose a layout for your content list. Currently, the
                  only option is Grid. Define the grid layout using the Items
                  Per Page and Columns properties. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Content List Item Layout</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Choose a layout for items in your content list.
                  Currently, the only option is Card. To specify card
                  properties (Title, Author, and so on), enter a JSON
                  expression or value. For example, enter <kbd>@key</kbd>, <kbd>6</kbd>, or <kbd>{!id}</kbd>.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Content Item Layout</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Choose a layout for your content item. Currently, the
                  only option is Detail. To specify detail properties (Title,
                  Author, and so on), enter a JSON expression or value.
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Items Per Page</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter the number of content items that display on each
                  page.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Columns</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter the number of columns of content items that display
                  on desktops and tablets. Phones display content items in a
                  single column.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Title</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter a JSON expression or text for the title, such as
                  <kbd>@title</kbd>.
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Author</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter a JSON expression or text for the author, such as
                  <kbd>@author/name</kbd>.
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Published On</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter a JSON expression or text in ISO format for the
                  publish date. For example, <kbd>@date</kbd> or
                  YYYY-MM-DDTHH:mm:ss.sssZ.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Body</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter a JSON expression or text for the content body,
                  such as <kbd>@content</kbd>.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Image Source</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter a JSON expression for the image source of the
                  content item, such as <kbd>@featured_image</kbd>.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 "><samp class="parmname">Navigation</samp> section</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Set up the navigation link for content items in your
                  content list. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Link Text</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Enter the link text to display on your site page. The
                  default is Read More. </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Type</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Select whether the link points to a generated page or an
                  external URL with the content items in your content
                  list.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">Page</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">Displays the name of the generated detail page. The
                  default name reflects the CMS source and content type name
                  for your connection. To change the default name, URL, or
                  layout of this page, change the page properties using the
                  Pages menu.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e66 ">
                  <samp class="parmname">URL</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d116930e69 ">
                  <p>Enter the fully qualified URL to the content.</p>
                  <p style="margin-bottom:0;">You can
                    also specify JSON expressions, such as
                    @link.</p>
                </td>

              </tr>
            </tbody>
          </table>