Adding the Write-a-Review Form

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 the Write-a-Review (WAR) form. To learn more about the WAR form and its features, click here. 

Wrapper Page

You must first create a standalone wrapper page on your website before implementing the WAR form. This wrapper page is a critical integration piece; it hosts the PowerReviews WAR form code, allows the WAR form to render correctly, and ensures your Follow-Up Email links to the right place. 

As a best practice, PowerReviews recommends creating your wrapper page using a URL similar to the following: www.yourdomain.com/write-a-review. Be sure to include your site's branded header and footer into the wrapper page for a seamless site experience for your customers, with the PowerReviews WAR code in the content container. You can reference the PowerReviews Demo Store to see an example of what a wrapper page looks like after code is applied to the page.

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. Create the standalone wrapper page, as described above.
3. Install your content container:

• Example: <div id="pr-write"></div>

4. 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 your content container.

<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',
   on_submit:function(config, data){
         window.scrollTo(0,0);
         },
   components: {
      Write: 'pr-write',
   }
 });
</script>

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