To display consumer-generated content (CGC) collected by Bazaarvoice on your website, you must add Bazaarvoice code to your pages’ HTML. This enables your website to communicate with the Bazaarvoice application and retrieve consumer-generated content for display. Your technical team should complete the steps in each section below.

Tip: After adding display code to your site, customize each module's look and feel on your pages as described in Hosted display configuration.

To display ratings, reviews, questions, and answers from consumers on your website, you can use the Bazaarvoice hosted display by adding code to your website's pages. This topic describes the necessary steps to integrate code as well as steps to display hidden content and migrate an existing display implementation to the BV loader framework.

In addition, schema.org integration steps are provided. Schema.org provides microdata that you can add to your pages to enable search engines (Google, Microsoft, Yandex, and Yahoo) to intelligently display relevant content to a user.

Overview of the display modules

Most brands and retailers add Bazaarvoice display module code to their product display pages (PDPs), but you can add the code to all your pages if they use a shared template. In general, the following statements apply to all modules. Exceptions are documented in the sections below.

  • Display module content is updated continually as moderation approves submitted content.
  • Native and syndicated reviews that pass moderation are included in each display module.
  • All locales are supported.
  • Product families are supported.

Rating summary

The rating summary module, also called “fast stars,” displays the following information about the specified product ID:

  • Five-star image indicating the average product rating
  • Total number of reviews for the product
  • Percent (%) of customers who recommend the product
  • Interactive histogram that provides a rating breakdown
  • Number of questions and answers for the product

The module also provides "Write a review" and "Ask a question" links.

The rating summary is typically placed at the top of the PDP next to the product image to provide a summary of the ratings. Here is an example:

Rating Summary

Complete these steps to implement the rating summary:

  1. Contact Bazaarvoice Client Care to enable this feature in your Conversations implementation.
  2. Add the rating summary module to the PDP.
  3. If reviews will be hidden behind an interface component, such as a tab, add custom code to show the content.
  4. Customize the fonts and icons used in the rating summary.
  5. Customize the text used for titles, links, and other elements of the display module.

Bazaarvoice strongly recommends that you implement this module with the reviews module, which is described next.

Reviews

The reviews module displays a list of ratings and reviews from each consumer who submitted a review. If comments are enabled and consumers submit comments to a review, the comments are also displayed by this module. Reviews are typically placed below the product image and description. Here is an example:

Reviews container

the following steps to implement reviews:

  1. Add code to the PDP.
  2. If reviews will be hidden, add code to show the correct tab or container.
  3. Customize the fonts and icons used in the reviews module.
  4. Customize the text used for titles, links, and other elements of the display module.
  5. Set options for displaying reviews on your site.

Bazaarvoice strongly recommends that you implement this module with the rating summary module, which is described above.

Review Highlights

The Review Highlights module shows a high-level summary of positive, neutral, and negative ratings and reviews. This display module enables consumers to gain immediate insight about a product without having to read individual product reviews, though they can expand a highlight to see the full review. To display this content, Bazaarvoice analyzes all ratings and reviews submitted for a specific product. Content featured in the display module is chosen randomly and updated between 2:00-3:00 AM Central Time (CST: UTC-6 or CDT: UTC-5).

Here is an example:

Review Highlights

Before implementing this module, be aware of the following requirements and limitations:

  • A product must have at least 10 native or syndicated reviews for the Review Highlights module to display.
  • Review Highlights cannot be displayed inside the reviews display module.
  • The Review Highlights module is available only for English locales at this time.

If the Review Highlights module stops displaying, the associated product likely had fewer than 10 reviews when the module last refreshed (2:00-3:00 AM Central Time). The Review Highlights module will be displayed after at least 10 reviews are submitted for the product.

Complete the following steps to implement Review Highlights:

To implement Review Highlights:

  1. Contact Bazaarvoice Client Care to enable this feature in your Conversations implementation.
  2. Add code to the PDP.
  3. Turn on the display module and customize the styles used by Review Highlights. These are not inherited from the reviews display module.
  4. Customize the text used for titles, links, and other elements of the display module.

The Review Highlights module may take up to 48 hours to display after you enable and implement the feature.

Questions and Answers

This module shows questions and answers provided by consumers for the specified product ID. Questions and answers are typically placed below the product image and description. Here is an example:

Questions container

Complete the following steps to implement Questions and Answers:

  1. Add code to the PDP.
  2. If reviews will be hidden, add code to show the correct tab or container.
  3. Turn on the display module and customize the fonts and icons used by Questions and Answers.
  4. Customize the text used for titles, links, and other elements of the display module.
  5. Set options for displaying questions and answers on your site.

Add Bazaarvoice code to your website

To display consumer-generated content (CGC), such as ratings and reviews, you must add Bazaarvoice code to your website pages.

