Step 1: Connect Judge.me with Klaviyo via OAuth
From your Judge.me admin, go to Settings > Integrations.
Search for Klaviyo, then click the Klaviyo integration card.
β
Click Connect.
βClick Allow to let Judge.me access your data in Klaviyo to enable the integration.
β
Step 2: Enable UGC feed
Once the integration has been enabled, check the box Enable UGC feed in the Review feeds section. Click Save.
You'll also need to enable your UGC widget to complete this step.
Step 3: Add the feed to Klaviyo
From your Klaviyo admin, go to Settings > Other > Web feeds.
Click Add web feed and fill in the feed details:
Feed Name | JudgemeUGCwidgetfeed |
Feed URL | Paste in the feed URL from Step 2 |
Request Method | GET |
Content Type | JSON |
Click Add Data Feed.
Step 4: Use the feed in Klaviyo emails
From your Klaviyo admin, go to Flows and select the flow you want.
Click the Email block on your flow and click Edit.
Then click Edit email.
Add a new Text block.
Click the </> icon and paste in the code below:
<table border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed; width:100%; border:none; max-height: 400px; height: 100%" width="100%">
<tbody>
{% for thumbnail in feeds.JudgemeUGCwidgetfeed.ugc_media_grid|slice:'0:6' %}
{% if forloop.counter0 == 0 or forloop.counter0 == 3 %}
<tr style="height: 50%;">
{% endif %}
<td style="width:auto; height: 100%; overflow:hidden; vertical-align:middle; padding:5px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height:100%;">
<tbody>
<tr>
<td align="center" style="word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="height:100%; border-collapse:collapse; border-spacing:0px;">
<tbody>
<tr>
<td style="height:100%; border:0; padding:0;" valign="middle">
<a href="{{ thumbnail.products_urls|first }}" target="_blank" style="height:100%;">
<img alt="Post {{ forloop.counter }}" src="{{ thumbnail.thumbnail_url }}" style="display:block; outline:none; height:auto; width:100%;" title="Post {{ forloop.counter }}">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
{% if forloop.counter0 == 2 or forloop.counter0 == 5 %}
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
Click the </> icon again to apply the changes.
Click Preview and Test to preview your email with a real product.
Once done, save your email and activate the flow.
Here's how your email might look:
Follow us on LinkedIn
π’ Stay in the loop! Follow Judge.me on LinkedIn for the latest product updates, tips, and feature launches.