Bynder App Installation Guide

Bynder is a cloud-based platform that benefits marketing teams to create, find, and use digital content. Marketers use this platform to collaborate throughout the organization and produce and review new marketing content with great ease.

Contentstack Marketplace lets you install the Bynder application and use it within your stack to fetch and display assets from Bynder within your entries.

Prerequisites

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

This step-by-step guide explains how to install and configure Bynder within your stack.

Steps for Execution

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

1. Get your Bynder Organization URL

   To configure the app, you 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 Bynder in Contentstack Marketplace

   To install the application in Contentstack, follow the steps below:

   1. Log in to your Contentstack account.
   2. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace. 
      
      
   3. Click Apps from the left panel.
   4. Within the Marketplace, you will be able to see all the available apps. Hover over the Bynder app and click Install App.
      
   5. In the popup window, select the stack where you want to install the Bynder app and click the Install button.
      
   6. On the Configuration page, provide the following:
      1. Enter the Bynder Organization URL you retrieved from Bynder in Step 1.
      2. 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. 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. Only a single file can be selected in this mode.

         Note: By default, Multi Select will be the mode selected.
         

         
   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 the Save button.
   9. Click Open Stack to start using the Bynder application.

3. Use Bynder within your Stack

   To use the Bynder application in an entry of your stack, you can either use a Custom field or a JSON RTE field.

   Follow the steps given below to use the Bynder application using a Custom field:

   1. Go to your stack and click the Content Models icon on the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details and click Save and proceed.
      
   3. 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.
   4. Under Select Extension/App, select Bynder and then click Proceed.
      

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

   6. You can customize the configuration to override the app's configuration for a specific custom field 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.
      2. Go to Advanced.
      3. 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"
   }
   

   7. Config parameters for Bynder Marketplace App are url, language, mode.

      

   8. Following are the possible values you can use for language in configuration:

      1. en_US
      2. nl_NL
      3. de_DE
      4. fr_FR
      5. es_ES

   9. Following are the possible values you can use for mode in configuration:

      1. MultiSelect
      2. SingleSelect
      3. 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.

   10. After adding the app, click Save or Save and Close to save your changes.
       
   11. To use the Bynder app, create an entry for the above content type, and you will see the Bynder custom field in your entry page as shown below:
       
   12. Click + Choose Asset(s), to select assets from your Bynder account and add them to your entry.
       1. Single Select File mode
          
       2. Multi Select mode
          

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

       The assets you select are referenced within your entry.
       

       

   13. To view, open in Bynder or delete the image, hover over the image to get the options available, then perform the following:
       1. Click the Preview icon to view the image.
       2. Click the Open in Bynder icon to open the image in the Bynder app.
       3. Click the Remove icon to delete the selected image. 
          

   Follow the steps given below to use the Bynder application using JSON RTE field:

   1. Go to your stack and click the Content Models icon on the left navigation panel, and click the + New Content Type button.
   2. Create a content type by adding relevant details as displayed below:
      
   3. In the Content Type Builder page, add JSON Rich Text Editor in your content type by clicking on the Insert a field link represented by a + sign.
   4. To add the Bynder plugin in JSON RTE, click the Properties icon of JSON RTE and under Select JSON RTE Plugin(s), choose Bynder app and then click Add Plugin(s):
      
   5. After adding the plugin, click Save or Save and Close to save your changes. 
      
      To use the Bynder app as JSON RTE plugin, create an entry for this content type, and you will see the Bynder app icon in JSON RTE field on your entry page as shown below:
      
   6. Click the Bynder app icon to open the Media Library.
   7. Choose one or more products from the Media Library and click Add asset(s).
      1. Single Select File mode
         
      2. Multi Select mode 
         

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

      The selected product(s) is displayed in the JSON RTE editor:
      

      

   8. To resize the image, drag the corner of the image and adjust the size as per your need.
   9. To view, edit or delete the image, hover over the image to get the options available, then perform the following:
      1. Click the View icon to view the image.
      2. Click the Edit icon to open the image in the Bynder app.
      3. Click the Delete icon to delete the selected image.
         
   10. To edit the image, click the Edit icon, make the necessary changes and click Save.

   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.