Review Display

The Review Display takes collected and modified user-generated content (UGC), aggregates it, and then displays the content on your product pages for consumers to read. This enables the potential customer to dig deeper into the reviewer's experience with the product. The content in the Review Display is sortable and filterable based on some criteria from the Review Snapshot.

The PowerReviews Review Display can display the following types of content on your website:

The Review Display is responsive, mobile friendly, and fully customizable, so you can determine how and where you want your review content to appear.

review display

This page includes the following sections:

Ratings and Reviews

Ratings and Reviews capture the consumer’s impression of a product. You can display ratings and reviews in a few different ways on your website to help your consumers make informed purchasing decisions.

The product page has two main components for displaying reviews: the Review Summary and the Review Display.

The Review Summary is typically placed near the top of the page close to the product’s name and image and provides basic information such as the aggregate rating, number of reviews, and a Write a Review link.

The default Review Display PowerReviews offers is made up of the following components:

There are also the following alternative or additional options available for the way the aforementioned features are displayed on your Review Display depending on your needs:

  • Apparel Footwear Look and Feel: An updated version of the Review Snapshot and Snippet Slider specifically designed for Apparel and Footwear.
  • Alternative Media Gallery: A version of the image gallery that features a preview of user generated visual content next to your image gallery.
  • Demographic Information:This enhancement allows you to have up to three more fields featured/oriented with name and location.
  • Shop All Page: A page that allows you to display all images collected from Social Suite.

Related Documentation:

  • Category Snippets: Optional addition to your Category and Search pages that allow multiple products on the page to appear with review information.

Variables

To successfully add the Review Display, you’ll need the following variables, provided to you via TaskKey by your Implementation Engineer: API Key, Merchant Group ID, and Merchant ID.

You’ll also need to verify your locale and page ID for your product. Additionally, you’ll need your Write-a-Review form page URL. For more information, see Adding the Write-a-Review Form.

Adding Ratings and Reviews to Your Site

To add the Review Display to your product detail pages (PDP), ensure you have the following variables:

  • API Key
  • Locale
  • Merchant Group ID
  • Merchant ID
  • Page ID
  • Review Wrapper URL

Components

To generate a component for the Review Display, you must create a div container with a unique ID followed by defining the component name in the Display Render function. Use the following syntax to do this: ComponentName: ‘<id of div’> and add to the components in the following example.

Example: ReviewDisplay: ‘pr-reviewdisplay’ this renders the ReviewDisplay Component on your PDP with the ID of pr-review display (<div id="pr-reviewdisplay"></div>)

The Review Display components include:

  • ReviewSnippet - a small UI that displays the aggregate rating, review count, and percentage of recommendations for a product.
  • ReviewDisplay - the comprehensive display that contains the image display, Review Snapshot, and Review List.
  • ReviewSnapshot - an interface that displays the aggregate rating, a distribution of review ratings, and aggregate tag information for a product.
  • ReviewList - an interface that displays a list of detailed individual reviews.

You must also ensure that you create div containers to house the PowerReviews content on your PDP.

If you currently have no reviews for a product, an empty review display appears. You can modify the way this empty display renders using your own CSS to style the class pr-no-reviews found in the pr-review-snippet-container or the pr-rd-no-reviews class for the entire display. For more information on CSS styling guidelines, see Customizing Your PowerReviews Platform.

Adding the Review Display

To add the Review Display, which includes the Review Snapshot, into your PDP:

  1. Install the Review Summary Content Container.

    • Copy, and then paste the following HTML element into your HTML page where you want the Review Summary to appear: <div id="pr-reviewsnippet"></div>
  2. Install the Review Display Content Container.

    • Copy, and then paste the following HTML element into your HTML page where you want the Review Display to appear: <div id="pr-reviewdisplay"></div>
  1. Install the Review Display initialization code.

    1. Navigate to your PDP and find your previously created div containers.
    2. Copy the following code snippet: <script src='//ui.powerreviews.com/stable/4.0/ui.js'></script>
    3. Paste the render function after the div containers used for PowerReviews components within the <body></body> tags.
  2. Replace the following values with your specific information.

    When you update the values, you remove the carats.

    • <API KEY> with your provided API Key.
    • <LOCALE> with the locale for your site. For example en_US.
    • <GROUP ID> with your provided Merchant Group ID.
    • <MERCHANT ID> with your provided Merchant ID.
    • <PAGE ID> with the page ID associated with the product. This value can't exceed 50 characters.
    • <WRAPPER URL> with the URL where your Write-a-Review form is hosted.
