Step 1. Create an API feed in Behold

To get started first connect a source and create an API feed.

Next you'll want to have your feed URL handy:

1. Navigate to the feeds page and click anywhere on your API feed to open the feed details page.
2. Click on your feed URL to copy it

Step 2. Import your Instagram feed into Klaviyo

1. Log in to Klaviyo
2. Click on your username in the bottom left, and navigate to the settings page
3. Go to Web Feeds and click on Add Web Feed
4. Name your web feed, in this case we're calling it "behold." Remember the name you choose. You'll need it later.
5. Paste the URL you copied from your Behold admin in the previous step into the Feed URL field
6. Request Method should be GET. Content Type should be JSON.
7. Click Add Data Feed. Your feed should validate and get added to Klaviyo.
8. Click preview. Your feed should look like the image below.

Step 3. Add your Instagram feed to an email template

Next, we'll show you how to add your feed to an email template.

In this example we create a simple row of three Instagram post images, but this technique can be used as a base to create a variety of layouts. You can easily include things like post captions as well with a little tweaking. More information can be found in the Klaviyo docs.

1. Go to Content -> Templates in the sidebar, and either select an existing template, or add a new one
2. Add a new 3-column layout section to your template.
3. Add a text block to the first column
4. Make sure your block and text area padding is set to 0
5. Click on the source code icon, and paste in the following code:

<div>
  <img
    style="width: 200px; height: 200px; display: block; margin-left: auto; margin-right: auto;"
    src="{{feeds.behold.0.mediaUrl}}"
    width="200"
    height="200"
  />
</div>

Repeat this process for the other two columns. When you paste in the code, you will make one change. Find this line: feeds.behold.0.mediaUrl, and update the 0 to a 1 for the second column, a 2 for the third column, etc.

So the code for the second and third columns will look like this, respectively:

<div>
  <img
    style="width: 200px; height: 200px; display: block; margin-left: auto; margin-right: auto;"
    src="{{feeds.behold.1.mediaUrl}}"
    width="200"
    height="200"
  />
</div>

<div>
  <img
  style="width: 200px; height: 200px; display: block; margin-left: auto; margin-right: auto;"
  src="{{feeds.behold.2.mediaUrl}}"
  width="200"
  height="200"
  />
</div>