Brandfolder App Installation Guide

Brandfolder is a cloud-based and customizable digital asset management platform many brands use to organize all digital assets in one place. Marketers and creatives use this platform to readily organize, control, create, distribute, and measure all their digital assets.

Contentstack Marketplace lets you install the Brandfolder application and use it within your stack to fetch and display images, logos, graphics, illustrations, and videos from the Brandfolder account within your entries.

Prerequisites

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

Let's follow this step-by-step guide to install and configure Brandfolder within your stack.

Steps for Execution

1. Retrieve API key for Brandfolder account
2. Install and Configure Brandfolder in Contentstack Marketplace
3. Use Brandfolder within your Stack Entry

1. Retrieve API key for Brandfolder account

   To get your configuration details for Brandfolder, follow the steps given below:

   1. Log in to the Brandfolder account using your Brandfolder account credentials.
      

      Note: Log in to the Brandfolder account as an Admin, and then create a Guest account to access the read-only API Key to view and download assets.

   2. Now, log in to the Brandfolder guest account, go to My Profile, click Integrations in the left panel, and copy the API Key.
      
      
      

2. Install and Configure Brandfolder in Contentstack Marketplace

   Follow the steps to install the application in Contentstack.

   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 can see all the available apps. Hover over the Brandfolder app and click Install App.
      
   5. In the popup window, select the stack where you want to install the Brandfolder app and click the Install button.
      
      
   6. On the Configuration screen, enter the following details:
      1. Brandfolder API Key: Enter the Brandfolder API Key retrieved from your Brandfolder account in Step 1.
      2. Legacy Settings: Legacy Settings allows you to use the Brandfolder Extension. To access the Enable Extension Support option, click the toggle button to enable the extension support. By enabling this option, you can get the asset JSON data similar to that of the Brandfolder extension.
      
   7. Click the Save button.
   8. 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.

   9. Click Open Stack to start using the Brandfolder application.

3. Use Brandfolder within your Stack Entry

   To use the Brandfolder application within an entry of your stack, follow the steps given below:

   1. Go to your stack, click the Content Models icon in 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 Brandfolder application in your entry:

   1. Custom Field
   2. JSON Rich Text Editor Field

   Steps to use the Brandfolder application using 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/App, select Brandfolder and click the Proceed button.
      
      This adds Brandfolder in the custom field.
      
   3. After adding the app in a custom field, click Save or Save and Close to save your changes.
   4. To use the Brandfolder app, create an entry for this content type, and you will see this Brandfolder custom field on your entry page as shown below:
      
   5. Click + Choose Asset(s) button.
      
   6. Choose the Collection to select the asset from your Brandfolder account to add them to your entry.
      You can add the Brandfolder asset(s) in two ways:
      1. Hover over the image, click the three ellipses icon, and then click Place to add the asset to your custom field from the Brandfolder selector page.
      2. Hover over the image and click View details.

         Go to Placement options and click Place to add the asset to your custom field from the Brandfolder selector page.

         

         You can edit the File Type, Width, and Height of the image before placing it.

      The assets you select are added to your entry.

      

      Note: You can select only one asset at a time to add to your entry.

   7. Hover over the image to view the options to reorder, preview and delete the asset.
      
   8. After adding the asset(s), Save and Publish your entry.
      

   Steps to use the Brandfolder application using a JSON Rich Text Editor field

   1. In the Content Type Builder page, add a JSON Rich Text Editor field in your content type by clicking the Insert a field link represented by a + sign.
   2. Under Select JSON RTE Plugin(s), select Brandfolder, and then click Add Plugin(s).
      
      This adds Brandfolder in the JSON Rich Text Editor.
      
   3. After adding the app in a JSON Rich Text Editor field, click Save or Save and Close to save your changes.
   4. To use the Brandfolder app, create an entry for this content type, and you will see the Brandfolder button in the JSON Rich Text Editor field on your entry page, as shown below:
      
      
   5. Click the Brandfolder app button.
      
   6. Choose the Collection to select the asset from your Brandfolder account to add them to your entry.
      
      You can add the Brandfolder asset(s) in two ways:
      1. Hover over the image, click the three ellipses icon, and then click Place to add the asset to your JSON Rich Text Editor field from the Brandfolder selector page.
      2. Hover over the image and click View details.

         Go to Placement options and click Place to add the asset to your JSON Rich Text Editor field from the Brandfolder selector page.

         

         You can edit the File Type, Width, and Height of the image before placing it.

      The assets you select are added to your entry.

      

      Note: You can select only one asset at a time to add 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, edit and delete 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.