Available on the Awesome plan
Step 1: Create Klaviyo API key
From your Klaviyo admin, go to Settings > API Keys.
Click Create Private API Key and name your key "Judge.me".
Select Grant applications full access for every API scope.
Click Create.
Step 2: Enable UGC feed
From Judge.me admin, go to General Settings > Integrations > Admin Backend > Email Marketing Integration.
Select Klaviyo.
Paste in the API key you created in Step 1 and click Check.
Once the API key is added, enable UGC Feed and click Save. You'll also need to enable your UGC widget to complete this step.
For other platforms
For other platforms
From your Judge.me admin, go to Settings > Integrations > Admin Backend > Email Marketing Integration.
Select Klaviyo.
Paste in the API key you created in Step 1 and click Check.
Once the API key is added, enable UGC Feed and 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:
If you need help adding UGC in Klaviyo emails, contact our team at [email protected]. We're available to help 24/7!