Skip to main content
All CollectionsIntegrationsKlaviyo
Displaying Review Content in Klaviyo Emails
Displaying Review Content in Klaviyo Emails

Dynamic product and company review content within Klaviyo, perfect for Cart Abandonment Emails!

Mollie Herbert avatar
Written by Mollie Herbert
Updated over a week ago

REVIEWS.IO offers the ability to show latest company or product reviews in your Klaviyo emails. This is especially good for abandoned cart emails.


Navigation πŸ“

Navigate to Integrations >> Klaviyo

Note: You will need to use a Klaviyo Text block, and edit the source code for all of the widgets below. This will not work if you use an HTML block


Company Review Content

Displaying Your Latest 5-Star Review In Your Klaviyo Email Templates

1) In Klaviyo, click your user name in the bottom left navigation, then click Settings and then the "Web Feed" button and finally "Add Web Feed"

2) Enter the name "ReviewsIOReviews" and the URL

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=store_review

The Request Method should be set to "GET" and the Content Type should be "JSON".

3) You'll now be able to display your latest 5-star reviews in your Klaviyo email templates. To get started, create a new text block in your email template, click the source button and add the following:

{% for review in feeds.ReviewsIOReviews.reviews | slice: "3" %}
<table cellpadding="0" cellspacing="0" background="#ffffff" style="background-color:#ffffff;width:100%" width="100%">
<tbody>
<tr>
<td style="padding-bottom:15px;">
<div style="background-color:#fff;border-radius:6px;border-bottom:1px solid #e1e2e4;padding:10px 15px 20px;">
<p style="font-size:14px;margin:0;">
<b>###{{ review.reviewer.first_name }}</b>
&nbsp;
<span style="font-size:18px; color:#f47e27; letter-spacing:2px;" color="#f47e27">
{% if review.rating == 5 %}
β˜…β˜…β˜…β˜…β˜…
{% elif review.rating == 4 %}
β˜…β˜…β˜…β˜…
{% elif review.rating == 3 %}
β˜…β˜…β˜…
{% elif review.rating == 2 %}
β˜…β˜…
{% elif review.rating == 1 %}
β˜…
{% endif %}
</span>
</p>
<p style="font-size:14px; margin:0;">
"###{{ review.comments | truncatechars: "128" }}"
</p>
<p style="font-size:12px;text-align:right;color:#ccc; margin:0;">
###{{ review.date }}
</p>
</div>
</td>
</tr>
</tbody>
</table>
{% endfor %}

For more information on using event data in Klaviyo, read their guides here and here.


Product Review Content

Displaying Your Latest 5-Star Product Review In Your Klaviyo Email Templates

1) Follow the above instructions to add a Data Feed to Klaviyo.

Enter the name "ReviewsIOProductReviews" and the URL

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=product_review

2) If you like to show reviews for a specific product, add a SKU parameter to the URL, eg

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=product_review&sku=ABC-123.

3) You'll now be able to display your latest 5 star product reviews in your Klaviyo email templates. To get started, create a new text block in your email template, click the source button and add the following:

{% for review in feeds.ReviewsIOProductReviews.reviews | slice: "3" %}
<table cellpadding="0" cellspacing="0" background="#ffffff" style="background-color:#ffffff;width:100%" width="100%">
<tbody>
<tr>
<td style="padding-bottom:15px;">
<div style="background-color:#fff;border-radius:6px;border-bottom:1px solid #e1e2e4;padding:10px 15px 20px;">
<p style="font-size:14px;margin:0;">
<b>###{{ review.reviewer.first_name }}</b>
&nbsp;
<span style="font-size:18px; color:#f47e27; letter-spacing:2px;" color="#f47e27">
{% if review.rating == 5 %}
β˜…β˜…β˜…β˜…β˜…
{% elif review.rating == 4 %}
β˜…β˜…β˜…β˜…
{% elif review.rating == 3 %}
β˜…β˜…β˜…
{% elif review.rating == 2 %}
β˜…β˜…
{% elif review.rating == 1 %}
β˜…
{% endif %}
</span>
</p>
<p style="font-size:14px; margin:0;font-style:italic">
Reviewed: ###{{ review.product_name }}
</p>
<p style="font-size:14px; margin:0;">
"###{{ review.comments | truncatechars: "128" }}"
</p>
<p style="font-size:12px;text-align:right;color:#ccc; margin:0;">
###{{ review.date }}
</p>
</div>
</td>
</tr>
</tbody>
</table>
{% endfor %}

Instagram & UGC Content

Display UGC from Instagram, and your reviews

Follow the above instructions to add a Data Feed to Klaviyo. Enter the name "ReviewsIOInfluencers" and the URL

https://api.reviews.co.uk/instagram/widget?store=[YOUR STORE KEY]&include_image_url=1

When the above step is done, you'll be able to add UGC galleries to your Klaviyo emails. To do so, go to UGC Widget Editor, click the Embed in Klaviyo Email button, select the gallery layout you prefer and use the provided code in your Klaviyo emails.


Product Specific Review Feed

Display 5-star product reviews, based on the SKUs within the email

Follow the above instructions to add a Data Feed to Klaviyo. Enter the name "ReviewsSkuFeed" and the URL:

Copy

https://api.reviews.co.uk/product/ratings/klaviyo-feed?store=[YOUR STORE KEY]

Create a new text block in your email template, click the source button and add the following code. Don't forget to ensure you are using the new feed for the email you're updating.

