HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

Integrate the Welcome DAM Library Picker

This topic describes how to integrate the Welcome DAM Library Picker into Content Cloud.

To invoke the Welcome DAM Library Picker, create an HTML element (such as a Browse the Welcome Library button) to trigger a pop-up window:

<button id="openLibrary">Browse the Welcome 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 Library Picker popup 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 Welcome DAM Library, the 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 own 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 which the user selected from the Library Picker. Each object contains three attributes:
guid – Welcome’s internal GUID for the asset.
title– Human-readable description of the asset.
url– Welcome’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 Content Cloud (CMS 12)

When you select an asset for use, Content Cloud obtains a reference of the URL from Welcome with the asset data that is passed to the Content Cloud front end and stored in a database. The reference is a combination of the Welcome ID and the content provider ID, such as 1234_ProviderId.

Related topics


Did this page help you?