DAM asset picker

4 min

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.

Key	Type	Description
is_rendition	boolean	True if the chosen object is a rendition of an asset; otherwise, false.
id	string	Optimizely CMP-specific identifier of the asset or rendition when is_rendition is true.
original_asset_id	string	Optimizely CMP-specific identifier of the original asset from which the rendition is generated when is_rendition is true. The value is empty when is_rendition is false.
title	string	Title of the asset.
url	string	Accessible URL of the asset.
width	number	Width of the asset in pixels (image or video).
height	number	Height of the asset in pixels (image or video).
type	string	Type of the asset. The typical value is image, video, article, or raw_file.
alt_text	string	Alt-text of the asset. Available for image and video only.
guid	string	Deprecated. Will be removed after December 2025.
alt	string	Deprecated. Will be removed after December 2025.

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>