Before your begin

To display the UGC Media Grid in Klaviyo marketing emails, you'll first need to connect your Instagram account and publish at least 1 post. See this article for more details.

How it looks

Here's how the UGC Media Grid might look in a Klaviyo marketing email:

Adding Judge.me UGC in Klaviyo emails

Step 1: Connect Klaviyo and Judge.me

To connect Klaviyo and Judge.me:

From your Judge.me admin, go to Settings > Integrations > Klaviyo.
Click Connect.
In the authorization pop-up, click Allow to authorize Judge.me to access your Klaviyo data.

Step 2: Enable the feed

Once you've connected Klaviyo and Judge.me, to enable the UGC feed:

From your Judge.me admin, go to Settings > Integrations > Klaviyo.
Scroll down to the Review feeds section.
Click the checkbox next to Enable UGC feed.
Click Save.

Step 3: Add the feed to Klaviyo

To add the UGC 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

To add the UGC feed to a Klaviyo email:

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>