Bynder App Installation Guide

Bynder is a cloud-based Digital Asset Management (DAM) platform that enables organizations to manage, share, and distribute their digital content from a centralized location.

With its user-friendly interface, the marketing team can create, find, and utilize digital assets such as images, videos, and documents efficiently.

By installing the Bynder app from the Contentstack Marketplace, you can use it within your stack to fetch and display digital assets from Bynder accounts within your entries.

Prerequisites

• Bynder account
• Contentstack account
• Access to the Contentstack Organization/Stack as the Owner/Admin

Lets follow this step-by-step guide to install and configure the Bynder app within your stack.

Steps for Execution

1. Get your Bynder Organization URL
2. Install and Configure the Bynder App in Contentstack Marketplace
3. Use the Bynder App within your Stack

1. Get your Bynder Organization URL

   To configure the Bynder app, you first need to create an account in Bynder. To do that, follow the steps given below:

   1. Go to https://www.bynder.com/en/ and create a new account. It is recommended to use the partnership account by purchasing the license. The free trial account will not work as expected.
   2. To get your Bynder organization URL, please refer to the Get a Personalized URL for your Bynder Portal document.

2. Install and Configure the Bynder App in Contentstack Marketplace

   To install the app in Contentstack, log in to your Contentstack account and follow the steps below:

   1. From the left-hand side primary navigation, click the Marketplace icon.
   2. Click Apps from the left panel.
   3. Within the Marketplace, you can see all the available apps. Hover over the Bynder app and click Install.
   4. In the pop-up window, select the stack where you want to install the Bynder app, accept the Terms of Service, and click the Install button.
   5. On the Configuration page, provide the following:
      1. Bynder Organization URL: Enter the Bynder Organization URL you retrieved from Bynder in Step 1.
      2. Language: Select a language from the Language drop-down list.
         Note:

         1. By default, the Bynder app opens in the English language.
         2. The language selected here is not related to the locale in Bynder.
      3. Mode: Select a Mode.
         1. If you want to select multiple assets in your entry, select Multi Select.
         2. If you want to enable the Dynamic Asset Transformations (DAT) feature, select Single Select File. In this case, only a single file can be selected.

         Note: Multi Select is the default selected option.

      4. Choose the Bynder Keys to Save in Entry: Choose how to save the data fetched from the Bynder account in Contentstack entries.

         If you select the All Fields option, you can select only a limited number of assets in the entry. For Custom Fields, you can search and add specific Bynder Keys you want to save in entries.

         

         If you select Custom Fields then the Bynder Keys drop-down appears. By default, extensions, id, name, previewUrls, type, files.webImage, url, and additionalInfo options are already selected inside the dropdown. If you want to create a new key, click the + New Key Field option.

         

         In the Add Bynder Key Path modal, enter the Bynder Key Path and click the Create or Create and Apply button to create a new key.

         
   6. Click Save.
   7. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.

      Additional Resource: For more information on UI locations, please refer to the Installed Apps guide.

   8. Click Open Stack to start using the Bynder application.

