Integrate Universal Compact View

Universal Compact View can be integrated into other systems, so that the assets from your Webdam portal can be used in your web application. This component fetches all the content related to the assets and their metadata through the Webdam API and renders it by replicating the Webdam look and feel. Users can search, filter and select assets to then import them into your application.

Some additional configuration is necessary for your portal in order to make use of the Universal Compact View. Read more about setting up the Universal Compact View and best practices below.

How to Set Up the Universal Compact View?

Some additional configuration is necessary for your portal in order to make use of the Universal Compact View. Follow the steps below to make sure your portal is ready.

  1. Contact your Onboarding Manager in case your portal is still in the implementation phase. If not, contact your Customer Success Manager and ask them to set up your portal for using Universal Compact View. Once your portal has been set up correctly, it's time to integrate the Universal Compact View with your external system(s)

  2. Search 2.0 needs to be enabled for your portal. Contact your Customer Success Manager for more information.
  3. Follow these technical implementation instructions if you want to integrate Universal Compact View with an external system. You can also make use of one of our native integrations that already have the Universal Compact View installed.

  4. (Optional) Set up which filters should be automatically applied when opening the Universal Compact View. Read more about it here.

  5. Configure which derivatives you want the Universal Compact View to make use of.

  6. (Optional) Configure the metaproperties you want to show as a filter in the Universal Compact View. Read more about it here.

Automatic filters

When working with external systems it can be useful to have filters automatically applied when opening the Universal Compact View. If users for example already did some filtering in their PIM, you don't want them to get delayed by having to go through the filtering again in the Universal Compact View. Set up pre-applied filters, so that users immediately get to see the relevant assets they need.

Add attributes to the HTML code to automatically trigger values. For example with the attribute data-searchTerm and the value Android the search term Android will be pre-applied when opening the Universal Compact View. Read more about automatic triggers in the Usage section of our technical documentation.

Configure your derivatives

 

Image files

By default we make use of the webimage derivative for image files. This means that instead of the original file the webimage derivative is added to your content. It is possible to make use of one of the alternative default derivatives or one of your custom public derivatives.

After having selected assets in the Universal Compact View, the API will return all the available derivative URLs that are available for the selected media. Parse the URL of the media derivative that you want to use and make sure this item will be integrated into your external content.

Let's take a look at the HTML example code from our technical documentation, which can be used to integrate the Universal Compact View. You can easily change the image derivative used by replacing the webimage value with the name of the public derivative you want to use instead, as you can see in the code box below.

<img src=' +assetsResponse[0].thumbnails['webimage'] + ' />';

In Webdam the following embeddable formats are available: 

  • webImage

  • thumbnail

  • mini

  • original

  • (Optional) transformBaseURL
    Read more about Dynamic Asset Transformations here

Video files

You can only make use of the default mp4 video download preset.

Dropdown

When users use the Universal Compact View to add an asset to their (external) content a dropdown will be available allowing them to select the original file or one of the available derivatives.

dropdown.jpg

Example of the dropdown

The options available in the dropdown cannot be customized. The dropdown shows the following options:

  • The original file

  • The embeddable links
    Read more about embeddable links here.

Read more about the dropdown part of the SingleSelectFile section in our technical documentation here.

Note

  • The dropdown is only available when adding a single asset. When adding multiple asset using the Universal Compact View the dropdown will not be visible.

  • Depending on the architecture of your integration the dropdown may not be visible in the Universal Compact View.

Configure Your Search Facets

Read more about configuring your search facets here.

 

Updated

Was this article helpful?

0 out of 0 found this helpful

We're sorry to hear that!

Learn more with Webdam Webinars

Have more questions? Check out Webdam Webinars