Frontify App Installation Guide

Frontify is an asset management platform many brands use to organize all digital assets in one place. You can upload, store, and manage images, videos, icons, logos, and documents for a collaborative workflow. With asset personalization, you can govern and set the accessibility of certain assets within your team.

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

Prerequisites

• Frontify 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 Frontify within your stack.

Steps for Execution

1. Fetch Credentials from Frontify
2. Install and Configure Frontify in Contentstack Marketplace
3. Use Frontify within your Stack

1. Fetch Credentials from Frontify

   You must fetch the credentials from the Frontify dashboard to configure the app. Follow the steps to do so:

   1. Go to Frontify and create a new account.
   2. To fetch the Domain URL, click the profile icon on the bottom left corner, then click Domain Management. You will find the list of domain URLs under Domain. Use the accessible domain.
      

      Note: While using the Domain URL, precede it with https://. For example, https://frontify.example.com

      

      Additional Resource: Refer to the Domain Path documentation to know more about domain management for Frontify.

   3. To get the Client ID, you need to create an application. To do so, click the profile icon at the bottom left corner.
   4. Under user profile, click Applications.
      
   5. Click Add Application.
      
   6. Enter details such as Name, Description, enable Support Authenticator, disable Confidential Option, and add the scopes as basic:read and finder:read.
      
   7. After filling up the details, click the Create App button to create the app.
      
   8. Once done, click the app to view the Client ID.
      

      Additional Resource: For more information, refer to Learn how to generate your own OAuth 2 Client to use the Finder.

2. Install and Configure Frontify 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 will be able to see all the available apps. Hover over the Frontify app and click Install App.
   
   
   5. In the popup window, select the stack where you want to install the Frontify app and click the Install button.
      
      
   6. On the Configuration page, enter the following details:
      1. Enter the Frontify Domain URL and Frontify Client ID retrieved from Frontify in step 1.
      2. Select a Mode.
         • With Multi Select, you can select multiple assets at a time from your media gallery.
         • With Single Select, you can select a single asset at a time from your media gallery.
   
   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 Frontify application.

3. Use Frontify within your Stack

   1. Go to your stack, and click the Content Models icon in the left navigation panel.
   2. Click the + New Content Type button to create a new content type.
   3. Add relevant details and click the Save and proceed button.
      

   There are two ways to use the Frontify application in your entry.

   1. Custom Field
   2. JSON Rich Text Editor field

   Steps to use the Frontify application using a Custom field:

   1. Click the Insert a field link represented by a + sign to add a custom field.
   2. Under Select Extension/App, select Frontify, and then click Proceed.
      
      

      Add Configuration to Frontify’s Custom Field
      To customize the configuration for a specific custom field added in a content type, follow the steps given below:

      1. Click the Properties icon of the Custom field.
      2. Go to Advanced.
      3. Under Config Parameter, add the configuration for that custom field (in object format). For example:
         {
         "mode": "MultiSelect",
         "clientId": "",
         "domain_url": ""
         }
         

         Config parameters for Frontify Marketplace App are mode, clientId, and domain_url.
         

         

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

         1. MultiSelect
         2. SingleSelect

         Note: You can override the default app configuration for a particular custom field of content type by adding the required configuration in the Config Parameter under Properties of custom field. The key:value passed in the configuration object overrides the default app configuration.
         If any configuration value is not added or the value is empty in the configuration object entered in the custom field of the content type, then the Contentstack Frontify app will use the default app configuration from the app’s configuration specified during step 2.

   3. To use the Frontify app, create an entry for the above content type, and you will see the Frontify custom field on your entry page as shown below:
      
      
   4. Click + Choose Asset(s) to select assets or files from your Frontify account and add them to your entry.
      
      1. For Single Select mode, you can select one asset and click Choose to add to your entry.
         
         
      2. For Multi Select mode, you can select multiple assets and click Choose to add to your entry.
         
         

      Note: While selecting the images from the media gallery, an authentication screen will appear for the first-time, asking the user to authenticate the application by entering the username and password. After authentication, the user needs to authorize the application in order to fetch the assets from their Frontify account.

   5. The assets you select are added within your entry.
      
      
   6. Hover over the image to view the options to remove or preview the image.
      1. Click the Preview icon to view the image.
      2. Click the Remove icon to delete the selected image.
      
   7. For documents or files, hover over the document to view the remove option.
      
      1. Click the Remove icon to delete the document/media asset.
         
   8. After adding the asset(s), Save and Publish your entry.

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

   1. 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.
      
   2. To add the Frontify plugin in JSON RTE, click the Properties icon of JSON RTE, and under Select JSON RTE Plugin(s), choose the Frontify app, and then click the Add Plugin(s) button.
      
      
   3. After adding the plugin, click Save or Save and Close to save your changes.
      
   4. To use the Frontify app as a JSON RTE plugin, create an entry for this content type, and you will see the Frontify app icon in the JSON RTE field on your entry page, as shown below:
      
      
   5. Click the Frontify app icon to open the Media Library.
   6. Choose one or more products from the Media Library and add them to your entry.
      1. For Single Select mode, you can select one asset and click Choose to add to your entry.
         
         
      2. For Multi Select mode, you can select multiple assets and click Choose to add to your entry.
         
         
   7. The selected asset(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. Hover over the image to perform the view, edit and delete operations.
      1. Click the View icon to view the image(s).
      2. Click the Edit icon to edit the asset in the Frontify app.
      3. Click the Delete icon to delete the selected image.
      4. To edit the image, click the Edit icon, make the necessary changes and click Save.
      
   10. After adding the asset(s), Save and Publish your entry.

Note: In order to use the Frontify application, you need to have the below browser settings:
- Pop-ups should be enabled.
- Third-party cookies should be enabled.