Library picker

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

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

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

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

Event listener

When you click Choose in the library 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
`guid`	string	Optimizely CMP-specific identifier of the asset.
`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 one of `image`, `video`, `article`, and `raw_file`.
`alt`	string	Alt-Text of the asset, available for `image` and `video` only.

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.
organization – Accepts a string value of an organization ID. It restricts the accessibility in the provided instance.

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 = {
    assetTypes: ['image'],
    multiSelect: true
  }; // 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>