<table cellpadding="0" cellspacing="0" background="#ffffff" style="background-color:#ffffff;width:100%" width="100%">
<tbody>
{% for lineItem in event.extra.line_items %}
{% for review in feeds.ReviewsSkuFeed.reviews %}
{% if lineItem.sku == review.sku %}
<tr>
<td style="padding-bottom:15px;">
<div style="background-color:#fff;border-radius:6px;border-bottom:1px solid #e1e2e4;padding:10px 15px 20px;">
<p style="font-size:14px; margin:0;">
"###{{ review.review | truncatechars: '128' }}"
</p>
<p style="font-size:14px; margin:0;font-style:italic">
Reviewed: ###{{ review.name }}
</p>
<p style="font-size:14px;margin:0;padding-bottom:0;">
<span style="font-size:18px; color:#f47e27; letter-spacing:2px;" color="#f47e27">
{% if review.review_rating == 5 %}
β˜…β˜…β˜…β˜…β˜…
{% elif review.review_rating == 4 %}
β˜…β˜…β˜…β˜…
{% elif review.review_rating == 3 %}
β˜…β˜…β˜…
{% elif review.review_rating == 2 %}
β˜…β˜…
{% elif review.review_rating == 1 %}
β˜…
{% endif %}
</span>
<b>###{{ review.reviewer }}</b>
</p>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
{% endfor %}
</tbody>
</table>

Product Review Block

Display 5-star product reviews alongside product information

Follow the above instructions to add a Data Feed to Klaviyo. Enter the name "ReviewsSkuFeed" and the URL:

https://api.reviews.co.uk/product/ratings/klaviyo-feed?store=[YOUR STORE ID]

Select Review Aggregate to show an overall product rating, or Product Review to display the latest 5-star review

Create a new text block in your email template, click the source button and add the following code. Don't forget to ensure you are using the new feed for the email you're updating.

<table cellpadding="0" cellspacing="0" background="#ffffff" style="background-color:#ffffff;width:100%" width="100%">
<tbody>
{% for review in feeds.ReviewsSkuFeed.reviews %}
{% if item.sku == review.sku %}
<tr>
<td style="padding-bottom:15px;">
<p style="font-size:14px;margin-top:0;padding-bottom:0px;">
<span style="font-size:18px; color:#f47e27; letter-spacing:2px;" color="#f47e27">
{% if review.rating_rounded == 5 %}
β˜…β˜…β˜…β˜…β˜…
{% elif review.rating_rounded == 4 %}
β˜…β˜…β˜…β˜…
{% elif review.rating_rounded == 3 %}
β˜…β˜…β˜…
{% elif review.rating_rounded == 2 %}
β˜…β˜…
{% elif review.rating_rounded == 1 %}
β˜…
{% endif %}
</span>
<b>###{{ review.rating }} / 5</b>
</p>
<p style="font-size:14px;margin:0;padding-bottom:0;">
from <b>###{{ review.review_count }}</b> reviews
</p>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>

An example of how this looks using the 'Product Review' option:


Product Review Social Proof

Display a social proof image, generated based on the first SKU within the email

First, select the background you'd like to use. By default, the system will use a random background from our preexisting collection of images

Then follow the above instructions to add a Data Feed to Klaviyo. Enter the name "ReviewsSkuFeed" and the URL:

https://api.reviews.co.uk/product/ratings/klaviyo-feed?store=[YOUR STORE ID]&background_random=image

Then create a new text block in your email template, click the source button and add the following code. Don't forget to ensure you are using the new feed for the email you're updating.

<table background="#ffffff" cellpadding="0" cellspacing="0" style="background-color:#ffffff;width:100%" width="100%">
<tbody>
{% for lineItem in event.extra.line_items %}
{% if forloop.counter == 1 %}
{% for review in feeds.ReviewsSkuFeed.reviews %}
{% if lineItem.sku == review.sku %}
<tr>
<td style="text-align: center;">
<img src="###{{ review.social_proof }}" style="width: 100%;" />
</td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>

An example of how this looks


Additional Klaviyo Features

NOTE: ​If you use our review tagging feature which tags reviews with user language, you can add that to as a data feed URL if required:
eg:

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=store_review

becomes:

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=store_review&tag=FR

For French reviews only.​

To show only reviews with comments, the data feed will become:

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=store_review

becomes:

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=store_review&must_have_body=1

To show 4 and 5-star reviews, the data feed will become:

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&rating=5&type=store_review

becomes:

https://api.reviews.co.uk/klavio/reviews/data?store=[YOUR STORE KEY]&per_page=3&minRating=4&type=store_review

To show only reviews with comments, the data feed will become:

To change the date format in the widget, If you replace

###{{review.date}}

with

###{{review.date_created|format_date_string|date:'F d, o' }}

You can format the date into different ways. In the above case, it would show a date in this format:

February 11, 2016

The date part can be changed also, for example:

February 26, 2016: 
###{{ review.date_created|format_date_string|date:'F d, o' }}

26 February 2016:
###{{ review.date_created|format_date_string|date:'d F o' }}

02-26-2016:
###{{ review.date_created|format_date_string|date:'m-d-Y' }}

26-02-2016:
###{{ review.date_created|format_date_string|date:'d-m-Y' }}

2/26/16 (no leading 0s):
###{{ review.date_created|format_date_string|date:'n/j/y' }}

26/2/16 (no leading 0s):
###{{ review.date_created|format_date_string|date:'j/n/y' }}

Feb 11:
###{{ review.date_created|format_date_string|date:'M d' }}

11 Feb:
###{{ review.date_created|format_date_string|date:'d M' }}

Since this is Klaviyo's functionality, we cannot guarantee if using a format that includes month names will translate the months, but there's other options there to just show numerical dates.

Did this answer your question?