Integrate UGC into your website

Add Bazaarvoice code to your site

To display UGC, such as ratings and reviews, you must add Bazaarvoice code to your web pages.

Caution: If your existing implementation uses the scout file (bvapi.js), refer to the Display integration v1 documentation. However, we encourage 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 Support  to enable the Rating Summary 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 UGC 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 configuration within the Bazaarvoice Configuration. The default deployment zone is "main_site". Check with your Bazaarvoice representative to ensure the correct ID, or select to the right of the deployment zone on the Site Manager page of the configuration.
  • <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 used by the implementation. For example, en_US for English.

Caution: If you've already added the BV loader while implementing BV Pixel or DCC, do not add it again. Add the BV loader only once in each page.

Step 2: Add display pages for the UGC features

Add code to the <body> of a page where UGC features should be displayed.

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.

If you have implemented a shadow Document Object Model (DOM) on your web page, you can integrate the v2 applications (Ratings & Reviews and Questions & Answers) inside it. To integrate these applications when you configure the PDP display:

1. Sign in to the Bazaarvoice Portal.
2. From the upper-right corner, select the settings icon .
3. Under Configuration, select Ratings & Reviews. The Site Manager lists all your active deployment zones and implementations. 
4. Under Implementations, select Edit next to the implementation you want to configure.
5. In the User Experience section, select Display Options.
6. To configure settings common to Ratings & Reviews and Questions & Answers, select the Global Configuration tab.
7. Select Enabled under Render V2 applications within shadow DOM.

Note:

• Enabling shadow DOM prevents you from applying custom overrides to CSS files.
• If you want to integrate v2 applications within the shadow DOM and inject them later instead of on page load, you must call the BV API BV.registerMutationObserver() to ensure a seamless integration.

Product display page

You can add code for the following features on product display pages (PDPs):

Rating summary—Rating summary displays a summary of information about the specified product ID.

• Location: We recommend placing rating summary above the fold, as close to the product name and image as possible.

• 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 for one product on each page. You can have more than one rating summary on each 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.

Reviews—Reviews displays a list of ratings and reviews from each consumer who submitted a review.

• Location: We recommend placing reviews below the fold, lower on the PDP.
  
  

  Caution: We don't recommend placing reviews behind a tab. If your reviews will be displayed behind a tab, refer to Show hidden content.

• Required HTML code for this feature (recommended):

  <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.

  If you previously used $Bv.ui and are moving to Bv.ui, use the following HTML code:

BV.ui("show_reviews", {
  productID: "productID",
  contentContainerDiv: 'id or reference of the element to render reviews in.'
});

    ```

The following example shows the three parameters required to trigger this event:

$BV.ui("rr", "show_reviews", {
  productId: "productID"
});
    ```

Required parameters

The following table identifies the required parameters/fields:

Optional parameters

Questions & Answers—Questions & Answers shows questions and answers provided by consumers for the specified product ID.

• Location: We recommend placing Questions & Answers below the main review display, lower on the PDP.

• 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 & 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.

Review Highlights—Review Highlights shows a high-level summary of positive, neutral, and negative ratings and reviews.

• Location: We recommend placing review highlights below the product image (above the fold, if possible, or right below the fold) so consumers can see this as they scroll the page for product information.

• Required HTML code for this feature (recommended):

  <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.

  If you previously used $Bv.ui and are moving to Bv.ui, use the following HTML code:

Reviews Collect—Reviews Collect displays the rating stars on the Order History page of your website, allowing consumers to review each product purchased.

Product listing or category page

You can add code for the following feature on product listing or category pages:

Inline ratings—You can display inline ratings on a product listing or category page, product recommendation carousel, or search results page to provide a summary of ratings for products or services. The code for inline ratings is executed only once for each page, regardless of how many pages you display.

• Location: We recommend placing inline ratings below the product name.

• 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.

Home page

Seller Ratings—Seller Ratings displays up to 12 four- and five-star reviews on your home page, which are refreshed daily. It also enables your seller ratings to appear in inline search results.

• Location: We recommend placing Seller Ratings below the fold on your home page.

• 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.

Full code example

The following example contains most of the code you must add to each PDP. 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 re<span class="dxhe-searchHI">re</span> -->
      <div data-bv-show="questions" data-bv-product-id="productID123"></div>
  </body>
</html>

Show hidden content

Some user actions cause Bazaarvoice features to come into view, such as selecting the ★★★★★ icons in the rating summary, which scrolls to ratings and reviews. Tabbed navigation has become very common in recent years.

Search engines are capable of effectively indexing content that resides behind a tab, provided the following two conditions are met:

1. The SEO content is present in the initial HTML format of the page and is not loaded through scripts on your side.
2. The SEO content is visible on the page even after you turn off JavaScript in your browser and refresh the page.

Note: If the default state of the container that holds the SEO content is set to "visibility: hidden" or "display: none", then:

• Use JavaScript to reset this property. Do not declare this property in a stylesheet or inline to the element.
• Apply to all tabs so that all content is visible when the page is displayed with JavaScript off.

Example code

Here is an example of the JavaScript code that can be used to hide the tab content:

```html
<script type="text/javascript">
    document.getElementById('tab1').style.display = 'none';
    document.getElementById('tab2').style.display = 'none';
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('tab4').style.display = 'none';
</script>

You can also style directly in the div 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.

Example code for v1 implementations

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 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>
          <!-- 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 selecting 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>
  </body>
</html>

Example code for v2 implementations

You can include a callback to the show event using the BV.swat_reviews.on method for reviews. Use the BV.swat_questions.on method when questions come into view. The following 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>
          <!-- 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.swat_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 selecting the number of questions link

         BV.swat_questions.on('show', function () {

                // If the Q&A container is hidden (such as behind a tab), put code here to make it visible (open the tab) 

               $('#questions_tab').show();
         });
            };
          </script>
  </body>
</html>