Inline ratings

Inline ratings indicate immediately to your customers that your site includes ratings and reviews. The summaries help customers decide which products they want to view, making category pages more useful and easier to navigate. The data for inline ratings is pulled directly from Bazaarvoice servers, so the summaries update in real time.

In-depth Quick Start Check Your Work

You can display inline ratings on a product recommendation carousel, category page, or search results page to provide a summary of ratings for products or services. If you are using Ratings & Reviews for Stores, you can display inline ratings for your company's stores. To display inline ratings on your website, you must add inline ratings to your category pages and then style inline ratings to select which components to display on your pages and how you want them to appear. You can obtain ratings data from the ratings-only feed.

You can also configure inline ratings so that each summary is linked to the product's page. When customers select an inline rating summary, they can then view all posted ratings and reviews for that product.

Without inline ratings	With inline ratings

Without inline ratings, consumers viewing a category page have no information about the quality or popularity of a product.	With inline ratings, consumers can see the average rating and number of reviews for a product before opening the product display page.

Add inline ratings to pages

If you want to display Ratings and Review content in a product recommendation carousel, category page, or search results page, you must add inline ratings code to the page’s HTML. Inline ratings code can inject the following features:

Star rating
Decimal value for the overall average rating
Number of reviews

You can also link inline ratings to product pages, and if you are using Ratings & Reviews for Stores, you can link inline ratings to store pages.

Why are inline ratings important?

Inline ratings give consumers ratings and reviews before they access a product display page (PDP). Including inline ratings on category or search pages provides useful information to consumers who are researching or comparing products and helps them select which products to view.

Refer to the following examples for a comparison of category pages with and without inline ratings.

With inline ratings, consumers can view the average rating and number of reviews for a product before opening the PDP. You can display inline ratings with average rating stars and the number of reviews, or opt for displaying unselected rating stars when there are no ratings and reviews.

Product displaying average rating stars and the number of reviews, and a product displaying unselected rating stars with no average ratings and reviews.

Without inline ratings, consumers viewing a category page have no information about the quality or popularity of a product. You can choose to hide the inline rating stars or display the text reading No reviews yet on the PDP when no consumer reviews are available for the product.

Step 1: Contact Bazaarvoice Support about enabling inline ratings

Contact Bazaarvoice Support to enable this feature in your Conversations implementation.

Step 2: Enable inline ratings.

Before implementing inline ratings display code, you must enable the feature as follows:

Sign in to the Bazaarvoice Portal .
From the upper-right corner, select the settings icon .
Select Configuration.
Select the instance and Go to Configuration. The Site Manager appears, listing the available deployment zones and implementations.
From the Implementations section, select Edit next to the implementation you want to configure.
Under the User Experience section, select Style Editor.
Scroll to Inline Ratings and select the On toggle to enable inline ratings.
Select Edit to configure the information that is displayed with inline ratings. You can add the average rating and number of reviews to the inline ratings.

Step 3: Add the BV loader

Add the following JavaScript integration code as early as possible inside the <head> element:

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

The src attribute in <script> element references the full path to the BV loader (bv.js) file.

In the <script> element, replace the following with your values:

<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. The default deployment zone is "main_site". Check with your Bazaarvoice representative to ensure the correct ID, or sign in to the Configuration to verify.
<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. If you are not using US English (en_US), use the correct locale code.

Step 4: Display inline ratings

Add a <div> with an inline ratings data-bv-show="inline_rating" attribute where you want to render inline ratings on the page:

<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product1"
    data-bv-redirect-url="http://mycompany.com/product1"></div>
</div>
<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product2" 
    data-bv-redirect-url="http://mycompany.com/product2"></div>
</div>
<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product3"
    data-bv-redirect-url="http://mycompany.com/product3"></div>
</div>

You can configure inline ratings with the following attributes:

data-bv-product-id—The product ID of the product you want to render.

data-bv-redirect-url—The URL value of this attribute tells us where to redirect the user on click.

When you include a hyperlink in an inline rating, you can direct consumers to the PDP or specifically to Ratings & Reviews content.

When an inline rating does not contain hyperlink, consumers must open the product display page by selecting an element that does contain a hyperlink, like the product name or image. If the data-bv-redirect-url attribute isn't present, there is no click listener attached.

With hyperlinks	Without hyperlinks

Step 5: Implement with SEO (optional)

If the page on which you're implementing inline ratings has markup for SEO, you must wrap instances of inline ratings inside individual product tags or add the data-bv-seo attribute to your inline ratings div, depending on your use case.

