Skip to content
Branch: master
Find file History
Type Name Latest commit message Commit time
Failed to load latest commit information.
Bynder.gif Added image to readme Apr 24, 2019 Update May 14, 2019
dialog.html Moved parsing of config string to dialog Jun 21, 2019
index.html Moved parsing of config string to dialog Jun 21, 2019
no-preview.jpeg Renamed folder Apr 24, 2019

BloomReach Bynder UI Extension

This UI Extension integrates BloomReach Experience with Bynder's digital asset management platform. It leverages Bynder's compact view component to browse media from Bynder and use these within BloomReach powered sites.

Bynder Integration The Bynder UI Extension in action

How does the UI Extension work?

From a BloomReach document, a picker dialog can be opened that loads Bynder's compact view. On first use, this dialog asks the user for a username and password to authenticate with Bynder. The dialog can then be used to browse and select media, for which references are stored in the BloomReach document. Sites can then use these references to add the selected media to pages.


  • A BloomReach Experience Manager (brXM) project running on version 13.2.0 or above.
  • An account with Bynder with access to a brand portal (

Use the Bynder UI Extension in your brXM project

Step 1: Configure the extension in brXM

Open the console of your brXM instance and browse to the node /hippo:configuration/hippo:frontend/cms/ui-extensions. Then import the following YAML snippet:

  jcr:primaryType: frontend:uiExtension
  frontend:config: '{"dataMode":"single", "dataAssetTypes":"image","dataDefaultEnvironment":""}'
  frontend:displayName: Bynder
  frontend:extensionPoint: document.field

The config property holds a JSON object that (partly) controls the behavior of the Bynder Compact View module. The value of the 'dataDefaultEnvironment' should always be changed to match your Bynder environment, the other attributes can be changed according to the Bynder Compact View developer documentation.

Step 2: Add a Bynder field to your document type(s)

Using the document type editor, add an "Open UI String" field to the relevant document type(s). Change the 'path' and 'Default Caption' to values that make sense for your project and set 'ui.extension' to 'bynder' (this needs to match the name of the node created in the previous step.

If your project uses dynamic content beans (default in 13.2.0), the Bynder field will be available for use in frontend templates immediately.

If your project does not use dynamic content beans, you will need to update the content bean(s) of the changed document type(s). When using Essentials, this can be done using the Bean Writer tool.

You can now start using the plugin in your documents.

Step 3: Render the Bynder assets in your frontend templates

You can now start using the Bynder references that are stored in your documents to render the assets in your frontend templates.


You can’t perform that action at this time.