Integrate the CMP DAM Asset Picker into CMS

3 min

To invoke the Optimizely Content Marketing Platform (CMP) Digital Asset Manager (DAM) Asset Picker in Optimizely Content Management System (CMS), create an HTML element (such as a Browse the CMP Library button) to trigger a pop-up window:

<button id="openLibrary">Browse the CMP Library</button>

Within a <script> tag on this same page, create the code to activate the button event handler, and process the asset data returned from the DAM Asset Picker pop-up window:

// Define a function to open the DAM popup window  
const openLibrary = () => {
  window.open('<http://app.welcomesoftware.com/cloud/library-picker' > , 'Library', 'popup')
}

// Define a function to do something useful with selected asset data returned from the popup  
const handleAssetData = (event) => {

  // For example, stringify the asset data and generate an alert  
  alert(JSON.stringify(event.data));

}

// Add an event listener to call the handler function  
window.addEventListener("message", handleAssetData, false)

// Now, register the event listener to the ‘openLibrary’ button.  
document.getElementById('openLibrary').addEventListener('click', openLibrary)

When a user selects one or more assets from the CMP DAM Library, the Asset Picker returns reference data to the page in a JSON object. You can register a callback function to use this data. Typically, you would import the reference to the asset into the calling application's internal database. You can also ingest the data into some application-specific datastore for further use within the calling application.

The returned data structure is a JSON object whose data attribute contains an array of objects representing the selected assets.

In the following example object, the array contains two assets the user selected from the Asset Picker. Each object contains three attributes:

guid – CMP's internal GUID for the asset.

title– Human-readable description of the asset.

url– CMP's internal URL for the asset's binary BLOB (an image file, PDF document, and so on).

{
  "data": [
    {
      "guid": "fb3b0cba987611eca0125222b847f4cd",
      "title": "Man meditating in a furnished flat.",
      "url": "https://images2.welcomesoftware.com/Zz1mYjNiMGNiYTk4NDQ3ZjRjZA"
    },
    {
      "guid": "2ad5ecd08de5053a69a854c4a1723bc4",
      "title": "Close up of a couple toasting with glasses of red wine.",
      "url": "https://images1.welcomesoftware.com/Zz0yYWQ1ZWNkMDhkZTUwNTN"
    }
  ]
}

Pass an asset reference to CMS 11

When you select an asset for use, CMS version 11 obtains a URL reference from CMP, with the asset data passed to the CMS front-end and stored in a database. The reference combines the CMP ID and the content provider ID, such as 1234_ProviderId.

CMP DAM Asset Picker in CMSCMP DAM Asset Picker in CMS

CMP + CMSCMP + CMS

Optimizely Content Marketing Platform Digital Asset Management Asset PickerOptimizely Content Marketing Platform Digital Asset Management Asset Picker

Configuration CMSConfiguration CMS

Integrate the CMP DAM Asset Picker into CMS

Pass an asset reference to CMS 11

Related topics