3. Use the Bynder App within your Stack

   To use the Bynder app within an entry of your stack, follow the steps given below:

   1. Go to your stack, click the Content Models icon from the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details as displayed below:

   There are two ways to use the Bynder app in your entry:

   1. Custom Field
   2. JSON Rich Text Editor Field

   Steps to Use the Bynder App as a Custom field

   1. In the Content Type Builder page, add a Custom field in your content type by clicking the Insert a field link represented by a + sign.
   2. Under Select Extension or App, select Bynder and then click Proceed.

      This adds Bynder in the custom field.

      

      Add Configuration to Bynder's Custom Field (This is optional)

      You can customize the configuration to override the app's configuration for specific custom fields added in a content type. Follow the steps given below to add configuration to a bynder's custom field:

      1. Click the Properties icon of the Custom field in your content type and go to Advanced.
      2. Under Config Parameter, add the configuration for that custom field (in object format).

      For example:

      {
      "url": "Your_Bynder_Org_url",
      "language": "en_US",     
      "mode": "MultiSelect"
      }
      

      Config parameters for the Bynder Marketplace app are url, language, and mode.

      

      The following are the possible values you can use for language in configuration:

      • en_US
      • nl_NL
      • de_DE
      • fr_FR
      • es_ES

      The following are the possible values you can use for mode in configuration:

      • MultiSelect
      • SingleSelect
      • SingleSelectFile

      Note: If any configuration value is not added or is invalid in the configuration object entered in the custom field of content type, then the Contentstack Bynder app will use the corresponding values from the app’s configuration.

   3. After adding the app in a custom field, click Save or Save and Close to save your changes.
   4. Now to use the Bynder app, create an entry in this newly created content type. In the left navigation panel, navigate to the Entries page, click + New Entry to create a new entry for the above content type, and then click Proceed.

      You can see the Bynder app’s custom fields on your entry page as shown below:

      
   5. Click + Choose Asset(s) to select assets from your Bynder account and add them to your entry.

      Note: If you are using the Bynder app for the first time, the app will redirect you to connect the app with the portal. Click the Connect button to connect and proceed towards the authentication screen.

      

      Provide the username and password and login to the Bynder dashboard.

   6. Now, you can choose assets from the Bynder selector page:
      1. Single Select File mode
      2. Multi Select mode
      Note:

      1. In Single Select File mode, Bynder's DAT feature is enabled. This feature allows you to choose a derivative of the selected asset.
      2. Bynder DAT feature is not available for Multi Select mode.

      The assets you select get added to your entry in the thumbnail view.

      

      To view the assets in the list view, select the List view option from the dropdown.

      

      The assets you select get added to your entry in the list view.

      
   7. To reorder, preview, open in Bynder, or remove the image, hover over the image to get the options available, then perform the following:
      1. Click the Reorder icon to drag and reorder the image.
      2. Click the Preview icon to view the image.
      3. Click the Open in Bynder icon to open the image in the Bynder app.
      4. Click the Remove icon to delete the selected image.

      Thumbnail View

      

      List View

      
   8. After adding the asset(s), Save and Publish your entry.

   Steps to Use the Bynder App in a JSON Rich Text Editor field:

   1. In the Content Type Builder page, add JSON Rich Text Editor in your content type by clicking the Insert a field link represented by a + sign.
   2. Under Select Plugin, select Bynder, and then click Add Plugin(s).

      This adds Bynder in the JSON Rich Text Editor.

      
   3. After adding the plugin, click Save or Save and Close to save your changes.
   4. To use the Bynder app, create an entry for this content type by clicking Entries from the left navigation panel. Click + New Entry to create a new entry for the above content type, and then click Proceed.

      You can see the Bynder icon in the JSON Rich Text Editor field on your entry page as shown below:

      
   5. Click the Bynder app icon.

      Note: If you are using the Bynder app for the first time, the app will redirect you to connect the app with the portal. Click the Connect button to connect and proceed towards the authentication screen.

      

      Provide the username and password and login to the Bynder dashboard.

   6. Now, you can choose assets from the Bynder selector page:
      1. Single Select File mode
      2. Multi Select mode
      Note:

      1. In Single Select File mode, Bynder's DAT feature is enabled. This feature allows you to choose a derivative of the selected asset.
      2. Bynder DAT feature is not available for Multi Select mode.

      The assets you select get added to your entry.

      
   7. To resize the image, drag the corner of the image and adjust the size as required. Hover over the image to view the options to preview, open in Bynder app, edit properties, and remove the asset.

      Additional Resource: You can use alignment and inline asset features to edit the asset placement within the JSON Rich Text Editor field.

   8. After adding the asset(s), Save and Publish your entry.

      Note: If you selected the Single Select File mode to add assets to your entry, you can view the information of the selected DAT derivative of the asset in their JSON object, in an additional parameter titled additionalInfo.