Universal Compact View

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Universal Compact View</title>
  </head>
  <body>
    <div id="importedAssets"></div>
    <script src="https://ucv.bynder.com/5.0.5/modules/compactview/bynder-compactview-5-latest.js"></script>
    <script>
      BynderCompactView.open({
        language: "en_US",
        theme: {
          colorButtonPrimary: "#3380FF"
        },
        mode: "SingleSelectFile",
        onSuccess: function(assets, additionalInfo) {
          var importedAssetsContainer = document.getElementById(
            "importedAssets"
          );
          importedAssetsContainer.innerHTML = "";

          var asset = assets[0];

          console.log(asset, additionalInfo);

          switch (asset.type) {
            case "IMAGE":
              importedAssetsContainer.innerHTML +=
                "<img src=" + additionalInfo.selectedFile.url + " />";
              return;
            case "AUDIO":
            case "DOCUMENT":
              importedAssetsContainer.innerHTML +=
                "<img src=" + asset.files.webImage.url + " />";
              return;
            case "VIDEO":
              importedAssetsContainer.innerHTML +=
                '<video width="640" height="480" controls>' +
                '<source src="' +
                asset.previewUrls[0] +
                '" type="video/webm">' +
                "</video>";
              return;
            default:
              return;
          }
        }
      });
    </script>
  </body>
</html>

BynderCompactView.Open({
  portal: { url: 'your-portal.getbynder.com' },
  onSuccess: function(assets, additionalInfo) {
    console.log(assets);
  }
});

type AdditionalInfo = { selectedFile?: File }

type File = { url: string; width?: number; height?: number; fileSize?: number; }

type MetapropertyName = string;
type MetapropertyOptionName = string;
type MetapropertyOptionId = string;

type PredefinedMetapropertiesOptionsType = {
        MetapropertyName: { MetapropertyOptionName: MetapropertyOptionId }
    }

type AssetFilterJson = {
    predefinedAssetType?: AssetType[]; //predefined asset types
    collectionId?: string; //predefined collection id. Predefined collection ID should be provided in base64Encoded format (Collection_id 737141DC-7562-49C4-8BD8F6628578028A)
    predefinedMetapropertiesOptions?: PredefinedMetapropertiesOptionsType; //predefined metaproperty IDs
    searchTerm?: string; //predefined search term
    predefinedTagNames?: string[]; //predefined tags
    isLimitedUse?: boolean; //whether or not this asset is marked as Limited Use
    showToolbar?: boolean; //show toolbar for predefined filters (false by default)
};

Predefined 'collection ID' should be provided in base64Encoded format '(Collection_id 737141DC-7562-49C4-8BD8F6628578028A)' = 'KENvbGxlY3Rpb25faWQgNzM3MTQxREMtNzU2Mi00OUM0LThCRDhGNjYyODU3ODAyOEEp'

type AssetType = 'AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO'

type Theme = {
   colorPrimary?: CSSColor;
   colorButtonPrimary?: CSSColor;
   colorButtonPrimaryLabel?: CSSColor;
   colorButtonPrimaryActive?: CSSColor;
   colorButtonPrimaryHover?: CSSColor;
   colorButtonPrimaryHoverLabel?: CSSColor;
};

databaseId
name
files
url
tags
textMetaproperties { 
  name 
  value 
}
metaproperties { 
  nodes { 
    name 
    options {
      name 
      displayLabel 
    }
  }
}

"databaseId \
name \
files \
url \
tags \
..."

databaseId       name             description      type
url              createdAt        publishedAt      updatedAt
fileSize         height           width            orientation
isArchived       brandId          files            copyright
extensions       isLimitedUse     isPublic         isWatermarked
tags             originalUrl
metaproperties { nodes { ... } }
textMetaproperties { name value }

interface Asset {

    # Asset ID.
    id:  ID! 

    # Asset database Id.
    databaseId:  String! 

    # Asset name.
    name:  String! 

    # Asset description.
    description:  String 

    # Asset type. Possible values are: IMAGE, DOCUMENT, AUDIO and VIDEO.
    type:  AssetType! 

    # The HTTP URL for this payload.asset.
    url:  URI! 

    # Date created.
    createdAt:  DateTime! 

    # User who created the payload.asset.
    createdBy:  User 

    # Date published.
    publishedAt:  DateTime 

    # Date updated.
    updatedAt:  DateTime 

    # Size of the asset file in bytes.
    fileSize:  Int! 

    # Height of the original asset file.
    height:  Int! 

    # Width of the original asset file.
    width:  Int! 

    # Asset orientation. Possible values are: PORTRAIT, LANDSCAPE, SQUARE.
    orientation:  Orientation! 

