Introduction

Bynder is a digital asset management platform (DAM) that allows you to store, manage and organize your digital media files. Marketing and development teams are the primary users of Bynder.

Bloomreach Content integrates with Bynder, which links your Bynder Universal Compact View with our Experience Manager in the CKEditor. After successful integration, you can upload and publish media asset files directly from your Bynder account into your Bloomreach Content-powered website.

📘

Note:

Currently Bloomreach Content supports Bynder Universal Compact View library version 3.2.3

Requirements

Bynder

Please make sure to have an account with Bynder. Once you login into your account, follow the below steps to get your Client ID and Client Secret details:

  • Click the "settings gear" icon to launch the dropdown menu.
  • In the dropdown menu, hover over "Advanced Settings."
  • Click "Portal settings" in the "Advanced Settings" menu.
  • In the "Portal Settings" page, Click "OAuth Apps" on the left navigation bar.
  • If you've already created an application, use that application to obtain a Client ID and Client Secret, otherwise follow the below steps:
    • Click the "Add new app" button.
    • Enter your application name.
    • Choose Grant Type as "Client Credentials" in the select box.
    • Choose the assigned user.
    • Set the desired scope for that application.
    • Check the "meta.assetbank:read" property.
    • Click "Register Application" to add an application.
    • Once an application is generated, copy and paste the Client secret to a secret location. (if you lost the secret, you need to regenerate it and update the application)
1608

Bloomreach Content

Please make sure that Bynder is available as part of Bloomreach Integrations Library, as depicted below.

1780

How to Install the Bynder Integration?

From your Bloomreach Content instance:

  • Open the Bloomreach Integrations Library page.
  • As part of the Available integrations section at the bottom, you should be able to see Bynder.
  • Click on the Add button.

The Bynder integration page will show: please add the fields based on the table below.

Name (required)Name of the Bynder integration.
Integration ID (required)Unique identifier for the Bynder integration. This ID is defined by the customer and used for internal purposes only.
DescriptionDescription of the Bynder integration.
Bynder domain (required)URL that has been used to login into the Bynder Account.
Mode (required)Set the mode to allow single or multiple digital media asset selections.
Type (required)Choose the type of digital media asset in the dropdown.
Client ID (required)Bynder application Client ID.
Client Secret (required)Bynder Application Client Secret.
HeightThe initial height of the iframe - derived from the Field extension field - in pixels. When omitted, 150 is the default value.
CSP PropertiesThe Content Security Policies value returned by Content SaaS. it is needed while previewing digital media assets as part of the Content SaaS: please be careful with this property. Since the Content application will load any resource specified as part of the URL.
  • Optional: Use the “Test connection” button to verify the Bynder application fields. If Bynder input fields (Bynder domain, Client ID, and Client Secret) are valid, it will show the success toast message or throw a failure message.
  • Finally, click the “Add” button to add Bynder integration into Content.

Please find more information about Bynder and its properties in Bynder documentation and Bynder Universal Compact view.

Field extension field

An Field extension field uses the document field extension point to display a custom field type. When a Bynder integration is available (e.g., Bynder Marketing), document editors can add a Field extension field to the desired content type and link it to the integration using the Integration drop-down.

Once the Field extension field is correctly configured, editors can include Bynder digital media assets directly within the document using the Select asset(s) button rendered in the editing template .

If you’ve configured Bynder with the proper credentials, you should see the Bynder Compact View dialog.

CKEditor Field

A CKEditor field is used to store fully featured rich text content, stored as HTML markup within the document. To have the Bynder integration as part of the CKEditor field, manually enable the CKEditor Bynder plugin needs as part of the ckEditorAppendedJson field, like the following:

More specifically, you can use the snippet below

{ "extraPlugins": "iframedialog,bynderassetpicker", "pluginConfigs": { "bynderassetpicker": { "integrationId": "<INSERT_YOUR_INTEGRATITON_ID>" } } }

If everything goes well, you should be able to see the Bynder icon as part of the CKEditor!