Caution: If your existing implementation uses the scout file (bvapi.js), refer to the Display integration v1 documentation. However, Bazaarvoice encourages you to implement the BV loader file (bv.js) and the <div> tags documented below for performance improvements and future innovations.

If you choose to use bv.js and these instructions for display integration, you must contact Bazaarvoice Client Care to enable the rating summary ("fast stars") and Review Highlights features. The code for these features will not work if Support does not enable them.

Step 1: Add the BV loader

The BV loader is a small, asynchronous JavaScript application that manages and displays configured features and CGC on your web pages. The BV loader will only download the required applications requested on the specific page.

To integrate the BV loader, add the following to your HTML within the <head> tag of the page:

<script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>

where:

  • async—Downloads the BV loader asynchronously. This attribute is optional but recommended.
  • src—Specifies the path to the BV loader. Replace the following elements in your HTML:
    • <client_name>— The client name provided by Bazaarvoice. Be sure to use lowercase letters for the value.
    • <site_ID>—The ID of the deployment zone you want to use. This is set in the Bazaarvoice configuration hub within the Bazaarvoice Workbench. The default deployment zone is “main_site”. Check with your Bazaarvoice representative to ensure the correct ID, or click to the right of the deployment zone on the Site Manager page of the configuration hub.
    • <environment>—The deployment environment where you want to implement Bazaarvoice features. For a production environment, include production in the path. If you are referencing a staging environment, include staging in the path.
    • <locale>—The locale that is used by the implementation. For example, en_US for English.

Step 2: Add display modules for the CGC features

Add code to the <body> of a page where CGC features should be displayed. You can add code for the following features:

  • Rating summary — Position the rating summary as close to the product name and image as possible. Here is the required HTML code for this feature:

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

    The data-bv-show data attribute instructs the BV loader to display the rating summary, and data-bv-product-id instructs the BV loader to display the feature for a specified product ID, which must match the ExternalId provided in the product catalog.

    If you want to display multiple rating summaries for the same product on a PDP, add the data-bv-seo="false" data attribute to subsequent rating summary <div> tags. This ensures that schema.org metadata is rendered for the first rating summary only. If schema.org metadata is rendered for more than one rating summary on a page, it interferes with the page's SEO. Here is an example:

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

    Caution: Only use rating summary modules for one product per page. You can have more than one rating summary per page, but they must all be for the same product.

    To show multiple rating summaries for multiple products on a single page, such as on a category listing page, use inline ratings instead.

  • Inline ratings — Here is the required HTML code for this feature:

    <div data-bv-show="inline_rating" data-bv-product-id="ExternalId-1"></div>
    <div data-bv-show="inline_rating" data-bv-product-id="ExternalId-2"></div>

    The data-bv-show data attribute instructs the BV loader to display inline ratings, and data-bv-product-id instructs the BV loader to display the feature for a specified product ID, which must match the ExternalId provided in the product catalog.

    If you want to include a hyperlink in an inline rating, add the data-bv-redirect-url="<http://mycompany.com/product1>" data attribute to the inline rating <div> tag.

  • Reviews — Here is the required HTML code for this feature:

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

    The data-bv-show data attribute instructs the BV loader to display reviews, and data-bv-product-id instructs the BV loader to display the feature for a specified product ID, which must match the ExternalId provided in the product catalog.

  • Review Highlights — Place this code toward the top of the page for the largest impact. Here is the required HTML code for this feature:

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

    The data-bv-show data attribute instructs the BV loader to display Review Highlights, and data-bv-product-id instructs the BV loader to display the feature for a specified product ID, which must match the ExternalId provided in the product catalog.

  • Questions — Here is the required HTML code for this feature:

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

    The data-bv-show data attribute instructs the BV loader to display Questions and Answers, and data-bv-product-id instructs the BV loader to display the feature for a specified product ID, which must match the ExternalId provided in the product catalog.

  • Seller Ratings — Here is the required HTML code for this feature:

    <div data-bv-show="seller_ratings"></div>

    The data-bv-show data attribute instructs the BV loader to display Seller Ratings for the client that matches the <client_name> provided in the header <script> tag. Note that Google Seller Ratings must be enabled for at least 24 hours before the feature appears on your site.

If you are unfamiliar with data attributes, visit the Using Data Attributes page.

Note: After you add code to your site, customize how content is displayed on your pages as described in Hosted display configuration.

Full code example

