Brightcove App Installation Guide

The Brightcove platform is a cloud-based solution for online video streaming, which facilitates the hosting, sharing, and streaming of video content by organizations. Marketers and creatives can utilize the platform to efficiently organize, control, create, distribute, and measure all their video assets, with the added benefits of scalability, reliability, and security.

Contentstack Marketplace lets you install the Brightcove application and use it within your stack to fetch and display videos from the Brightcove account within your entries.

Prerequisites

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

Steps for Execution

1. Retrieve Account ID, Client ID, and Client Secret for the Brightcove account
2. Install and Configure Brightcove in Contentstack Marketplace
3. Use Brightcove within your Stack Entry

1. Retrieve Account ID, Client ID, and Client Secret for the Brightcove account

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

   1. Log in to the Brightcove account using your Brightcove account credentials.
   2. Click the Admin settings icon in the bottom-left side of the panel to get the account information.
      
      
   3. You can get the Account ID from the Account Information section.
      
   4. Go to the API Authentication section and click the + Add application button.
      
   5. Enter the Name and Description, and then select the required accounts from the Select Accounts for Authorization section.
      
   6. Scroll down, in the Exposed Brightcove APIs > CMS options list, mark the Video Read checkbox, and then click Save.
      
      
   7. Copy the Client ID and Client Secret to your clipboard, and then click Okay, I copied it to close the dialog box.
      

2. Install and Configure Brightcove 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 Brightcove app and click Install App.
      
   5. In the popup window, select the stack where you want to install the Brightcove app and click the Install button.
      
      
   6. On the Configuration screen, enter the following details:
      1. Brightcove Credentials: Enter the Brightcove Account ID, Brightcove Client ID, and Brightcove Client Secret retrieved from your Brightcove Account in step 1.
      2. Save in Entry: Choose how to save the data fetched from the Brightcove account in Contentstack entries.
         1. If you select the All Fields option, you can select only a limited number of products in the entry.
         2. For Custom Fields, you can search and add specific Brightcove Keys you want to save in entries. By default, the id and name of the products are 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.
   8. If the webhook is enabled for your app, you can view the webhook logs under the Webhook tab.

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

   9. Click the Save button.
   10. Click Open Stack to start using the Brightcove application.

3. Use Brightcove within your Stack Entry

   To use the Brightcove 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 Brightcove application in your entry:

   1. Custom Field
   2. JSON Rich Text Editor Field

   Steps to use the Brightcove 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 Brightcove, and click the Proceed button.
      
      Brightcove is added 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 Brightcove app, create an entry for this 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 will see the Brightcove custom field on your entry page as shown below:
      
      Click the + Choose Video(s) button.
   5. Select the video(s) from your Brightcove selector page and click the Add Videos(s) button to add them to your entry.
      
      

      Note: You can add multiple videos in one go.

      You can also search for videos in the Brightcove selector page.
      
      Hover over the video on the Brightcove selector page and you can see the View in Brightcove option to go directly to the Brightcove platform.
      
      The products you selected are referenced within your entry:
      
   6. Hover over the video to access these features:
      1. Click the Reorder icon to drag and reorder the video.
      2. Click the Open in Brightcove icon to open the video in the Brightcove platform.
      3. Click the Delete icon to delete the video.
      
   7. After adding the video(s), Save and Publish your entry.

   Steps to use the Brightcove 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 Brightcove, and then click Add Plugin(s).
      
      Brightcove is added in the JSON Rich Text Editor field.
      
      
   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 Brightcove app, create an entry for this 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 will see the Brightcove JSON Rich Text Editor field on your entry page as shown below:
      
      Click the Brightcove app button.
   5. Select the video(s) from your Brightcove selector page and click the Add Videos(s) button to add them to your entry.
      
      

      Note: You can add multiple videos in one go.

      You can also search for videos in the Brightcove selector page.
      
      Hover over the video on the Brightcove selector page and you can see the View in Brightcove option to go directly to the Brightcove platform.
      
      The products you selected are referenced within your entry:
      
   6. To resize the video, drag the corner and adjust the size as required. Hover over the video to access these features:
      1. Click the Preview icon to preview the video in the Brightcove platform.
      2. Click the Edit icon to edit the video.
      3. Click the Delete icon to delete the video.
      

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

   7. After adding the video(s), Save and Publish your entry.