# Knowledge Base

### Integrate Compact View

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. Find more technical information and guidance on integrating the Compact View here. Find out below how you can configure which image and video derivative is added to your content as well as how you can make use of automatic filters.

#### Automatic filters

When working with external systems it can be useful to have filters automatically applied when opening the 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 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 Compact View. Read more about automatic triggers in the Usage section of our technical documentation.

##### 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 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 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 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 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},
{
"height": 220,
"isCrop": 1,
"dpi": -1,
"width": 646,
"allowedTypes": "",
"isOnTheFly": 0,
"isExtent": 0,
"isPublic": 1
},
{
"height": 628,
"isCrop": 1,
"dpi": -1,
"width": 1200,
"allowedTypes": "",
"
##### Video files

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 Compact View. Replace the mp4 value with webm.

'<source src="' + assetsResponse[0].videoPreviewURLs[0] + '" type="video/mp4">' +

#### Dropdown

When users use the 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.

Example of the dropdown

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 Compact View the dropdown will not be visible.

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