With Orange Logic’s content browser, users can find assets with any file extension, apply transformations, add tracking parameters to URLs, preview videos, and more. To learn how to use the content browser interface, watch the following video, which shows content browser version 2.1.0 with tracking parameters and transformations activated.
Users can select any asset format they have permission to view in the DAM. The selected format is served via Orange Logic’s content delivery network (CDN).
ℹ️
Notes
The content browser is available by default on Orange Logic Milan and later and does not require installation.
This document applies to content browser SDK version 2.1.0, which is available beginning in Orange Logic Milan. Go to Content Browser SDK (V1) if your DAM uses an earlier Orange Logic release.
User access to assets
Orange Logic only returns the assets that users have the Permissions and Security Functions to access. Additionally, when you configure the content browser, you can limit:
The available Asset Types. For example, you could limit the content browser to display only videos and images.
The available Visibility Classes. For example, you could show only assets with the “Public” Visibility Class.
The Asset Types and Subtypes that display image representatives. For example, you could allow representatives for all Asset Subtypes except for the “Legal documents” subtype.
Supported file extensions and asset previews
All file extensions are supported.
Video previews include video scrubbing and playback.
Audio previews are limited to an audio wave representative image. Audio playback is not supported yet.
When users select assets of the “Other” asset type, such as PDFs and PPTX files, they can only preview and access the asset representative, not the complete asset.
Add the Content Browser SDK to a project
You can add the content browser to projects created with HTML, JavaScript, React, and more. Go to the example section for examples created with JavaScript and React.
Follow these steps to access the content browser via Orange Logic’s Cloud Delivery Network (CDN) in a webpage.
Paste the following HTML into your webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.0/OrangeDAMContentBrowserSDK.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.0/OrangeDAMContentBrowserSDK.min.css">
</head>
<body>
<div style="display:flex; flex-direction: column; gap: 0.5em;" id="app">
<span>containerId: "react-app-root". </span>
<div style="display:flex; gap: 0.5em;">
<span>Try OrangeDAMContentBrowser.help() in the console or click this button</span>
<button style="width: 250px; height:20px;" onclick="myFunction()">Load the content browser</button>
</div>
<div id="react-app-root" style="width: 800px; height:800px; border: 2px solid black;"></div>
</div>
<script>
function myFunction() {
// this function opens the asset link in a new tab
OrangeDAMContentBrowser.open({
onAssetSelected: (assets) => {
window.open(assets[0].imageUrl, '_blank');
},
onError: (errorMessage, error) => {
},
containerId: 'react-app-root',
baseUrl: "<your-organization's-Orange-Logic-URL>"
});
}
</script>
</body>
</html>
(Optional) In the line beginning with baseUrl, replace <your-organization's-Orange-Logic-URL> with your organization’s base Orange Logic URL. For example, https://mangovations.orangelogic.com/.
To confirm the CDN loaded, call OrangeDAMContentBrowser.help() in the web console. This returns:
/* Orange DAM Content Browser SDK Example */
window.OrangeDAMContentBrowser.open({
onAssetSelected: (assets) => {
// Callback function triggered when assets are selected
console.log(assets);
window.open(assets[0]?.imageUrl, '_blank');
},
onError: (errorMessage, error) => {
// Callback function triggered when an error occurs
console.error(errorMessage, error);
},
onClose: () => {
// Callback function triggered when the asset browser is closed
window.alert('The content browser is closing.');
},
containerId: "", // ID of the container to attach the picker; opens in a popup if blank
extraFields: ['coreField.OriginalFileName', 'document.CortexPath'], // Additional fields to retrieve from the assets
baseUrl: "", // Default base URL to pre-fill in the asset browser
displayInfo: {
title: true, // Whether to display the asset title
dimension: true, // Whether to display the asset dimensions
fileSize: false, // Whether to display the file size
tags: false, // Whether to display the asset tags
},
publicApplicationName: "", // Public name of the DAM to display on the login screen
pluginName: "OrangeDAM Content Browser", // Name of the plugin to display on the login screen
ctaText: "Insert", // Text to display on the insert button
persistMode: true, // Whether the browser remains open after selecting an asset
availableDocTypes: ['Images', 'Videos', 'Audio', 'Others'], // Array of available asset types to filter assets
availableRepresentativeSubtypes: ['Other'], // Array of supported subtypes for representative images
showCollections: true, // Whether to show Collections V2 (Beta) in the content browser
lastLocationMode: true, // Whether to open the last selected folder on load
allowTracking: true, // Whether to activate tracking parameters for asset URLs
});
ℹ️
Note
If you need help, submit a support request and include this ID in the description: 2P7YOH54ET5O.
Configure the content browser
You can use instances of Orange Logic’s content browser in many different integrations throughout your content ecosystem and customize each instance.
OrangeDAM admins can configure the global settings that determine the assets available in your organization’s content browsers, as well as other content-browser functionality. Then, you can customize each content browser to fit its specific use case.
Example: Configure the Content Browser SDK to work for multiple integrations
Let’s say your organization uses the content browser in two custom integrations: the video-hosting platform Wistia and the CMS Sanity.io.
Here are your organization’s global requirements:
The content browser can only display assets with the “Public” Visibility Class to ensure users only use approved assets.
Here are the requirements for the Wistia integration:
Users can only browse videos.
Users can see the tags and file size of each video.
Here are the requirements for the Sanity.io integration:
Users can find images, videos, PDFs, and PPTX files.
Users cannot find audio files.
Based on these requirements, an OrangeDAM administrator can configure the following global settings:
Users can only see assets with the “Public” Visibility Class.
Users can only see assets that belong to the “Images,” “Videos,” and “Others” Asset Types. The “Others” Asset Type gives users access to PDF and PPTX files.
Then, you can configure the Wistia content browser to:
Show only “Video” assets.
Show tags and file size for each asset.
Content browser for Wistia - Shows only Videos; includes tags and file size
The Sanity.io content browser uses the global settings.
Content browser for Sanity.io - Includes Videos, Images, and Others
Configure the global content browser settings in OrangeDAM
These settings determine how the content browser works, including the available Asset Types and Visibility Classes, in all instances of the content browser used by your organization.
ℹ️
Note
To configure these settings, submit a support request and reference the ID: 2P7YOH54ET5O.
Global settings that apply to all content browsers
Apply transformations. Activate transformations in OrangeDAM to allow users to apply transformations to assets in all content browsers. Currently, we support image transformations.
Limit asset availability based on visibility class. For example, Orange Logic can configure the content browser to display only images with the “Public” Visibility Class.
Configure the returned metadata. Determine which metadata is returned with the metadata sub-field of the attribute OnAssetSelected.
ℹ️
Note
You can use another setting to configure additional metadata for each of your organization’s content browsers.
Collections (V2; Beta) browser side panel behavior. The browser side panel can display a collections section. You can choose the Collections subtypes available in this section.
Global settings to configure individual content browser options
These settings limit what is available for each instance of the content browser. Then, you can customize each content browser within these limits.
Determine the Asset Types content browsers can use. Restrict the Asset Types available in your organization’s content browsers. By default, the content browser all Asset Types (Images, Videos, Audio, and Others) are available.
Limit assets with available representative image. Choose the Asset Subtypes that can show a representative image as their preview and allow users to download the representative image.
Customize individual content browsers
In addition to global settings, you can configure each instance of the content browser to work for a specific use case.
⚠️
Caution
Do not use these configurations to restrict asset availability.
Some of these settings limit asset availability in the Content Browser SDK interface. For example, every Asset Type might be available globally, but you can configure a specific content browser to only show Images.
However, these configurations are only applied to the user interface. An authorized user might still be able to access assets that do not appear in the content browser via through a URL, third-party platform, or API.
Apply configurations
Open the content browser with the following function:
window.OrangeDAMContentBrowser.open(
// add configurations here
);
Then, pass configurations to the content browser and control its behavior by adjusting these attributes:
The callback function when the content browser is closed. Can be used to warn users before closing the browser.
no
null
() => { console.log(“The Browser is about to close”) }
publicApplicationName
The public name of the DAM. Appears as “For [pluginName]” below the line that begins with “Welcome.”
no
null
OrangeDAM
pluginName
The name of the browser plugin. Appears on the log in screen after the text “Welcome to the.”
no
OrangeDAM Content Browser
Orange Logic Content Browser
containerId
The ID of the container that the plugin attaches to. If undefined, the plugin appears as a popup.
no
null
containerId: "react-app-root"
baseUrl
If specified, the base URL pre-filled on the log in screen. Otherwise, the URL on the login page will be empty.
no
null
https://mangovations.orangelogic.com
ctaText
The text on the button to insert an asset into the platform or obtain a link.
no
Insert
Open in new tab
availableDocTypes
The Asset Types available in the content browser. Notes:
These Asset Types are only available in the content browser if they are also available in the global settings
Defaults to the global settings when null.
This field is case sensitive.
no
null
[ "Images", "Videos", ]
Limits the Asset Types available in the browser to “Image” and “Video.”
availableRepresentativeSubtypes
The Asset Types or Subtypes with image representatives users can access. By default, users can only access Representatives of assets that belong to the “Other” subtype. Notes:
Image representatives are only available for these Asset Types and Subtypes if they are also available in the global settings
Defaults to the global settings when null.
This field is case sensitive.
no
null
["Other", "Supporting file"]
Asset Representatives are displayed for both “Other” and “Supporting file” asset subtypes.
displayInfo
Specifies whether metadata appears in the asset preview.
These fields are available:
You can configure the payload associated with each selected asset to include extra Orange Logic metadata fields via this attribute.
Use Orange Logic API names separated by commas.
Whether last location mode is activated. True: The content browser opens to the most recently used folder and retains the selected user interface options. False: The content browser opens to the Library folder and the user interface options reset.
no
true
persistMode
Whether persist mode is activated. True: The content browser remains open after an asset is selected. False: The content browser closes after an asset is selected.
no
true
allowTracking
Whether users can add UTM tracking parameters to generated links. True: Users can add tracking parameters. False: Users can’t add tracking parameters.
no
true
showCollections
Whether Collections (V2; Beta) appear in the content browser as a subsection in the browser side panel. True: Collections appear. False: Collections do not appear.
The DAM’s login page opens in a new tab. Log in with your credentials.
The DAM opens to the authorization page. Impersonate the user.
Impersonate another user
Click Authorize.
Authorize the content browser
To stop impersonating, log out of the DAM in the content browser.
Use the content browser with APIs
By default, the Content Browser SDK does not return any metadata fields. However, you can configure the content browser to return the Orange Logic SystemID or RecordID of selected assets. Then, you can use these identifiers with Orange Logic’s APIs and tools to do even more with those assets. For example, you could update the selected asset’s metadata within Orange Logic to reflect its use in the external application.
Content Browser SDK examples
The content browser is extremely flexible. Use these examples as inspiration.
Orange Logic’s demo page
You can try the Content Browser SDK for yourself. Go to our demo page.
Click “Load config” to load the browser.
Log in to your organization’s Orange Logic environment.
Adjust the instance-specific configurations in the “Config” box to see how the browser interface changes.
Content Browser SDK demo
For example, by default file size and tags do not appear on the previews of assets in the content browser.
However, you can update the displayInfo attribute from its default:
So that file size and tags appear on the preview of each asset:
Content browser demo configured to include file size and tags in each asset’s preview.
React
Sanity.io is a CMS that stores and pushes content to digital platforms. Orange Logic’s Sanity.io integration retrieves images from Orange Logic and adds them to Sanity. It’s a great example of using Orange Logic’s content browser in an integration.
