Caution: Use the following instructions if your implementation uses the BV loader bv.js (recommended for performance improvements and future innovations). However, if your implementation uses the BV scout file bvapi.js, refer to the scout file integration documentation.

This section includes instructions for:

Prerequisites (remove old code)

To ensure that the BV loader framework works properly, remove old PRR implementation code. Follow these steps:

  1. Make sure no <script> tags or dynamic scripts reference bvapi.js.
  2. Remove any of the following attributes from your PDP pages:
    • id="BVRRSummaryContainer"
    • id="BVRRContainer"
    • id="BVQASummaryContainer"
    • id="BVQAContainer"

  3. Remove any code that relies on $BV, such as calls to $BV.configure or $BV.ui.

  4. If implementing Bazaarvoice SEO (which uses the BV loader), double check that all references to BVRRSummaryContainer, BVRRContainer, BVQAContainer, and $BV calls have been removed. The Bazaarvoice SEO implementation must now reference the <div> tags in the following section.

Add user-generated content

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

Complete the following step-by-step instructions to display:

  • Rating summary
  • Ratings & Reviews
  • Questions & Answers

Step 1: Add JavaScript code (bv.js)

Insert the following code in the head element on every PDP that will display Bazaarvoice content.

<script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>
Script element Description
async Downloads the BV loader asynchronously which improves performance and responsiveness. This attribute is optional but recommended.
src Specifies the path to the BV loader.
<client_name> The client name provided by Bazaarvoice. Use lowercase letters.
<site_ID> The ID of the deployment zone you want to use. Set this value in the Bazaarvoice configuration hub. The default deployment zone is main_site. Contact Bazaarvoice Support to ensure you have the correct ID.
<environment> The deployment environment where you want to implement Bazaarvoice features. Include production in the path name for a production environment. If you're referencing a staging environment, include staging in the path name.
<locale> The locale used by the implementation. For example, use en_US for English.
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.

Step 2: Add the rating summary code

Place the following div element on every product page where you want to display the rating summary:

<div data-bv-show="rating_summary" data-bv-product-id="ExternalId"></div>

Location: Bazaarvoice recommends placing the rating summary as close as possible to the product name and image. It should appear above the fold, which is the area visible in a browser window when the page first loads.

Script attribute Description
data-bv-show Instructs the BV loader to display the rating summary.
data-bv-product-id Instructs the BV loader to display the feature for a specified product ID. The productID must match the `ExternalId` provided in the product catalog feed.
data-bv-seo Default value is set to true. If set to data-bv-seo=false, Bazaarvoice won't render any SEO markup within that inline ratings div. This ensures that the schema.org metadata does not conflict with the page's SEO performance.
Caution: If you choose to use bv.js for display integration, you must contact Bazaarvoice Support to enable the rating summary feature.

Step 3: Add the Ratings & Reviews code

Place the following div element on every product page where you want to display the actual product reviews:

<div data-bv-show="reviews" data-bv-product-id="ExternalId"></div>

Location: Bazaarvoice recommends placing reviews below the fold, lower down on the PDP, under the product description.

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.
Attribute Description
data-bv-show Instructs the BV loader to display reviews.
data-bv-product-id Instructs the BV loader to display the feature for a specified product ID. The productID must match the ExternalId provided in the product catalog feed.

Step 4: Add the Questions & Answers code

Place the following div element on every product page where you want to display the Questions & Answers:

<div data-bv-show="questions" data-bv-product-id="ExternalId"></div>
Script attribute Description
data-bv-show Instructs the BV loader to display questions and answers.
data-bv-product-id Instructs the BV loader to display the feature for a specified product ID. The productID must match the ExternalId provided in the product catalog feed.

Show hidden content

Some user actions cause Bazaarvoice features to come into view, such as clicking the ★★★★★ icons in the rating summary, which scrolls to ratings and reviews.

If this content is hidden behind a tab, however, you must add custom, page-specific code that calls the bvCallback function to show the correct tab or container.

Add the bvCallback function to the page so that the BV loader can download and execute it when the BV loader is downloaded (asynchronously). Then, include code in the bvCallback function to run a custom function.

