Integrate UGC into your website (bvapi.js)

Integrate UGC into your website (bvapi.js)
Caution
Use these instructions if your implementation uses the scout file bvapi.js. However, if your implementation uses the BV loader bv.js, refer to the BV loader integration documentation.

To display user-generated content (UGC) on your category or product display pages (PDPs), you must add Bazaarvoice code to your HTML pages.

Follow these step-by-step instructions to display the:

  • Primary rating summary
  • Ratings & Reviews
  • Questions & Answers

Step 1: Add JavaScript code (bvapi.js)

  1. Place the following JavaScript API code within the head element on every PDP page where you want to display Bazaarvoice content.

    Copy Code
    JavaScript
        <script type="text/javascript" 
            src="//default.ugc.bazaarvoice.com/bvstaging/static/1234-en_us/bvapi.js">
        </script>
        <script type="text/javascript">
            $BV.configure("global", {
                submissionContainerUrl: "http://www.client.com/submissionPage.html"
            });
        </script>
    Script element Description
    default Contact  Bazaarvoice support and the implementation team will provide a value for default.
    1234-en_us Contact Bazaarvoice support and the implementation team will provide a display code value for 1234-en_us.
    /bvstaging Ensure that /bvstaging is removed from the URL before launching in your production environment.
    bvapi.js bvapi.js is loaded synchronously. However, this file introduces no perceived performance impact in most conditions, and all remaining resources are loaded asynchronously.
    $BV.configure This is the Bazaarvoice configuration call. It is executed prior to any $BV.ui calls that it affects.
    submissionContainerUrl References the submission container URL page that you created and host on your website. For example, "http://www.client.com/submissionPage.html"
    Caution
    The example integration code above uses the test path /bvstaging. Make sure you remove /bvstaging from production environment URLs.
    Note: For security reasons, Bazaarvoice configures a white list of allowable domains for integration purposes. Contact Bazaarvoice support and inform the Bazaarvoice implementation team of all domains you plan to deploy in production.

    If the submissionContainerUrl domain is not on the list of allowable domains, a warning page (with clickable links) might display. Confirm that the URL presented on the warning page is a valid URL.

  2. To display Ratings & Reviews or Questions & Answers content on product display pages (PDP), you must add Bazaarvoice content containers to each of your PDPs (refer to Step 2: Add content containers).

Step 2: Add user-generated content containers

Add content containers (div code) to each PDP where you want to display relevant Bazaarvoice-generated content:

  • Primary rating summary: Insert <div id="BVRRSummaryContainer"></div> where you want the ratings summary to appear.
  • Review content: Insert <div id="BVRRContainer"></div> where you want the actual Ratings & Reviews to appear.
  • Questions & Answers summary: Insert <div id="BVQASummaryContainer"></div> where you want the Questions & Answers summary to appear.
  • Questions & Answers: Insert <div id="BVQAContainer"></div> where you want the actual Questions & Answers to appear.

Step 3: Load user-generated content

To load content into the div elements that you inserted in the previous step, use a $ BV.ui() JavaScript call as described in the code blocks in this section.

Load Ratings & Reviews into product pages

Copy Code
JavaScript
    <div id="BVRRContainer"></div>
    <script type="text/javascript">
        $BV.ui("rr", "show_reviews", {
            productId: "XXXXX"
        });
    </script>

XXXXX represents the ID of the product that is displayed on the page. This value must match the ID that is associated with the product in the product catalog feed.

Location: Bazaarvoice recommends placing reviews below the product description (and lower down on the PDP).

Caution
If this content appears behind a tab or other visible UI element, Bazaarvoice will be unable to bring it into view unless you provide custom code to reveal the hidden content.

Load Questions & Answers into product pages

Copy Code
JavaScript
    <div id="BVQAContainer"></div>
    <script type="text/javascript">
        $BV.ui("qa", "show_questions", {
            productId: "XXXXX",
            subjectType: "product"
        });
    </script>

XXXXX represents the ID of the product that is displayed on the page. This value must match the ID that is associated with the product in the product catalog feed.

Location: Bazaarvoice recommends placing questions and answers content below the actual review display area, lower down on the PDP or category page.

Load Questions & Answers into category pages

Copy Code
JavaScript
    <div id="BVQAContainer"></div>
    <script type="text/javascript">
        $BV.ui("qa", "show_questions", {
            categoryId: "XXXXX",
            subjectType: "category"
        });
    </script>

Step 4: Customize UGC display elements

Contact Bazaarvoice support and request to work with the design services team to customize:

  • Fonts
  • Icons used on any display pages
  • Text used for titles or links
  • Any UI elements on the display pages

Bazaarvoice design services has a team of User Experience (UX) consultants who provide custom design solutions for the PRR platform.

HTML example - submission container page

Copy Code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Bazaarvoice Test Integration</title>
    <script type="text/javascript" 
        src="//default.ugc.bazaarvoice.com/bvstaging/static/1235-en_us/bvapi.js">
    </script>
</head>
<div>
    <div id="BVSubmissionContainer"></div>
    <script type="text/javascript">
        $BV.ui("submissionContainer", {
            userToken: "XXXX"
        });
    </script>
</div>
</html>

HTML example - product page

Copy Code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Bazaarvoice Test Integration</title>
    <script type="text/javascript" 
        src="//default.ugc.bazaarvoice.com/bvstaging/static/1235-en_us/bvapi.js">
    </script>
    <script type="text/javascript">
        $BV.configure("global", {
            submissionContainerUrl: "http://client.com/submissionPage.html"
        });
    </script>
</head>
<div>
    <div id="BVRRSummaryContainer"></div>
    <div id="BVRRContainer"></div>
    <script type="text/javascript">
        $BV.ui("rr", "show_reviews", {
            productId: "XXXX"
        });
    </script>
</div>
</html>
Note
The example code above refers to implementing UGC using the scout file bvapi.js. You can also integrate user-generated content into your website using the BV loader JavaScript bv.js. Recommended for performance improvements and future innovations. Refer to the BV loader integration documentation for more information.