Generic (Other Platforms): Installing Yotpo Reviews (v1)
- DarkLight
Generic (Other Platforms): Installing Yotpo Reviews (v1)
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
This article will guide you through the steps of installing Yotpo Reviews on a generic eCommerce platform.
Who should use this guide?
- Use this guide if you’re a merchant using an eCommerce platform that is not listed as a Yotpo supported platform. Otherwise, we recommend you should use the relevant platform-specific guide. See supported platforms
- This guide is intended for Yotpo customers already using the Core API v1. If you're a new customer, we recommend you use our new installation guide.
Workflow
The minimal integration includes the following steps:
- Add the JavaScript library code to the <head> section
- Add the Reviews Widget and Star Rating elements to your product pages
- Once you've completed these steps, you need to sync your orders with Yotpo to start sending automatic review requests
- Add the Conversion Tracking code
Step 1 - Adding the JavaScript Library Code
Add the following to the <head> section:
<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/###YOUR APP-KEY###/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>Important:
- Replace the ###YOUR APP-KEY### placeholder with the App Key from the Yotpo Admin or the API user creation response
- For instructions on how to find your app key and your secret key, click here.
Step 2 - Adding the Reviews Widget and Star Rating Elements
1. To add the Reviews Widget to your website, add the following code snippet to your product pages:
<div class="yotpo yotpo-main-widget"
data-product-id="SKU/Product_ID"
data-price="Product Price"
data-currency="Price Currency"
data-name="Product Title"
data-url="The URL of your product page"
data-image-url="The URL of the product image ">
</div>Important:
Replace each data element with the appropriate values of your website and product attributes.
The data-product-id attribute only supports alphanumeric (a...z, A...Z, 0...9) and "_" and "-" symbols.
Reviews Widget - Example
Once you fill in the appropriate values, the review code should look like this:
<div class="yotpo yotpo-main-widget"
data-product-id="1957"
data-price="50"
data-currency="USD"
data-name="Soap"
data-url="www.item.com/soap"
</div>
- To add the Star Rating to your website, add the following code snippet to your product pages:
<div class="yotpo bottomLine"
data-yotpo-product-id="SKU/Product_ID">
</div>Important:
Replace each data element with the appropriate values of your website and product attributes.
The data-product-id attribute only supports alphanumeric (a...z, A...Z, 0...9) and "_" and "-" symbols.
The star rating will only appear next to products that have reviews. When the star rating is installed, if you click on it it will bring you to all the reviews of the product, which is why people usually insert the star rating code somewhere close to the product price near the top of the page.
Displaying specific review attributes
You can leverage metadata collected upon order creation to allow shoppers to filter reviews according to customer, order, and/or product-related fields such as membership type, location, delivery type, order history, and more!
If your Reviews Widget includes metadata filters, you have the option of configuring the widget to load in a pre-sorted and/or pre-filtered state according to the predefined or custom metadata params defined upon order creation.
Learn more in our API reference guide
Step 3 - Sending Orders to Yotpo
Retrieving a uToken
This API call uses your Yotpo app key and secret key to generate the API utoken necessary to authenticate most of Yotpo's API calls.
Note that utokens are valid for 14 days from the time they are generated. After 14 days, your utoken will expire and a new utoken must be generated.
For information on this API call, see Retrieving a utoken.
Can't find your Yotpo app key and secret key?
The app key and secret key are unique codes for your account. You need the app key to perform most API calls and the secret key to generate the utoken.
To find your app key and secret key, see this article
Creating an Order Within Yotpo
The relevant API calls for creating an order within the Yotpo system:
- To create a single order (this is useful for testing the integration): Create an Order Within the Yotpo System
- To create mass orders: Create Mass Orders Within the Yotpo System
Yotpo Tip:
Remember to take advantage of your Kickstart Credits. We recommend sending us past orders from the last two to 4 months (make sure you don't exceed your Kickstart Credit limit).
Step 4 - Conversion Tracking
Conversion Tracking Yotpo helps you leverage your reviews to drive traffic to your store, and increase your sales. The Conversion Tracking code enables you to measure those gains.
Following each successful checkout submission, Yotpo validates if the visit and sale was generated by Yotpo or self-served.
The Conversion Tracking code below should be loaded at the completion of each purchase, in the orderconfirmation page:
<script type="text/javascript">(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/{{APP_KEY}}/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script><script>yotpoTrackConversionData = {orderId: "######ORDER_ID######", orderAmount: "######ORDER_AMOUNT#####", orderCurrency: "######ORDER_CURRENCY#####"}</script><noscript><img src="//api.yotpo.com/conversion_tracking.gif?app_key={{APP_KEY}}&order_id=######ORDER_ID######&order_amount=######ORDER_AMOUNT#####&order_currency=######CURRENCY######" width="1" height="1"></noscript>Important:
Make sure to replace the two {{APP_KEY}} portions of the code with the App Key from your account. Please note that the brackets must be removed as well.
Additionally, replace the ######ORDER_ID#####, ######ORDER_AMOUNT##### - total amount paid for the order, and ######ORDER_CURRENCY##### portions of the code with the correct placeholders, as defined by your implementation or platform.
Can't find your app key? Click here
Was this article helpful?
