Adding a site review block to your Klaviyo emails will dynamically pull in the most recent site reviews.
Before you begin
If it isn't already, the site review module will need to be toggled on, and the Okendo x Klaviyo integration enabled.
Add the Product Review Block Data Feed
Open your Okendo app
Click Settings > Integrations > Copy User ID.
Insert the user ID twice in the feed and add the web feed as above:
https://api.okendo.io/v1/stores/UserID/products/shopify-site-reviews-UserID/reviews?limit=5&orderBy=rating%20desc
Navigate to your Data Feeds in Klaviyo and add a new web feed using the below:
Required name: site_reviews
Request Method: GET
Content-Type: JSON
Adding the Review Block
Drag and drop a new text block into your email where you'd like the review block to show.
Click on the text block > source > insert the below code > save > preview. If the reviews don't populate, double-check that the user ID and product ID are correct. If the store hasn't collected any site reviews, nothing will show.
{% with maxReviewCount=5 starHex='000000' %}
<h4 style="text-align: center;padding-top:20px;">SEE WHAT OTHERS ARE SAYING</h4>
{% for review in feeds.site_reviews.reviews %} {% if maxReviewCountPerProduct == 0 or forloop.counter <= maxReviewCount %}
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:5px 25px 0px 25px;word-break:break-word;">
<div style="font-family:Century Gothic, sans-serif;font-size:13px;line-height:18px;text-align:center;color:#1d2236;">
<div><img alt="1 Star" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{ starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="2 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{ starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="3 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{ starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="4 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{ starHex | lower }}.png" style="padding:0 1px" width="20" /> <img alt="5 Stars" height="18" src="https://d3hw6dc1ow8pp2.cloudfront.net/emails/review/star-filled-{{ starHex | lower }}.png" style="padding:0 1px" width="20" /></div>
</div>
</td>
</tr>
<tr>
<td align="center" class="align-center" style="font-size:0px;padding:0px 25px 5px 25px;word-break:break-word;">
<div style="font-family:'Source Sans Pro', Trebuchet MS, sans-serif;font-size:18px;font-weight:bold;line-height:22px;text-align:center;color:#4a4a49;">{{ review.title }}</div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:0 25px 5px 25px;word-break:break-word;" vertical-align="middle">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" role="presentation" style="border:none;cursor:auto;mso-padding-alt:10px 25px;" valign="middle">
<p style="font-size:16px; line-height:16px;">{{ review.body|truncatewords:50 }}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" class="align-center" style="font-size:0px;padding:0 25px 15px 25px;word-break:break-word;">
<div style="font-size:14px;line-height:22px;text-align:center;color:#4a4a49;">{{ review.displayName }}</div>
</td>
</tr>
</tbody>
</table>
{% endif %} {% endfor %} {% endwith %}
Customizations to the Review block
The review block offers some degree of customizability that can be done by changing the variables in the first line of the code.
⚠️ NOTE: Please make sure that there are no spaces between the equal sign and the value. Adding a space will result in a syntax error and Klaviyo will reject the template.
Limit the Number of Product Reviews in the Review Block
Update this value to control the max number of products that show reviews in the block.
Locate “maxProductCount” in the code block. The 0 value is our standard value and will display reviews for up to 5 products in the email.
Changing this value to 1 will display reviews from only the first product in the email. Changing this value to 2 will display reviews from the first 2 products in the email... and so on.
Limit the Number of Reviews that Show Per Product
Update this value to control the number of reviews that will show per product in the block.
Locate “maxReviewCountPerProduct” in the code block. The 0 value is our standard value and will display the 5 most recent 5-star published reviews per product.
Changing this value to 1 will display only 1 review for each product in the email. Changing this value to 2 will display 2 reviews for each product in the email... and so on.
Change Star Colour
Our standard star colour is hex 000000. To change the star colour, locate “starHex” in the code block and update your hex value accordingly.
⚠️ Note: Not all hex values have been generated. If you have broken star images:
Log into your Okendo app
Click on “emails” under “mail”
Click on “review reply”
Click on “styling”
Toggle on “override global styling”
Change the star colour to your hex colour
Wait for the live preview to update
Check Klaviyo again.