Integrate Content Hub with Sitecore XM Cloud(Sitecore AI) - Both Content Editor and Page Builder

As digital ecosystems evolve, the distance between where your assets live and where your content is created needs to vanish. With the launch of SitecoreAI, the integration between Digital Asset Management (DAM) and Content Management (CMS) has become more seamless—but it’s not always "on" by default.

What You Need Before You Start

Before enabling the connector, make sure you have:

• Access to the Sitecore Deploy app
• A Content Hub user with appropriate permissions - Follow this guide to create a user in content hub - https://doc.sitecore.com/sai/en/developers/sitecoreai/create-a-user-in-sitecore-content-hub-for-scch.html. You would need the username and password in upcoming step.
• An OAuth client configured in Content Hub - You can keep your dam url in redirect url field. Make note of client ID and client secret. We would be using it in upcoming steps.

Without these, the connector won’t authenticate properly.

Step 1: Enable the DAM Connector in Your Environment

The first step happens inside the Deploy app.

Navigate to your project and environment and Add below environment variables

1.

Name: SITECORE_AppSettings_damEnabled__define

Value: yes 

2.

Name: Sitecore_ConnectionStrings_DAM_dot_ContentHub

Value: ClientId=yourclientID;ClientSecret=yoursecret;UserName=yourusername;Password=password;URI=https://yourdamurl/;

Create this variable as a secret so that the value is not visible to anyone. See image below.

Use the client ID, client secret, username and password that you created during pre-requisite.

3.

Name: Sitecore_ConnectionStrings_DAM_dot_ExternalRedirectKey

Value: Sitecore 

4.

Name: Sitecore_ConnectionStrings_DAM_dot_SearchPage

Value: https://yourdamurl/en-us/sitecore-dam-connect/approved-assets

Note: Redeploy the environment and you should be seeing the DAM options for your link and image fields.

You can add/change the mapping of fields between Content hub and XM cloud by adding/updating attribute mapping using the newly available DAM Module - For example - if you want to read Alt from a specific field in content hub entity - https://doc.sitecore.com/sai/en/developers/sitecoreai/configure-the-image-tag-attribute-mapping-in-sitecore.html

Step 2: Configure Secure DAM Connectivity (CSP)

The job is not done yet.

You need to allow your DAM url in the Content security plocy(CSP) list, otherwise you might get below error:

Follow below steps:

• Add an XDT transform (web.config.xdt) in your XM cloud solution.

Create a folder named xdts at path - yourrepo/authoring/platform

• Open the xdts subfolder, create a file named web.config.xdt, and open it for editing. Add the following code, then add your CSP in the value attribute value:

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
    <location path="sitecore">
        <system.webServer>
            <httpProtocol>
                <customHeaders>                            
                    <add xdt:Transform="SetAttributes" xdt:Locator="Match(name)" name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://apps.sitecore.net; img-src 'self' data: https://yourdamurl/ https://s.gravatar.com https://*.wp.com/cdn.auth0.com/avatars; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com; block-all-mixed-content; child-src 'self' https://yourdamurl/; connect-src 'self' https://yourdamurl/; media-src https://yourdamurl/"/>
                </customHeaders>
            </httpProtocol>
        </system.webServer>
    </location>
</configuration>

Replace your DAM URL in above.

Ensure that the Content-Security-Policy tag contains the URL of the Content Hub instance, other delivery hostnames, and generated public links

• Include it in your build pipeline (xmcloud.build.json)

To include the web.config file transformation in the build configuration, open the xmcloud.build.json file and add the following properties:

"transforms": [
    {
        "xdtPath": "/xdts/web.config.xdt",
        "targetPath": "/web.config"
    }
  ]

• In the authoring/platform folder, open the Platform.csproj file and add the following:

  <ItemGroup>
    <Content Include="xdts\web.config.xdt">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
  </ItemGroup>

Reploy the environment.

Step 3: Configure CORS in Content Hub

Even after everything is configured, your DAM UI might not load unless CORS is set correctly.

In Content Hub:

1. Go to Manage → Settings → CORS Configuration
2. In URL field, enter the URL of Your Sitecore XM cloud CM URL and click Add.
3. In URL field, enter the URL of Sitecore Page Builder URL (https://pages.sitecorecloud.io/) and click Add.
4. Save

This allows the DAM iframe to render properly inside Sitecore editors.

Content Editor:

Page Builder:

ArreyNitesh

Email - arreynitesh@gmail.com