<script src='//ui.powerreviews.com/stable/4.0/ui.js'></script>

<div id="pr-reviewsnippet"></div>
<div id="pr-reviewdisplay"></div>

<script>
POWERREVIEWS.display.render({   
  api_key: '<API KEY>',
  locale: '<LOCALE>',
  merchant_group_id: '<GROUP ID>',
  merchant_id: '<MERCHANT ID>',
  page_id: '<PAGE ID>',
  review_wrapper_url: '<WRAPPER URL>',
  components: {
    ReviewSnippet: 'pr-reviewsnippet',
    ReviewDisplay: 'pr-reviewdisplay'
  }
});
</script>

The render function can only be called once on each page, so if you find yourself needing to call it separately in different parts of your code, build an array and call POWERREVIEWS.display.render on that array.

For an additional performance enhancement, include the parameter ‘enable_content_collection_modal’ and set it to ‘false’ if the modal is not being used.

Optimizing the Review Display

If the modal is not being used, you can gain a additional performance enhancement of 16-28 percent. To do so, include the parameter ‘enable_content_collection_modal’ in the code and set it to ‘false’, as follows:

<script src='//ui.powerreviews.com/stable/4.0/ui.js'></script>

<div id="pr-reviewsnippet"></div>
<div id="pr-reviewdisplay"></div>

<script>
POWERREVIEWS.display.render({ 
  enable_content_collection_modal: false,  
  api_key: '<API KEY>',
  locale: '<LOCALE>',
  merchant_group_id: '<GROUP ID>',
  merchant_id: '<MERCHANT ID>',
  page_id: '<PAGE ID>',
  review_wrapper_url: '<WRAPPER URL>',
  components: {
    ReviewSnippet: 'pr-reviewsnippet',
    ReviewDisplay: 'pr-reviewdisplay'
  }
});
</script>

Language Filter

The Language Filter tool allows shoppers navigating ratings and reviews on your product page to change the locale, and as such, display language, for content they see in the Review Snippet and Review Display. When a shopper changes the language from the drop-down list, reviews for the corresponding locale will be displayed in that language, as well as all other PowerReviews components.

Multiple languages/locales cannot be displayed simultaneously on the same page.

The screenshot below is an example of the Review Snapshot with the language filter enabled and set to English.

The screenshot below is a example of the Review Snapshot with the language filter enabled and set to French.

Multiple languages/locales cannot be displayed simultaneously on the same page.

Adding the Language Filter to your Product Page

To implement this feature, you must have the ENABLE_LANGUAGE_TOGGLE merchant property set to true and include a “languages” property in the display.render call, as follows:

<script src='//ui.powerreviews.com/stable/4.0/ui.js'></script>

<div id="pr-reviewsnippet"></div>
<div id="pr-reviewdisplay"></div>

<script>
POWERREVIEWS.display.render({
   api_key: '<API KEY>',
   locale: '<LOCALE>',
   merchant_group_id: '<GROUP ID>',
   merchant_id: '<MERCHANT ID>',
   page_id: '<PAGE ID>',
   components: {
       ReviewSnippet: 'pr-reviewsnippet',
	ReviewDisplay: 'pr-reviewdisplay',
   },	
   languages: [
      { name: “{display name for language option}”, locale: “<locale>”, merchant_id: “<merchant_id>” },
      { name: “{display name for language option}”, locale: “<locale>”, merchant_id: “<merchant_id>” }, 	
       ...
     ]
   })
</script>

The first option in the “languages” property should match the primary locale/merchant_id pair used in the display.render call.

Native Content Display Filter

You can include a filter on your Review Display that allows your users to display only reviews that are native to your site to give a more community based shopping experience. It will appear along with the other filters above the reviews on your PDP.

The Native Content Display Filter will default to displaying all reviews (both native and syndicated) until a threshold of 500 native reviews is reached. Once there are 500 native reviews, regardless of overall review count, the default display will switch to "Reviews at <your URL>" and the review display will display only native reviews.

To implement the Native Content Display Filter, contact your Client Success Director.

Frequently Asked Questions

What text can we change on the Review Display?

If your site is using Display 4, append ?pr_localization_view=1 to the URL to see what can be changed.

Need more help? Contact us!