data-bv-seo—Defaults to true. If data-bv-seo="false", Bazaarvoice will not render any SEO markup within that inline ratings div. This ensures that schema.org metadata does not interfere with the page's SEO.

According to Google's structured data guidelines , on category pages listing several different products:

Each entity should be marked up using the relevant schema.org type.
If one item is marked, all items should be marked. Apply data-bv-seo="false" to all inline ratings nodes or to none at all.
Unless this is a carousel page, the marked items should not link out to separate details pages. Do not include data-bv-redirect-url for inline ratings with SEO unless it is within a carousel.

If you do not include the data-bv-seo="false" attribute, you must always wrap inline ratings with a Product itemscope. The following sections describe how to properly implement inline ratings with SEO in different scenarios.

Implement inline ratings with SEO outside a carousel

If your page has SEO and you're adding inline ratings not in a carousel:

Wrap each inline ratings div in a Product itemscope.
Do not include the data-bv-redirect-url attribute.

For example:

<div itemscope itemtype="http://schema.org/Product">
  <div data-bv-show="inline_rating"
    data-bv-product-id="product1"></div>
</div>
<div itemscope itemtype="http://schema.org/Product">
  <div data-bv-show="inline_rating"
    data-bv-product-id="product2"></div> 
</div>
<div itemscope itemtype="http://schema.org/Product">
  <div data-bv-show="inline_rating"
    data-bv-product-id="product3"></div>
</div>

Implement inline ratings with SEO in a carousel

If your page has SEO and you're adding inline ratings in a carousel:

Wrap each inline ratings div in a Product itemscope.
Include the data-bv-redirect-url attribute if desired.

For example:

<div itemscope itemtype="http://schema.org/Product">
  <div data-bv-show="inline_rating"
    data-bv-product-id="product1"
    data-bv-redirect-url="http://mycompany.com/product1"></div>
</div>
<div itemscope itemtype="http://schema.org/Product">
  <div data-bv-show="inline_rating"
    data-bv-product-id="product2"
    data-bv-redirect-url="http://mycompany.com/product2"></div>
</div>
<div itemscope itemtype="http://schema.org/Product">
  <div data-bv-show="inline_rating"
    data-bv-product-id="product3"
    data-bv-redirect-url="http://mycompany.com/product3"></div>
</div>

Implement inline ratings without SEO

If your page does not have SEO and you're adding inline ratings anywhere on the page:

Do not wrap each inline ratings div in a Product itemscope.
Add data-bv-seo="false" to every inline ratings div.
Include the data-bv-redirect-url attribute if desired.

For example:

<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product1"
    data-bv-redirect-url="http://mycompany.com/product1"
    data-bv-seo="false"></div>
</div>
<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product2"
    data-bv-redirect-url="http://mycompany.com/product2"
    data-bv-seo="false"></div>
</div>
<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product3"
    data-bv-redirect-url="http://mycompany.com/product3"
    data-bv-seo="false"></div>
</div>

Full implementation example

The following is an example of a category page with inline ratings:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--First, download the BV Loader file. Replace client_name, site_ID, environment, and locale. -->
    <script
      async
      type="text/javascript"
      src="https://apps.bazaarvoice.com/prod/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>
  </head>
  <body>
    <section class="product category">
      <div class="product_tile">
        <img src="cool_product_1.png" />
        <div class="product_name">Cool Product 1</div>
        <div class="product_price">$42.00</div>
        <div data-bv-show="inline_rating"
          data-bv-product-id="coolproduct1"
          data-bv-redirect-url="http://mycompany.com/coolproduct1"></div>
      </div>
      <div class="product_tile">
        <img src="cool_product_2.png" />
        <div class="product_name">Cool Product 2</div>
        <div class="product_price">$42.00</div>
        <div data-bv-show="inline_rating"
          data-bv-product-id="coolproduct2"
          data-bv-redirect-url="http://mycompany.com/coolproduct2"></div>
      </div>
      <div class="product_tile">
        <img src="cool_product_3.png" />
        <div class="product_name">Cool Product 3</div>
        <div class="product_price">$42.00</div>
        <div data-bv-show="inline_rating"
          data-bv-product-id="coolproduct3"
          data-bv-redirect-url="http://mycompany.com/coolproduct3"></div>
      </div>
    </section>
  </body>
</html>

