This guide details how you can integrate Yotpo Reviews and Yotpo Visual UGC with your Product Recommendation platform or features to add social proof to your experience and increase user engagement for shared merchants.
Main use cases covered in this guide:
- Display top reviews or sentences for a product
- Display the Star Rating for a product
- Display customer photos for a product
Have you registered your app yet?
Before you start building your app on top of Yotpo’s App Developer API, you first need to register it with us. If you haven’t done so yet, refer to the steps in our Welcome guide.
Display top reviews or sentences for a product
There are 3 different options for returning a product’s average rating and review count (published by the merchant):
- Returning the HTML & CSS payload of the Yotpo widget using API
- Returning the average score and review count via API (as data)
1. Display top reviews using Yotpo’s on-site widgets
Yotpo widgets are HTML snippets that can be installed on site, and together with the Yotpo JS Library and the correct product_id will retrieve the reviews for that product from Yotpo and display them as designed within the Yotpo platform.
- The API key that is needed in the JS Library script is returned by the Yotpo App Market OAuth flow (step 1.3).
- The product ID used in the Yotpo widgets is the “external product ID” provided from the e-commerce platform connector or merchant (if integrated via API) - see
this guide to find the product ID on a website that is using Yotpo (merchants can also retrieve their product catalog from Yotpo using CSV or API).
Using Ajax to reload the Yotpo widget:
Since Yotpo loads a-sync, you may need to reinitialize Yotpo’s widgets using Ajax following this guide.
2. Return the HTML & CSS payload of the Yotpo widget using API
Retrieve the HTML snippet via App Developer API and repeat the above (a-c) sections. The difference in this section is that the HTML snippet of the review widget can be retrieved and installed into specific places on your site and not hardcode it to the site theme/template.
Please note that the look and feel that was defined in the Yotpo admin dashboard will apply for the 2 sections above.
3. Retrieve the reviews content - Get top product reviews and AI sentences
Use the best reviews or best sentences endpoint to retrieve your top product reviews. This endpoint will return only published reviews.
Make sure you provide the
external_product_id parameter to pull relevant reviews about the actual product and not store or site reviews. Since these endpoints utilize an AI (NLP) engine that works on English reviews only, you can use the top reviews endpoint as an alternative endpoint for non-English language stores and as a fall-back when a product does not have enough reviews with a positive sentiment score. If the top reviews endpoint also comes back empty (there are no published reviews that meet the criteria), we recommend returning the top reviews for product ID “yotpo_site_reviews”. This will return the top reviews the merchant collected on their brand in general. Learn more in this help article.
Display the Star Rating for a product
There are 2 options to display the Star Rating:
- Install Yotpo’s HTML snippet and JS on pages you want to display in the Review widget
b) Add the Star Rating element to the desired place.
c) Populate the ‘data-product-id’ value in the HTML snippets with the platform product_id (the same product_id that will show up in Yotpo catalog)
- Pull a single product’s star rating in real-time. Use the product star rating endpoint and display that product’s ‘average_score’.
Display customer photos for a product
Display photos or videos that were handpicked and published by the brand on abandoned cart messages and promotional communications by pulling them from the product images endpoint (either in real-time or storing them and updating them daily). You can retrieve ‘Favorited’ images first - these are images the merchant marked as a favorite while publishing the content, so it will get prioritized when displayed.
Contact us at [email protected]
Updated 5 months ago