Bynder UI components

Bynder UI components to support frontend developers on building their web applications.

Compact View

The Bynder Compact View is the easiest way to get assets from Bynder into your web application. It's a component written in ReasonML powered by an OCaml backend that allows developers to add support for selecting and importing assets from a Bynder Asset Bank without having to worry about the intricacies related to building a file picker - UI design, authentication, API requests, etc. This component fetches the assets and their metadata through the Bynder API and renders it by replicating Bynder look and feel. Users can query, filter (by smartfilters, metaproperties, tags, keyword, and existing collections), sort, and select assets to then import them into another application.

compact view login compact view

Setup

To setup the Bynder Compact View in your web app, add the following line to your page:

<script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.3.0.min.js"></script>

Usage

Include <div id="bynder-compactview" /> on your page to create a button that will allow you to load the Compact View. The following attributes can be defined:

Attribute Description Possible Values Default Value
data-assetTypes Comma separated list of asset types to display "image", "video", "document", "audio" "image,video"
data-autoload Enable automatic loading after rendering "true" or "false" "false"
data-button Button text Any "Open Compact View"
data-collections Enable the collections in the Compact View "true" or "false" "false"
data-defaultEnvironment Set a default environment for the Compact View Bynder URL or empty Empty
data-fullScreen Set the Compact View to have the whole parent container's dimensions "true" or "false" "false"
data-header Set the header as visible "true" or "false" "true"
data-language Set language for the Compact View "en_US", "nl_NL", "es_ES" "en_US"
data-mode Set the Compact View to allow multiple or single asset selection "single" or "multi" "multi"
data-zindex Set the z-index of the Compact View Between 1 and 16777270 "100"
data-searchTerm Set the initial value for search term "Keyword" ""

Example:

<div id="bynder-compactview"
     data-assetTypes="image,video,document,audio"
     data-autoload="false"
     data-button="Open Compact View"
     data-collections="true"
     data-defaultEnvironment="https://example.bynder.com"
     data-fullScreen="false"
     data-header="true"
     data-language="en_US"
     data-mode="multi"
     data-zindex="300"
>
</div>

Once the assets are selected, they are submitted by the Compact View using CustomEvents. They will be returned in an array of objects that can be handled by adding a listener to your page:

document.addEventListener("BynderAddMedia", function(e) {
  var assetsToImport = e.detail;
});

The response contains all of the information about the assets from the Bynder portal, including all of the thumbnails.

Authentication

For the authentication to work, you will need a valid Bynder portal URL and a valid login (username/password) for that same account. You will also need to allow pop-ups from your domain, otherwise you will get an error message when you press the "Sign in" button after entering your Bynder URL.

Demo

If you want you can try out the Compact View demo here or try it yourself by using the following HTML code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Compact View</title>
    </head>

    <body>
        <!-- Compact View Button -->
        <div id="bynder-compactview"
             data-assetTypes="image,video"
             data-autoload="false"
             data-button="Open Compact View"
             data-collections="true"
             data-defaultEnvironment=""
             data-fullScreen="false"
             data-header="true"
             data-language="en_US"
             data-mode="multi"
             data-zindex="300"
             >
        </div>
        <script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.1.0.min.js"></script>
        <div id="importedAssets"></div>
        <script>
            document.addEventListener('BynderAddMedia', function (e) {
                // The selected assets are found in the event detail property
                var selectedAssets = e.detail;

                var importedAssetsContainer = document.getElementById('importedAssets');
                importedAssetsContainer.innerHTML = '';

                var asset;
                for (var i = 0; i < selectedAssets.length; i++) {
                    asset = selectedAssets[i];
                    switch (asset.type) {
                        case 'audio':
                        case 'document':
                        case 'image':

                        // Note that we use the 'webimage' thumbnail here but all of the thumbnails
                        // are returned in the compact view response, so the user can use the
                        // thumbnail that is relevant to their use case
                        importedAssetsContainer.innerHTML += '<img src=' + asset.thumbnails['webimage'] + ' />';
                        break;
                        case 'video':
                        importedAssetsContainer.innerHTML += (
                            '<video width="640" height="480" controls>' +
                            '<source src="' + asset.videoPreviewURLs[0] + '" type="video/mp4">' +
                            '</video>'
                        )
                        break;
                    }
                }
            });
        </script>
    </body>
</html>

Versions

Version 1.3.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.3.0.min.js

New Features:

Version 1.2.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.2.0.min.js

New Features:

Version 1.1.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.1.0.min.js

New Features: