How-to guideGet a task done

Embed the Asset Picker

This guide explains how to embed the CMP Asset Picker in a third-party application, either as a web component or in an iframe. Use the web component when you control the page markup and want the Asset Picker to render as part of your own DOM. Use the iframe when your application embeds external content in a frame.

For the concepts behind internal and external integrations, see How the Asset Picker integration works.

Before you begin

Decide which environment you are integrating with, and obtain the Asset Picker host URL for that environment. The host URL provides both the iframe source and the web component script. For the list of environments and their host URLs, and the full set of parameters and attributes, see Asset Picker parameters reference.

For an internal integration, obtain the configuration for the lens you are connecting to: the domain, domain ID, API key, and lens ID. To set up a lens and find these values, see Set up a lens for the Asset Picker.

Embed the Asset Picker as a web component

  1. Load the web component by adding its script to the page, using the host URL for your environment:

    <script
  defer
  src="https://app.storyteq.com/asset-picker/web-component/asset-picker.umd.js"
></script>

  2. Add an <asset-picker> element where you want the Asset Picker to render, and set the attributes for your integration:

    <asset-picker
  domain="your-domain.example.com"
  api-key="<api-key>"
  domain-id="<domain-id>"
  lens-id="<lens-id>"
></asset-picker>

Loading the script registers the custom <asset-picker> element, so you can use it anywhere in the page. When you do not set the api-integration attribute, the Asset Picker calls the API at the host in the script tag. To enable options such as multiple selection, set the corresponding attributes; see Asset Picker parameters reference for the full list.

Embed the Asset Picker as an iframe

Set the iframe src to the Asset Picker host URL for your environment, and pass the configuration as query parameters:

<iframe
  src="https://app.storyteq.com/asset-picker/?domain=your-domain.example.com&apiKey=<api-key>&domainId=<domain-id>&lensId=<lens-id>"
  frameborder="0"
  width="900px"
  height="600px"
></iframe>

Set the iframe width and height to suit your layout. The iframe accepts the same configuration as the web component, supplied as URL parameters rather than element attributes. For the full set of parameters, see Asset Picker parameters reference.

Connect an external integration to the Luma v2 endpoints

By default, the Asset Picker calls the API at the host you load it from, which is the configuration for an internal integration. For an external integration, set the API integration so the Asset Picker calls the Luma v2 endpoints for the relevant environment.

Set this as the api-integration attribute on the web component, or as the apiIntegration query parameter on the iframe. For the accepted values, see Asset Picker parameters reference.

Related pages