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.
    • 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)
21082108

Bloomreach Content

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

22282228

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.

Description

Description 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.

Height

The initial height of the iframe - derived from the OpenUI String field - in pixels. When omitted, 150 is the default value.

CSP Properties

The 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.

OpenUI String field

An Open UI String 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 an Open UI String field to the desired document type and link it to the integration using the UI extension drop-down button below.

478478

Once the Open UI String field is correctly configured, editors can include Bynder digital media assets directly within the document. Please click the “Select Asset(s)” button in the OpenUIString section.

12021202

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

16291629

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:

896896

More specifically, you can use the snippet below

{ "extraPlugins": "iframedialog,bynderimagepicker", "pluginConfigs": { "bynderimagepicker": { "integrationId": "<INSERT_YOUR_INTEGRATITON_ID" } } }

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


Did this page help you?