Note: If your existing implementation uses the scout file (bvapi.js), expand the next section and follow the steps below after you have enabled inline ratings in Workbench.

Step 1: Add the Bazaarvoice JavaScript API

To integrate the JavaScript API, complete the following steps on every page that will display Bazaarvoice content:

Add the appropriate JavaScript code within the <head> tag.
- Use the following code for the staging environment (the staging environment is for testing and development and is typically only visible internally—ensure each Bazaarvoice URL referenced in the code contains "/bvstaging" in the domain).
```
<script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>
```
- Use the following code for the production environment (the production environment is visible externally—content in the production environment is visible on your live website).
```
<script type="text/javascript" src="https://display.ugc.bazaarvoice.com/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>
```
Replace <client_name> with the case-sensitive value provided by the Bazaarvoice implementation team.
Replace <site_ID> with the ID of the deployment zone you want to use. The default deployment zone is “main_site”. Check with your Bazaarvoice representative to ensure the correct name, or sign in to Configuration to verify.
Replace <locale> if the page does not use US English.

Be aware that bvapi.js cannot be loaded asynchronously. However, this file introduces no perceived performance impact in most conditions, and all remaining resources are loaded asynchronously.

Step 2: Display inline ratings and summaries

You must decide whether you want your inline ratings to include hyperlinks.

Refer to the following examples for details and implementation steps.

When you include a hyperlink in an inline rating, you can direct consumers to the PDP or specifically to Ratings & Reviews content.

Set up inline ratings with hyperlinks

If you want your inline ratings summaries to include hyperlinks, insert the following JavaScript code on the category or search pages that will display inline ratings.

Note: You must include all of your relevant product IDs in the following code.

$BV.ui( 'rr', 'inline_ratings', {
 productIds : {
  'productId1' : {
     url : 'http://www.client.com/product/path1'
   },
  'productId2' : {
     url : 'http://www.client.com/product/path2'
   },
  'productId3' : {
     url : 'http://www.client.com/product/path3'
   },
  'productId4' : { 
     url : 'http://www.client.com/product/path4'
  }, 
 …
},
containerPrefix : 'BVRRInlineRating'
});

Note: You must replace the http://www.client.com/product/path... URLs in the above code with the full and complete URLs for each product page. If you are using Ratings & Reviews for Stores, you must include the URLs for each store page. Including an empty string in the URL field will disable the hyperlinks.

When an inline rating contains no hyperlink, consumers must open the product display page by selecting an element that does contain a hyperlink, like the product name or image.

Set up without hyperlinks

If you don't want your inline ratings summaries to include hyperlinks, insert the following JavaScript code on the category or search pages that will display inline ratings.

Note: You must include all of your relevant product IDs in the following code.

$BV.ui( 'rr', 'inline_ratings', {
 productIds : ['productId1', 'productId2', 'productId3', 'productId4', …],
   containerPrefix : 'BVRRInlineRating'
});

Step 3: Position inline ratings on the page

Insert the following code to display the inline ratings. You must create a div for each inline rating injection on the page:

<div id="BVRRInlineRating-productId123">
</div>

Note: Replace productId123 with your company's product ID, as defined in the productIds array. Product IDs are case sensitive, so to avoid errors, ensure the product ID exactly matches your company's product ID in the Bazaarvoice database. If you are using Ratings & Reviews for Stores, use the product ID you associated with the store.

Step 4: Accommodate product IDs with non-alphanumeric characters

If your product IDs contain spaces or other non-alphanumeric characters, apart from dashes and underscores, you need to specify the div ID that each inline rating injects. Insert a container ID after the URL for each product ID, as shown in the following example:

$BV.ui('rr', 'inline_ratings', {
  productIds: {
    'productId1.2': {
      url: 'http://www.client.com/product/path1',
      containerId: 'BVRRInlineRating-product-Id1'
    },
    ...
  },
});

Note: Ensure that the <div id> from Step 3 matches the containerId property defined for each product.

Style inline ratings

Follow these steps to customize the way inline ratings display on your pages:

Sign in to the Bazaarvoice Portal .
From the upper-right corner, select the settings icon .
Select Configuration.
Select the instance and Go to Configuration. The Site Manager appears, listing the available deployment zones and implementations.
From the Implementations section, select Edit next to the implementation you want to configure.
Select Style Editor under the User Experience section.
Scroll down to the Inline Rating section of the page and hover over the right side of the section to display Edit. Select Edit.
On the Edit Inline Rating dialog box, select the ratings components you want to display on your pages. You can align the rating components and incentivized content summary text to the right, left, or center, as shown in the image below.