For example, you can include a callback to the show event using the BV.reviews.on method when reviews come into view. The BV.questions.on method is also available.

Show hidden content - code example

This example uses the bootstrap tab component:

<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- Download the BV loader file. This replaces bvapi.js in Ratings & Reviews v1 implementations.
        In the URL, replace <client_name>, <site_ID>, and <locale>, and replace <environment> with 'staging' or 'production'.
      -->
      <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>
  </head>
 
  <body>
      <!-- schema.org Markup: 
            itemscope and itemprop="name" are required for BV's injected schema.org 
            properties and metadata to be parsed correctly by search engines 
      -->
      <div itemscope itemtype="https://schema.org/Product">
           <!-- Product name must be identified with itemprop=name attribute-->
           <h1 itemprop="name">ProductName</h1>
 
          <!-- Rating summary goes above the fold near product name or image -->
          <div data-bv-show="rating_summary" data-bv-product-id="ProductID123"></div>
 
          <!-- Content Tabs -->
          <div id="review_tab" style="display: none;">
            <!-- Instruct BV loader to show the R&R feature for productID123 here -->
            <div data-bv-show="reviews" data-bv-product-id="productID123"></div>
          </div>
 
          <div id="questions_tab" style="display: none;">
            <!-- Instruct BV loader to show the Q&A feature for productID123 here -->
            <div data-bv-show="questions" data-bv-product-id="productID123"></div>
          </div>
 
          <script>
            // bvCallback must be used when interacting with BV via JavaScript and using the `async` attribute. 
            window.bvCallback = function (BV) {
          
          // Register a function to be called when a BV feature needs to display the R&R element, such as Rating Summary's stars
              BV.reviews.on('show', function () {
                 // If the R&R container is hidden (such as behind a tab), put code here to make it visible (open the tab)
                 $('#review_tab').show();
              });
           
          // Register a function to be called when a BV feature needs to 
          // display the Q&A element, such as when clicking on the number of questions link
              BV.questions.on('show', function () {
                // If the container is hidden (such as behind a tab), put code here to make it visible (open the tab) 
                $('#questions_tab').show();
              });
            };
          </script>
      </div>
  </body>
</html>

Troubleshooting

If the rating summary or reviews don’t display after you have added this integration code, or if reviews are not styled correctly, BV loader is probably not inferring the correct hostname or display code. A network request error for bvapi.js may be displayed in the console.

Add the following attributes to the BV loader to override the display code that BV loader inferred:

<script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js">
  data-bv-display-code="<displaycode>"
  data-bv-hostname="reviews.<client_name>.com"
</script>

“Primary rating summary” and “Rating summary” differences

You can add a ratings summary container at the top of your product display pages to provide a quick overview of your product’s ratings at a glance. To implement the summary container, you have two options:

  • Primary rating summary
  • Rating summary

These are the key differences between these two rating summaries:

  Primary rating summary Rating summary
What is displayed?
  • Five-icon image indicating the average product rating can be customizable
  • Total number of reviews for the product
  • Number of customers who would recommend to a friend
  • Interactive histogram that provides a rating breakdown
  • Number of questions and answers for the product
  • "Write a review," "Read X reviews," and "Ask a question" links
  • Links to share to social networking sites
  • Five-star image indicating the average product rating
  • Total number of reviews for the product
  • Percentage (%) of customers who recommend the product
  • Interactive histogram that provides a rating breakdown and filtering
  • Number of questions and answers for the product
  • "Write a review," "Read X reviews," and "Ask a question" links
Integration script bvapi.js bv.js
Advantages Can be customized extensively.
  • Much smaller file size and renders a lot faster.
  • Less integration code to implement.
  • Supports upcoming performance improvements and innovations.
Limitations
  • Larger file size and renders more slowly.
  • More integration code to implement.
  • Site authentication is not supported.
  • Iframe integration is not supported.
  • Special implementation code is not supported, such as $BV.getConfiguration.
  • Custom stars and other icons are not supported.
  • Category IDs are not supported.
Caution: If you choose to use bv.js for display integration, you must contact Bazaarvoice Support to enable the rating summary feature.