With this Klaviyo integration, you can add Judge.me product review stars and average ratings to products in your Klaviyo emails. Adding social proof can help you promote your products better.
See other integrations with Klaviyo:
- Send review requests with Klaviyo
- Send follow-up emails to reviewers with Klaviyo
- Add Judge.me featured reviews (selected for the carousel) in Klaviyo emails
- Add a gallery of user-generated content from Instagram to Klaviyo emails
How the integration works
- After connecting Judge.me and Klaviyo using API key, you can create a Review Information Feed in Judge.me.
- You can then copy the feed URL and add to Klaviyo, and add a block of codes to retrieve the review information in your Klaviyo email templates.
- The codes will run and match the product ID in Klaviyo with the product ID in the Judge.me feed, so that the product review stars and average ratings will be displayed on the corresponding products. For quicker setup, we recommend you use a Klaviyo template with a prebuilt dynamic product feed, such as the abandonment card reminder emails.
How to set up the integration
Step 1: Add Klaviyo API key
For Klaviyo integration to work, you need to add Klaviyo API Key to Judge.me settings. If you have already created the API key for Judge.me, you can skip this step.
- In Klaviyo, go to Settings > API Keys.
- Click Create Private API Key and copy it.
- In Judge.me, go to Settings > Integrations > Admin Backend > Email Marketing Integration > Klaviyo.
- Paste your Klaviyo API Key and click Check.
Step 2: Enable the Review Information Feed in Judge.me
- In Klaviyo feeds section, toggle the bar to enable the Review Information Feed.
- Click Save Settings
- Click Copy to copy the feed URL
Step 3: Add the feed URL to Klaviyo
- Go to Klaviyo Settings > Web Feed, then click Add Web Feed
- Enter the feed details, then click Add Data Feed.
- Feed Name: JudgemeReviewInfoFeed
- Feed URL: the feed URL you copied from Judge.me
- Request Method: GET
- Content Type: JSON
Note: You can use any name for the feed, just make sure it's up to 64 characters long, consists of only letters, numbers and underscores. You will need to use exactly this name when adding the liquid code to the email templates in the next steps.
Step 4: Display review info from the feed in Klaviyo emails
- From Klaviyo Flows, choose the email template you want. In this example, we choose the Abandoned Card Reminder template.
- Click on the template, then click Create Flow.
- Click Edit Email to open the email editor
- Here you'll see a dynamic table with two columns: one for images and the other for texts. These are the placeholder where the product image and product title for each item will be retrieved and displayed.
- To display the product review stars and average ratings for each item:
- Click on the Content tab, then the [T] icon (text block), and the </> icon (source code).
- Paste the block of codes below in the text editor. We recommend you add the codes below the product title, as in the screenshot.
Depending on what email template is being used, the variables in the block of code may need to be adjusted, instead of "item.product.id" you can also try "event.product_id" for this line:
{% with productIdKlaviyo=item.product.id|slugify %}
<div>
{% with productIdKlaviyo=item.product.id|slugify %}
{% for product in feeds.JudgemeReviewInfoFeed.products %}
{% with productIdJdgm=product.product_id|slugify %}
{% if productIdJdgm == productIdKlaviyo %}
<span style="font-size: 18px; color: #399999; letter-spacing: 2px; margin-bottom: 12px; display: inline-block;">
{% if product.average_rating >= 4.5 and product.average_rating <= 5 %} ★★★★★
{% elif product.average_rating >= 3.5 and product.average_rating < 4.5 %} ★★★★☆
{% elif product.average_rating >= 2.5 and product.average_rating < 3.5 %} ★★★☆☆
{% elif product.average_rating >= 1.5 and product.average_rating < 2.5 %} ★★☆☆☆
{% elif product.average_rating >= 1 and product.average_rating < 1.5 %} ★☆☆☆☆
{% endif %}
</span>
<span>{{ product.review_count }}
{% if product.review_count == 1 %}
review
{% else %}
reviews
{% endif %}
</span>
{% endif %}
{% endwith %}
{% endfor %}
{% endwith %}
</div>
- If you wish to change the star color, you can do so on the style attribute of the <span> element that contains the stars. By default we use Judge.me brand color: #399999.
<span style="font-size: 18px; color: #399999; letter-spacing: 2px; margin-bottom: 12px; display: inline-block;">
- Click on the </> icon again for the changes to take effect.
- Click Preview and Test to preview your email with a real product.
- You can also send a test to your own email.
- Here is how your email will look like in reality
Step 5: Save your email
After you are done, click Save and Exit. Then continue to customize your email flow and activate it when you are ready!