Universal Compact View can be integrated into other systems, so that the assets from your Bynder portal can be used in your web application. This component fetches all the content related to the assets and their metadata through the Bynder API and renders it by replicating the Bynder 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.
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.
-
Contact your Onboarding Manager in case your portal is still in the implementation phase. If not, contact your Customer Success Contact 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)
-
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.
-
(Optional) Set up which filters should be automatically applied when opening the Universal Compact View. Read more about it here.
-
Configure which derivatives you want the Universal Compact View to make use of.
-
(Optional) Configure the metaproperties you want to show as a filter in the Universal Compact View. Read more about it here.
When working with external systems it can be useful to have a search term applied when opening the Universal Compact View. If users for example already did some searching in their PIM, you don't want them to get delayed by having to search again in the Universal Compact View. Set up a pre-applied search query, 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 defaultSearchTerm 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.
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'] + ' />';
You can retrieve the name all your public derivatives by making the retrieve derivatives API call. Read more about it here and check out the example section below if you want more information.
In the example below you can find the response of the API call to retrieve all the derivatives. The public derivatives have the value "isPublic": 1. These public derivatives can be configured as derivative for the Universal Compact View.
Many clients set up specific derivatives for certain use cases. The Web Banner derivative is often used to automatically generate banners that can be used on websites. The same goes for the Email Banner derivative, which allows email marketeers to easily use a banner with the right dimensions and size for their email marketing campaigns. The social media derivatives are set up, so that users can easily use the pregenerated images to post them on social media channels without having to worry about resizing the images first.
Do you want to use your own public derivative with the Universal Compact View? Copy its name which you can find as value of the prefix field and use this name instead of the webimage value.
[
{
"prefix": "Web Banner",
"height": 300,
"isCrop": 1,
"dpi": -1,
"width": 1000,
"allowedTypes": "",
"isOnTheFly": 0,
"isExtent": 0,
"isPublic": 1
},
{"prefix": "Email Banner",
"height": 300,"isCrop": 1,
"dpi": -1,
"width": 600,
"allowedTypes": "",
"isOnTheFly": 0,
"isExtent": 0,
"isPublic": 1},
{
"prefix": "Linkedin",
"height": 220,
"isCrop": 1,
"dpi": -1,
"width": 646,
"allowedTypes": "",
"isOnTheFly": 0,
"isExtent": 0,
"isPublic": 1
},
{
"prefix": "Facebook",
"height": 628,
"isCrop": 1,
"dpi": -1,
"width": 1200,
"allowedTypes": "",
"
By default we make use of the mp4 video derivative, but you can also make use of the other format webm that we offer. To change the video derivative used, change the HTML code that you use to integrate the Universal Compact View. Replace the mp4 value with webm.
'<source src="' + assetsResponse[0].videoPreviewURLs[0] + '" type="video/mp4">' +
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.
The options available in the dropdown cannot be customized. The dropdown shows the following options:
-
The original file
The asset needs to be marked as public in order for this option to be available.
-
The default derivatives
The default derivatives that are available for the asset, such as the thumbnail, mini and web image derivatives.
-
Public custom derivatives
The custom derivatives marked as public that are available for the asset.
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.
In order for a metaproperty to show in the Universal Compact View as filter it needs to have the setting 'API field' enabled. Define which metaproperties need to be available and follow the steps below.
-
Go to Settings > Taxonomy > Metaproperties management.
-
Hover over the name of the metaproperty you want to make available and click the
icon.
-
Tick the option Apifield and click Save to save the changes.
-
(Optional) repeat these steps to set up other metaproperties for the Universal Compact View.
-
In order to use the Universal Compact View a custom CDN needs to be set up for your portal. Read more about setting up a Cloudfront for your portal here.
-
All assets that you want to use in the Universal Compact View need to be marked as public. Read more about it here.
-
Set up the derivatives. You can read more about it here.