When you are finished, select Close.
Expand the Icons section on the right side of the Style Editor page.
Select Category Rating Stars from the drop-down menu and then adjust the star size (in pixels) as well as the colors for the full and empty aspects of the stars. Changes are automatically saved.
Select to preview your changes.

To enable and integrate using the hosted display:

Using the configuration hub, select Style Editor under User Experience. Scroll to Inline Ratings and select the On toggle to enable inline ratings. Select Edit to choose the information that is displayed for inline ratings. You can add the average rating and number of reviews to the inline ratings display.
Add the following JavaScript integration code as early as possible inside the <head> element:
```
<head>
  <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>
  ...
</head>
```
Replace <client_name>, <site_ID>, <environment>, and <locale> with the appropriate values.

Add a <div> in the page <body> with an inline ratings data-bv-show="inline_rating" attribute where you want to render inline ratings:

<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product1"
    data-bv-redirect-url="http://mycompany.com/product1"></div>
</div>
<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product2" 
    data-bv-redirect-url="http://mycompany.com/product2"></div>
</div>
<div>
  <div data-bv-show="inline_rating"
    data-bv-product-id="product3"
    data-bv-redirect-url="http://mycompany.com/product3"></div>
</div>

Note: If your existing implementation uses the scout file (bvapi.js), complete the following steps instead to add inline ratings to your page:

Add the appropriate JavaScript code within the <head> tag:
```
<script type="text/javascript" src="https://display.ugc.bazaarvoice.com/bvstaging/static/<client_name>/<site_ID>/<locale>/bvapi.js"></script>
```
Replace <client_name>, <site_ID>, and <locale>, and remove /bvstaging from the URL if you are implementing inline ratings in a production environment.

Define all product IDs and product page URLs for the products in the <body> element of a page:

<script type="text/javascript">
$BV.ui( 'rr', 'inline_ratings', {
 productIds : {
  'productIdX' : {
     url : 'http://path_to_productX'
   },
  'productIdY' : {
     url : 'http://path_to_productY'
   },
 …
},
containerPrefix : 'BVRRInlineRating'
});
</script>

Create a <div> tag in the <body> element of a page for each product:

<div id="BVRRInlineRating-productIdX"></div>
<div id="BVRRInlineRating-productIdY"></div>
...

Be sure to test products that have reviews. Then, verify the following:

The average star rating for one or two products on a category page matches the star rating on the product page.

Stars are visible.

Pop out

Ratings & Reviews

Learn

Implement

Collect content

Product catalog

Display content

Manage content

Analyze data

View insights

Create reports

Analytics for API

Integrate analytics

Inline ratings

Add inline ratings to pages

Why are inline ratings important?

Step 1: Contact Bazaarvoice Support about enabling inline ratings

Step 2: Enable inline ratings.

Step 3: Add the BV loader

Step 4: Display inline ratings

Step 5: Implement with SEO (optional)

Implement inline ratings with SEO outside a carousel

Implement inline ratings with SEO in a carousel

Implement inline ratings without SEO

Full implementation example

Step 1: Add the Bazaarvoice JavaScript API

Step 2: Display inline ratings and summaries

Set up inline ratings with hyperlinks

Set up without hyperlinks

Step 3: Position inline ratings on the page

Step 4: Accommodate product IDs with non-alphanumeric characters

Style inline ratings

Select your language:

Pop out

Ratings & Reviews

Learn

Implement

Collect content

Product catalog

Display content

Manage content

Analyze data

View insights

Create reports

Analytics for API

Integrate analytics

Add inline ratings to pages

Why are inline ratings important?

Step 1: Contact Bazaarvoice Support about enabling inline ratings

Step 2: Enable inline ratings.

Step 3: Add the BV loader

Step 4: Display inline ratings

Step 5: Implement with SEO (optional)

Implement inline ratings with SEO outside a carousel

Implement inline ratings with SEO in a carousel

Implement inline ratings without SEO

Full implementation example

Step 1: Add the Bazaarvoice JavaScript API

Step 2: Display inline ratings and summaries

Set up inline ratings with hyperlinks

Set up without hyperlinks

Step 3: Position inline ratings on the page

Step 4: Accommodate product IDs with non-alphanumeric characters

Style inline ratings

Support

Feedback

Language

Print

Toggle dropdowns

Remove highlights