The following example contains most of the code you must add to each PDP. Only use this code as a reference; do not copy and paste this code without adding your company's specific information. You must modify this code to support your implementation and place each code snippet in the appropriate location in each page's HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
      <!--
       First, download the BV loader file. This replaces bvapi.js in Conversations v1 implementations

       Replace <client_name>, <site_ID>, and <locale> with your values; 
       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. This 
    should wrap all features displaying CGC.
      -->
      <div itemscope itemtype="https://schema.org/Product">

          <h1 itemprop="name">ProductName</h1> <!--product name must be identified with itemprop=name attribute-->

          <!-- Rating summary - typically goes above the fold near product name or image -->
          <div data-bv-show="rating_summary" data-bv-product-id="ProductID123"></div>

          <!-- Review Highlights - typically goes below the product description or image -->
          <div data-bv-show="review_highlights" data-bv-product-id="ProductID123"></div>

          <!-- Reviews module for productID123 here -->
          <div data-bv-show="reviews" data-bv-product-id="productID123"></div>

          <!-- Questions module for productID123 here -->
      <div data-bv-show="questions" data-bv-product-id="productID123"></div>
      </div>
  </body>
</html>           

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.) This example uses the bootstrap tab component:

<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- Download the BV loader file. This replaces bvapi.js in Conversations 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>

Add schema.org markup

To make your reviews easier to crawl and index by search engines and to support rich snippets, like search results with star ratings, you must add schema.org markup to each PDP.

Why is schema.org markup important?

Customers often find products through search engines, so every PDP must communicate with search engines effectively. While enabling BVSEO will help search engines find your content, the major search engines look for schema.org markup when generating search results. Adding schema.org markup allows you to tag content search engines need to create rich snippets, which helps your content stand out on search results pages.

Note: You are responsible for completing the markup on each PDP.

The following illustrates how schema.org markup enhances a search result snippet.

Without schema.org markup With schema.org markup
Without Schema.org markup With Schema.org markup
The standard snippet includes the item name, a short description, and a link. In addition to standard snippet information, this rich snippet includes the product star rating.

Add schema.org markup

Complete the following steps to add schema.org markup to a PDP.

  1. Add the following schema.org type code to your PDP code.
    <div itemscope itemtype="http://schema.org/Product">                

    This <div> block must contain Rating summary and Reviews <div> tags as described in step 2 and as shown in the full code example. If you have implemented Questions and Answers, make sure you also include the Questions <div> tag.

    Note: Pages must only contain one schema.org type.
  2. Tag your product name with schema.org markup. Use one of the following lines of code, replacing ProductName with the product name used in your product feed.
    <!-- Add schema.org product class to the h1 tag-->
        <h1 itemprop="name">ProductName</h1> 
    <!-- Or add the class in meta tags-->     
        <meta itemprop="name" content="ProductName">           
    Note: Ensure that each product name is identical or very similar to the product name included in your product feed. Google requires similar product names across schema markup.

Clean up existing implementations of Conversations

If Bazaarvoice code is currently integrated on your site, ensure that the new BV loader framework works properly by following these steps:

  1. Make sure no <script> tags or dynamic scripts reference bvapi.js.
  2. Remove any of the following attributes:
    • id="BVRRSummaryContainer"
    • id="BVRRContainer"
    • id="BVQAContainer"
  3. Remove any code that relies on $BV, such as calls to $BV.configure or $BV.ui.

  4. If Bazaarvoice SEO is implemented, update the implementation to remove references to BVRRSummaryContainer, BVRRContainer, BVQAContainer, and $BV calls. The SEO implementation must now reference the <div> tags described in Add Bazaarvoice code to your website.
Note: Other features of Conversations do not yet support the updated syntax of the display integration code that uses data-bv-show, such as inline ratings. For these features, Bazaarvoice recommends that you follow step 1 in Integrate tabs or other dynamic content to create the bvCallback function and then add any $BV.configure or $BV.ui calls that are specific to those features in that function.

Add this code where you want to display the Bazaarvoice content on your pages:

<!DOCTYPE html>
<html lang="en">
  <head>
      <!--
       First, download the BV loader file. This replaces bvapi.js in Conversations v1 implementations

       Replace <client_name>, <site_ID>, and <locale> with your values; 
       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. This 
    should wrap all features displaying CGC.
      -->
      <div itemscope itemtype="https://schema.org/Product">

          <h1 itemprop="name">ProductName</h1> <!--product name must be identified with itemprop=name attribute-->

          <!-- Rating summary - typically goes above the fold near product name or image -->
          <div data-bv-show="rating_summary" data-bv-product-id="ProductID123"></div>

          <!-- Review Highlights - typically goes below the product description or image -->
          <div data-bv-show="review_highlights" data-bv-product-id="ProductID123"></div>

          <!-- Reviews module for productID123 here -->
          <div data-bv-show="reviews" data-bv-product-id="productID123"></div>

          <!-- Questions module for productID123 here -->
      <div data-bv-show="questions" data-bv-product-id="productID123"></div>
      </div>
  </body>
</html>           

Verify the following: