Skip to main content
Adding UGC in Klaviyo emails
Updated over a week ago

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

  • 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!

Did this answer your question?