Adding Q&A (PDPs)

Note: Display 4.0 documentation is provided as a courtesy for clients on this older version of PowerReviews. We recommend contacting your Account Manager to discuss upgrading to our newer Display 4.1 version as soon as possible.

This article discusses how to implement Q&A on your product detail pages (PDPs), if the Review components are already in place. To learn more about Q&A, click here. 

Components

The Q&A components include:

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

Installations Steps

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 Questions & Answers Snippet container
  Example: <div id="pr-questionsnippet"></div>
  
  
• Install the Questions & Answers Display container
  Example: <div id="pr-questiondisplay"></div>

3. Locate the PowerReviews ui.js library and render function and insert the following two lines in the components object.

<script src="https://ui.powerreviews.com/stable/4.0/ui.js" async></script>
         
 <script>
POWERREVIEWS.display.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.

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