Integracja Content Hub DAM z innym CMS

In your CMS you can use Sitecore Content Hub assets by copying public link URLs from Content Hub Portal and pasting it into your CMS. This works, but it’s not the most friendly solution for content authors. Fortunately Content Hub offers integration point which you can use in any web-based CMS to allow authors to pick assets using Content Hub UI.

There are two steps to complete the integration:

Add Allowed Domains to Content Hub CORS Settings

Open Content Hub admin panel, go to Settings, search for CORSConfiguration, add your CMS domain and any other domains you want to test the integration:

Code

Add following integration to your CMS. The HTML below adds “Browse from Sitecore DAM” link which opens Content Hub iframe in a pop-up allowing to browse the assets. Once asset is selected Content Hub will post a message via Window message event. The message contains i.a. public link URL, alt text, asset ID, width and height which you can later store in your CMS field:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1100px;
            height: 600px;
            background-color: white;
            z-index: 1;
        }

        #popup-titlebar {
            background-color: #2B2B2A;
            height: 20px;
            padding: 20px;
        }

        #popup-title {
            display: inline;
            float: left;
            color: white;
            margin: 0;
        }

        #close-button {
            text-decoration: none;
            float: right;
            color: white;
        }

        #iframe-parent {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <a id="popup-button" href="#">Browse Sitecore DAM</a>

    <div id="overlay"></div>
    <div id="popup">
        <div id="popup-titlebar">
            <h4 id="popup-title">Insert from Sitecore DAM</h4>
            <a href="#" id="close-button">X</a>
        </div>
        <div id="iframe-parent"></div>
    </div>

    <script type="text/javascript">
        const button = document.getElementById("popup-button");
        const overlay = document.getElementById("overlay");
        const popup = document.getElementById("popup");
        const iframeParent = document.getElementById("iframe-parent");
        const closeButton = document.getElementById("close-button");
        
        // Host is different for UAT and Production, keep it in settings
        const contentHubHost="https://my_ch_instance.sitecorecontenthub.cloud";
        // Path may be different, keep it in settings
        const contentHubBrowsePage="/en-us/sitecore-dam-connect/approved-assets";
        // Key may be different, keep it in settings
        const externalRedirectKey="Sitecore";

        function openPopup(){
            overlay.style.display = "block";
            popup.style.display = "block";
            iframeParent.innerHTML = `<iframe style="width:100%;height:100%;border:none" src="${contentHubHost}${contentHubBrowsePage}?externalRedirectKey=${externalRedirectKey}&externalRedirectUrl=${window.location.href}&hasExternalRedirect=true" id="popup-iframe"></iframe>`;
        }

        function closePopup(){
            overlay.style.display = "none";
            popup.style.display = "none";
        }

        function receiveContentHubMessage(message){
            if (message.origin != contentHubHost){
                return;
            }

            const data = message.data;
            if (!data.public_link) {
                alert("Public link not found. Please select one.");
            }

            closePopup();
            console.log(data);

            //You can use thumbail URL for preview in your CMS, but it requires user to login:
            const thumbnailUrl = `${contentHubHost}/api/gateway/${data.selected_asset_id}/thumbnail`;

            //Use Public URL in your public website or application: 
            alert(`Selected asset:\nAlt text: ${data.alternative}\nID: ${data.selected_asset_id}\nWidth: ${data.width}\nHeight: ${data.height}\n\nPublic URL: ${data.public_link}\n\nThumbnail URL: ${thumbnailUrl}`);
        }

        button.addEventListener("click", openPopup);
        closeButton.addEventListener("click", closePopup);
        overlay.addEventListener("click", closePopup);

        if (window.addEventListener) {
            window.addEventListener("message", receiveContentHubMessage, false);
        }
        else {
            window.attachEvent("onmessage", receiveContentHubMessage);
        }

    </script>
<body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<!DOCTYPE html>

<html>

<head>

<style>

#overlay {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

}

#popup {

display: none;

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 1100px;

height: 600px;

background-color: white;

z-index: 1;

}

#popup-titlebar {

background-color: #2B2B2A;

height: 20px;

padding: 20px;

}

#popup-title {

display: inline;

float: left;

color: white;

margin: 0;

}

#close-button {

text-decoration: none;

float: right;

color: white;

}

#iframe-parent {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<a id="popup-button" href="#">Browse Sitecore DAM</a>

<h4 id="popup-title">Insert from Sitecore DAM</h4>

</div>

</div>

const button = document.getElementById("popup-button");

const overlay = document.getElementById("overlay");

const popup = document.getElementById("popup");

const iframeParent = document.getElementById("iframe-parent");

const closeButton = document.getElementById("close-button");

// Host is different for UAT and Production, keep it in settings

const contentHubHost="https://my_ch_instance.sitecorecontenthub.cloud";

// Path may be different, keep it in settings

const contentHubBrowsePage="/en-us/sitecore-dam-connect/approved-assets";

// Key may be different, keep it in settings

const externalRedirectKey="Sitecore";

function openPopup(){

overlay.style.display = "block";

popup.style.display = "block";

iframeParent.innerHTML = `<iframe style="width:100%;height:100%;border:none" src="${contentHubHost}${contentHubBrowsePage}?externalRedirectKey=${externalRedirectKey}&externalRedirectUrl=${window.location.href}&hasExternalRedirect=true" id="popup-iframe"></iframe>`;

}

function closePopup(){

overlay.style.display = "none";

popup.style.display = "none";

}

function receiveContentHubMessage(message){

if (message.origin != contentHubHost){

return;

}

const data = message.data;

if (!data.public_link) {

alert("Public link not found. Please select one.");

}

closePopup();

console.log(data);

//You can use thumbail URL for preview in your CMS, but it requires user to login:

const thumbnailUrl = `${contentHubHost}/api/gateway/${data.selected_asset_id}/thumbnail`;

//Use Public URL in your public website or application:

alert(`Selected asset:\nAlt text: ${data.alternative}\nID: ${data.selected_asset_id}\nWidth: ${data.width}\nHeight: ${data.height}\n\nPublic URL: ${data.public_link}\n\nThumbnail URL: ${thumbnailUrl}`);

}

button.addEventListener("click", openPopup);

closeButton.addEventListener("click", closePopup);

overlay.addEventListener("click", closePopup);

if (window.addEventListener) {

window.addEventListener("message", receiveContentHubMessage, false);

}

else {

window.attachEvent("onmessage", receiveContentHubMessage);

}

</script>

<body>

</html>

Szukaj na stronie

Add Allowed Domains to Content Hub CORS Settings

Code

Results