Add a gallery of user-generated content from Instagram to Klaviyo emails : Judge.me

Available on the Awesome plan

With this Klaviyo integration, you can add a text block in your Klaviyo emails and display the user-generated content (UGC) like photos and videos that you are tagged on Instagram. Adding social proof can help you promote your products better.

See other integrations with Klaviyo:

How the integration works

This feature depends on the Judge.me UGC media grid, so you need to connect your Instagram account with Judge.me, enable the UGC media grid and publish some photos in the UGC dashboard.
After connecting Judge.me and Klaviyo using API key, you can create a UGC Widget Feed in Judge.me, then copy the feed URL and add to Klaviyo Wed Feeds settings.
Then, you can add a text block of codes to retrieve the photos from your UGC media grid and display them on your Klaviyo emails.
The codes will run and randomly picked up to six photos that you published in your Judge.me UGC media grid.

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.

This feature will enable you to show stars and aggregate product ratings on your emails. To enable this feature:

Step 2: Enable the UGC Feed in Judge.me

In Klaviyo feeds section, toggle the bar to enable the UGC 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: JudgemeUGCwidgetfeed
- 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 user-generated content from the feed in Klaviyo emails

From Klaviyo Flows, choose the email template you want, then click on it to Create Flow.

Click Edit Email to open the email editor

To add the user-generated content, follow these steps:
- Add a text block

Click on the </> icon (source code), then paste the codes 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>