    # Whether or not this asset is archived.
    #
    # Knowledge base entry
    isArchived:  Boolean! 

    # Brand ID.
    brandId:  String 

    # Files associated with the payload.asset.
    files:  JSONObject! 

    # Copyright of the payload.asset.
    copyright:  String 

    # Extensions of the asset file. This can have more than one value in case of a
    # derivative with different extensions.
    extensions: [String!]! 

    # Whether or not this asset is marked as Limited Use.
    #
    # Knowledge base entry
    isLimitedUse:  Boolean! 

    # Whether or not this asset is marked as Public.
    #
    # Knowledge base entry
    isPublic:  Boolean! 

    # Whether or not this asset has a watermark.
    #
    # Knowledge base entry
    isWatermarked:  Boolean! 

    # Tags of the payload.asset.
    #
    # Knowledge base entry
    tags: [String!]! 

    # Asset original URL.
    originalUrl:  URI 

    # Metaproperties of the asset
    #
    # Knowledge base entry
    metaproperties:  MetapropertyConnection! 

    # Metaproperties of the asset with type `text` and `longtext`
    #
    # Knowledge base entry
    textMetaproperties: [TextMetaproperty!]! 
}


type TextMetaproperty {
    name:  String!
    value:  String!
}


type MetapropertyConnection {
    nodes: [Metaproperty!]!
}


type Metaproperty {
    id:  ID!
    name:  String!

    # Arguments
    # language: Preferred language for this label
    label(language:  String):  String!

    type:  String!

    zIndex:  Int!

    options: [ MetapropertyOption!]!

    isApiField:  Boolean!

    isEditable:  Boolean!

    isFilterable:  Boolean!

    isMainfilter:  Boolean!

    isMultifilter:  Boolean!

    isMultiselect:  Boolean!

    isRequired:  Boolean!

    isSearchable:  Boolean!
}


type MetapropertyOption {

    id:  ID!

    name:  String!

    assetCount:  Int!

    # Arguments
    # language: Preferred language for this label
    label(language:  String):  String!

    displayLabel:  String!

    imageUrl:  URI

    zIndex:  Int!

    isActive:  Boolean!

    isHiddenByDefault:  Boolean!

    isSelectable:  Boolean!
}

type AdditionalInfo {
  selectedFile?: {
    url: string
    width?: number
    height?: number
    fileSize?: number
  }
}

type AssetType = 'AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO'

type AdditionalInfo = { selectedFile?: File }

type File = { url: string; width?: number; height?: number; fileSize?: number; }

type MetapropertyName = string;
type MetapropertyOptionName = string;
type MetapropertyOptionId = string;

type PredefinedMetapropertiesOptionsType = {
        MetapropertyName: { MetapropertyOptionName: MetapropertyOptionId }
    }

type AssetFilterJson = {
    predefinedAssetType?: AssetType[]; //predefined asset types
    collectionId?: string; //predefined collection id. Predefined collection ID should be provided in base64Encoded format (Collection_id 737141DC-7562-49C4-8BD8F6628578028A)
    predefinedMetapropertiesOptions?: PredefinedMetapropertiesOptionsType; //predefined metaproperty IDs
    searchTerm?: string; //predefined search term
    predefinedTagNames?: string[]; //predefined tags
    isLimitedUse?: boolean; //whether or not this asset is marked as Limited Use
    showToolbar?: boolean; //show toolbar for predefined filters (false by default)
};
}

type Theme = {
  colorPrimary?: CSSColor
  colorButtonPrimary?: CSSColor
  colorButtonPrimaryLabel?: CSSColor
  colorButtonPrimaryActive?: CSSColor
  colorButtonPrimaryHover?: CSSColor
  colorButtonPrimaryHoverLabel?: CSSColor
}

BynderCompactView.Open({
  container: document.getElementById('my-ucv-container'),
  onSuccess: function(assets) { /* ... */ }
});

{
  assetType_in? -> predefinedAssetType: AssetType[]; //predefined asset types
  collectionId?: string; //predefined collection id
  metapropertyOptionId_in? -> predefinedMetapropertiesOptions: predefinedMetapropertiesOptions type; //predefined metaproperty IDs
  searchTerm?: string; //predefined search term
  tagNames_in? -> predefinedTagNames: string[]; //predefined tags
  isLimitedUse?: boolean; //whether or not this asset is marked as Limited Use
  showToolbar?: boolean; //show toolbar for predefined filters (false by default)
}
Example for predefinedMetapropertiesOptions 
predefinedMetapropertiesOptions: {
    metapropertyName: {
        optionName1: "optionId1",
        optionName2: "optionId2"
    }
}