support Contact Support | system status System Status

Brightcove Custom Cartridge for Salesforce Commerce Cloud: User Guide

This topic provides a users guide for the Brightcove Custom Cartridge for Salesforce Commerce Cloud.

Introduction

This document provides step-by-step instructions for using Brightcove Salesforce Commerce Cloud Custom Cartridge to upload video files to the Brightcove Cloud/server and publish these files on product details page, as needed.

Terms

SFCC Terms
Term Description
SFCC Salesforce Commerce Cloud
Business Manager (BM) The primary admin tool used to configure SFCC platform and customer facing storefront

Instructions

The following sections describe details of instructions to add, assign, embed and bulk upload videos to the Brightcove cloud server using SFCC Business Manager.

Add a video to the Brightcove server

The Add Video Module provides the functionality to add videos to the Brightcove Server/Cloud using SFCC Business Manager. Here are the steps:

  1. Login to SFCC Business Manager with your valid credentials.
  2. Select Merchant Tools from the top-level BM menu and then navigate to the Brightcove section as shown below:
    Top-Level BM Menu
    Top-Level BM Menu
  3. Under the Brightcove section Select/Click Add Video:
    Add Video
    Add Video
  4. The Add Video Page will be displayed. Fill out the form details to upload the video to Brightcove Server:
    Add Video Page
    Add Video Page
  5. Make sure that appropriate information is entered in Name and Video fields (Mandatory fields).

    Note: You can hover mouse over the tag field (the orange icon), for details on usage of the tag field:

    Tags Field Info
    Tags Field Info
  6. Click on Select option as shown below, it will give you a pop-up to select the video from list of files:
    Select a Video
    Select a Video
    File Browser
    File Browser
  7. Likewise, you can select files for the Poster and the Thumbnail, but these fields are optional.
  8. Note that the Reference ID field is optional, but if you add one, it must be unique.
  9. Now click the Submit button to upload the desired video on to the Brightcove Server:
    Submit the Form
    Submit the Form
  10. A "Video file ingested Successfully" message is shown:
    Ingest Success Message
    Ingest Success Message
  11. Login to Brightcove Studio and go to the Media module to verify that the video is there:
    Brightcove Studio Media Module
    Brightcove Studio Media Module

Assign a video to a product in SFCC

The Assign Video Module provides the functionality to assign a video, that has already been uploaded to the Brightcove server, to a product, as in the product catalog, in SFCC. Here are the steps:

  1. Login to the SFCC Business Manager with your valid credentials.
  2. Select Merchant Tools from the top-level BM menu and then under the Brightcove section, select Assign Video:
    Brightcove - Assign Video
    Brightcove - Assign Video
  3. On the Assign Video page videos can be assigned or unassigned to any product in the catalog:
    Assign Video Page
    Assign Video Page
  4. To assign a video to a product, click the Assign Video link:
    Assign Video Link
    Assign Video Link
  5. Now you will see a display of all videos that have been added:
    Display of Videos
    Display of Videos
  6. Select the video you want, and then click Select Video:
    Select a Video
    Select a Video
  7. After selecting the video, it will be shown as assigned to the product:
    Video Assigned to Product
    Video Assigned to Product
  8. Next, go to the product you assigned the video to, to verify whether the Brightcove video attribute are being assigned to the correct product or not. Click on Merchant tools-> Products and Catalogs-> Product:
    Go to Products
    Go to Products
  9. Search for the product using the Product ID and click on it to open the product details:
    Product Details
    Product Details
  10. All the video attributes should be populated with details from the video:
    Video Attributes
    Video Attributes
  11. Similarly, a video file can be un-assigned or decoupled from a product in SFCC by clicking the Un-assign video link located under the video file. You can all change the assigned video by clicking the Change Video link:
    Remove or Change Video
    Remove or Change Video

Embed a video in a content slot

The Embed Video functionality enables an SFCC business user with embedding iFrame or Java script code for any video or media file residing on the Brightcove server, in any of the content slots, to render that video on any of the store pages. Here are the steps:

  1. Login to the SFCC Business Manager with your valid credentials.
  2. Select Merchant Tools from the top-level BM menu and then Brightcove > Embed Video:
    Brightcove > Embed Video
    Brightcove > Embed Video
  3. On the Embed Video page, search for videos using tags or the Video ID:
    Search for Videos
    Search for Videos
  4. When you have found the video you want to publish, select a player from the dropdown menu (or use the default player), and click the Get Code button to get the player publishing code:
    Select Player and Get Publishing Code
    Select Player and Get Publishing Code
  5. The Standard and Advanced publishing codes are displayed, with the option to make the player responsive (automatically resize according to the size of the browser window) or fixed. Brightcove recommends that in most cases, you should use the responsive Standard publishing code, unless you know the Advanced code is required for some reason.
  6. Copy the code you want and paste it into your page HTML code where needed.

PDP Rendering

The PDP Rendering Module provides the functionality to render video corresponding to the product on the PDP page. This requires mapping of a product with video id existing in the local SFCC catalog database. Here are the steps.

  1. Follow the steps in the Assign a video to a product in SFCC section to assign a video to the product, if you have not already done so.
  2. Add the following line in app/cartridge/templates/default/product/productDetails.isml:

    <isinclude template="slots/html/htmlBrightcoveVideo"></isinclude>

    The code should then look like this:

    isml Code with Brightcove Line
    isml Code with Brightcove Line
  3. Go to storefront and search for the assigned product. You should see the video included in the page:
    Product Page with Video
    Product Page with Video
  4. If you want to change the position of the above video template on PDP, you can do that by editing the file app/cartridge/templates/default/product/productDetails.isml and moving the line that includes the Brightcove Video (see above) to a different location.

Bulk Upload

The Bulk Upload Module provides the functionality to upload multiple files to the Brightcove server as once. Business users can use a csv file containing details of files to be uploaded (name of file, location of the file etc.) during this process. Here are the steps.

  1. Login to the SFCC Business Manager with your valid credentials.
  2. Login to the SFCC Business Manager with your valid credentials.
  3. Select Merchant Tools from the top-level BM menu and then Brightcove > Bulk Upload:
    Bulk Upload Menu Item
    Bulk Upload Menu Item
  4. Select CSV file (that contains files to be uploaded details) and process it by clicking the Submit button:
    Process CSV File
    Process CSV File
  5. If you want to check on the progress of adding the videos you can look for them in the Media Module in Brightcove Studio.

Details of the CSV file

The table below shows the headers you should have in the CSV file, along with a description of the contents for the items under each header/** * @deprecated description */

CSV Headers/Fields
Table Header Table Header
videoname A title for the video - REQUIRED
videoreferenceid A unique reference id for the video - optional
videotags A comma-delimited list of tags for the video - optional
videodescription A short description for the video - optional
videofile A public URL where the video resides - REQUIRED
videothumbnail A public URL where the thumbnail image file resides - optional
videoposter A public URL where the poster image file resides - optional

Sample

Sample CSV
Sample CSV

Page last updated on 02 Apr 2020