DAM asset picker

The Optimizely Content Marketing Platform (CMP) asset picker is a user interface that lets you use the Optimizely CMP Digital Asset Management (DAM) system in other third-party systems or Optimizely products, such as Content Management System (CMS). You can select digital assets from CMP and use those assets in other systems.

You can open the CMP asset picker by calling the http://cmp.optimizely.com/cloud/library-picker endpoint. You can use the asset picker only in a standalone browser window or tab.

Log in to CMP and select an instance. The library displays assets. If you select some assets, the asset picker calls the opener browser window back using the postMessage API then closes the window.

Click Back to cancel a selection and close the window. You must open the asset picker from a third-party application to reuse the library.

Event listener

When you click Choose in the asset picker, the open browser window executes an event listener. The example code of the listener is similar to the following code.

window.addEventListener("message", (event) => {  
  // Processing of event.data goes here  
}, false);

The event.origin should be equal to https://cmp.optimizely.com. Filter other events as message events and send them from other applications. The event.data contains a JSON object containing an array of selected assets. The asset object has the following properties.

Pass options in URL

You can pass options in the URL to customize the picker experience further. The options are JSON objects that you pass as pickerOptions URL params with an encoded string. Currently supported options are:

• assetTypes – Defines the type of assets that are shown in the picker. Passed as an array, available options are image, video, article, and raw_file.
• multiSelect – Accepts a Boolean value to turn multi-selection on or off in the picker.
• instanceIds – Accepts an array of string value of instance ID. It restricts the accessibility in the provided instances.
• parentFolderGuid – Accepts a string value of a folder GUID. It directs the users to go inside the specified folder.

To pass the options as hashed strings, see the following implementation examples.

HTML

<button id="openLibrary">Open Library</button>

JavaScript

<script>
  // Function to handle the chosen assets
  const handleChoose = (event) => {
    alert(JSON.stringify(event.data));
  };

  // Options for the library picker
  const options = {
    instanceIds:['abcdefgh12345678abcdefgh', '12345678abcdefgh12345678],
    assetTypes: ['image'],
    multiSelect: true,
    parentFolderGuid: 'abcdefgh12345678abcdefgh12345678'
  }; // can be passed as {} if no options are required

  // Encode the options for passing as a query parameter
  const encodedOptions = window.btoa(JSON.stringify(options));

  // Function to open the library picker window
  const openLibrary = () => {
    window.open(`https://cmp.optimizely.com/cloud/library-picker?pickerOptions=${encodedOptions}`, 'Library', 'popup');
  };

  // Add an event listener for the 'message' event to handle chosen assets
  window.addEventListener("message", handleChoose, false);

  // Get the button element with the id 'openLibrary'
  const button = document.getElementById('openLibrary');

  // Add an event listener to the button to trigger the opening of the library picker
  button.addEventListener('click', openLibrary);
</script>