1WorldSync Customer Community

CommunityJedi22 · ‎09-02-2025

This article discusses how to implement both Reviews and Q&A on your product detail pages (PDPs). To learn more about the Review Display and its features, click here. To learn more about Q&A, click here.

Components

The Review and Q&A components include:

ReviewSnippet - Shows the aggregate rating and review count. You will install this above the fold.
ReviewDisplay - Shows the Review Snapshot, Review List, and Image Gallery (as applicable) of individual customer reviews. You will install this below the fold.
Questions & Answers Snippet - Shows the number of answered questions. You will install this above the fold.
Questions & Answers Display - Shows all questions and their answers. You will install this below the fold.

You must also create div containers to house the PowerReviews content on your PDPs.

Installation

1. Ensure you have your Account Credentials, which can be found in your Implementation Project Workbook. If you do not have these in hand, please reach out to your Implementation Team.
2. Install your content containers:

Install the Review Snippet container
Example: <div id="pr-reviewsnippet"></div>
Install the Review Display container
Example: <div id="pr-reviewdisplay"></div>
Install the Questions & Answers Snippet container.
Example: <div id="pr-questionsnippet"></div>
Install the Questions & Answers Display container.
Example: <div id="pr-questiondisplay"></div>

3. Install the PowerReviews ui.js library and render function. Load the ui.js file before making the function call in the body of the page. This function should be placed at the bottom of the page after all content containers.

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

<script>
 window.pwr = window.pwr || function () {
  (pwr.q = pwr.q || []).push(arguments); 
 };
 pwr("render", {
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   page_id: 'PAGE_ID',
   review_wrapper_url: 'WRAPPER_URL',
   components: {
      ReviewSnippet: 'pr-reviewsnippet',
      ReviewDisplay: 'pr-reviewdisplay',
      QuestionSnippet: 'pr-questionsnippet',
      QuestionDisplay: 'pr-questiondisplay'
   }
});
</script>

4. Replace the values for the following required variables with your specific information.

Field	Description	Requirements	Example	Additional Notes
api_key	Your API key	This value is provided to you by PowerReviews	ec8f9acb-be0e-489b-a6ff-3eed3811025e
locale	Your Locale	This value is provided to you by PowerReviews	en_US
merchant_group_id	Your Merchant Group ID	This value is provided to you by PowerReviews	49047
merchant_id	Your Merchant ID	This value is provided to you by PowerReviews	512774
page_id	The unique identifier at the parent level, typically the master product ID, SKU, style number, etc. The page_id is determined by you	This field can include up to 50 alphanumeric characters page_id values are case sensitive Hyphens (-) and underscores ( _ ) can be used	7751057291	Reviews always roll up to the page_id. For example, if you have a jacket that comes in different colors, the page_id value must be common across all colors for them to display in a single Review Display.
review_wrapper_url	The URL of the page hosting the WAR form	You should create one page for all products (not one page per product)	https://www.pr demostore.com/pages/ write-a-review/?pr_page_id=__PAGE_ID__	This page will be used by customers who click 'Write-a-Review' on your site and by customers who receive your Follow-Up email. This page will also be used for the Ask a Question page.

Multiple Render Functions and Performance

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 the render function 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.

Products That Have Zero Reviews

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 pr-no-reviews class 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.

Additional Review Customizations

If you wish to only display certain elements of the Review Display (i.e., Image Gallery, Review Snapshot, or Review List - see below), or to reorder the items within the Review Display, this can be done by rendering the individual components within the render call in place of the ReviewDisplay component.

You can find a full list of available components within our JavaScript Reference Guide.

Please note that if you change the components you are rendering, you should also update the names of the divs to reflect this. For example, if you wish to use the ReviewList component, you should name your div pr-reviewlist, etc.

<div id="reviewsnippet">
<div id="reviewlist">
<div id="reviewimagedisplay">

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

<script>
 window.pwr = window.pwr || function (){
(pwr.q = pwr.q || []).push(arguments);
};
pwr("render", {
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   page_id: 'PAGE_ID',
   review_wrapper_url: 'WRAPPER_URL',
   components: {
      ReviewSnippet: 'pr-reviewsnippet',
      ReviewList: 'pr-reviewlist',
      ReviewImageDisplay: 'pr-reviewimagedisplay'

   }
});</script>

Products That Have Zero Q&A

If you currently have no questions/answers for a product, an empty Q&A Display appears. You can modify the way this empty display renders using your own CSS to style the pr-no-qa class found in the pr-qa-snippet-container. For more information on CSS styling guidelines, see Customizing Your PowerReviews Platform.

Other Q&A Considerations

You can implement the Q&A Display without implementing the Q&A Snippet. If you want to implement only the Display, remove the div container and the QuestionSnippet component from your PDP. It's important to note that your customers can only answer questions on the Q&A Display.

Content that's hidden via a tab or accordion on page load and requires user interaction to appear may not be indexed by search engines. Keep this in mind if you plan to have separate tabs or accordions for Reviews and Q&A instead of stacking them on the main PDP.