Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
PowerReviews
Official extension
Version: 2.4.1
Latest version: 2.4.1

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}

The PowerReviews app provides a way to bring your PowerReviews content into your VTEX store. The app also implements the PowerReviews Checkout Beacon during checkout, sending customer purchase data to the PowerReviews platform.

Configuration

Before you can start using the app, you will need an existing PowerReviews account and API key.

Step 1 - Defining the app settings

In your VTEX account's admin, perform the following actions:

  1. Access the Apps section and then My Apps.
  2. Select the PowerReviews app box.
  3. Complete the following required fields in the Settings section:
  • App Key - The API Key provided by PowerReviews.
  • Merchant ID - Your unique PowerReviews merchant ID.
  • Merchant Group ID - Your PowerReviews merchant group ID.
  • Client ID - Your PowerReviews Client ID
  • Client Secret - Your PowerReviews Client Secret
  • Send Email After Invoicing - Instead of sending email after checkout, we can send email after an order has been invoiced. Enabling this disables purchase pixel's ability to track checkout
  • API Unique Id - The product field used as the identifier (or pageId) on PowerReviews.

Optionally, the Use Legacy Review Display Component checkbox allows you to use the PowerReviews Review Display component instead of the VTEX Reviews component.

If needed, provide a URL path to a CSS stylesheet to override the styles of the PowerReviews Write-a-Review, Questions & Answers, or Review Display components.

Step 2 - Update your store theme

  1. Add the powerreviews app as a peerDependency in your theme's manifest.json file:

_10
"peerDependencies": {
_10
+ "vtex.powerreviews": "2.x"
_10
}

  1. If not already present, add the following to your theme's dependencies:

_10
"vtex.product-review-interfaces": "1.x",
_10
"vtex.product-summary-context": "0.x",
_10
"vtex.product-context": "0.x",
_10
"vtex.store-header": "2.x",
_10
"vtex.pixel-interfaces": "1.x",
_10
"vtex.store-image": "0.x",

Step 3 - Defining the app's blocks

The PowerReviews app integrates with the following store framework blocks.

Block nameDescription
product-reviewsDisplay a paginated list of reviews for the product being viewed. This must be placed on the store.product page.
product-rating-summaryDisplay the average rating for the product being viewed. This must be placed on the store.product page.
product-rating-inlineDisplay the average rating for the product being viewed, intended for use on the product shelf.
product-review-formDisplay the PowerReviews Write-a-Review form component. This must be placed on the product-review-form page.
product-questions-and-answersDisplay the PowerReviews Questions & Answers component for the product being viewed.

An example of the blocks above in use:


_10
"store.product": {
_10
"blocks": [
_10
"product-rating-summary",
_10
"product-reviews",
_10
"product-questions-and-answers"
_10
]
_10
}


_10
"store.product-review-form": {
_10
"blocks": [
_10
"product-review-form"
_10
]
_10
}

See also
VTEX App Store
VTEX IO Apps