❗️This feature is available on Power plans and above.

Adding a review block to your Klaviyo emails will dynamically pull in the most recent 5-star published reviews.

To display reviews from a specific product, refer to this help article.

In this article, you will learn about;

Before you begin
Add the product review block web feed
Adding the review block
Customizations to the review block
Limit the number of product reviews in the review block
Limit the number of reviews that show per product
Change star color

Before you begin

If it isn't already, the Okendo and Klaviyo integration will need to be enabled in the Okendo admin - see here for instructions.

Add the Product Review Block Web Feed

Open the Okendo app.
Click Settings > Integrations > Copy User ID.
Insert the User ID into the feed URL as shown below: https://api.okendo.io/v1/stores/Add_User_ID_Here/reviews?limit=5&orderBy=rating%20desc
Navigate to Web Feeds in Klaviyo and insert the above:

Feed name: store_reviews

Feed URL: paste in the url from step 3

Request Method: GET

Content-Type: JSON

Adding the Review Block

Drag and drop a new HTML block into your email where you'd like the review block to show.

2. Insert the code below:

{% with maxReviewCount=5 starHex='000000' %}
<h4 style="text-align: center;padding-top:20px;">SEE WHAT OTHERS ARE SAYING</h4>
{% for review in feeds.store_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.