Once you understand the fundamentals of a FeedOtter template and its requirements, we’ll build on that knowledge by inserting our LOOP code into an existing email and adding common tokens to display post data in the desired location.
Original HTML Email Template
Here is a plain HTML email template. Our logo and footer text are coded in place and our email team created some fake placeholder content.
Content Loop Placement
View the HTML code of your template and look for a suitable <table> or <tr> that wraps around the first row of content. This will vary by email but it is very important to look up and down the HTML tree to find the most-outward row or table that encloses the region of content you wish to repeat.
Place the loop start code above the repeating area's opening HTML tag:
<!--## [% for post in feedotter.posts %] ##-->
and the end loop code after the related closing tag.
<!--## [% endfor %] ##-->
This is a technical job and requires knowledge of basic HTML structure, opening and closing tags. If the loop code is placed in the wrong place your template will never work correctly or compatibility may suffer. If you are unsure where to place this code please ask for help from your HTML email coder.
Once you have placed the FeedOtter loop around a row of content you can delete all other rows. Since we are looping through the content only 1 article row, wrapped in the loop code is needed.
Now our email looks like this:
Adding Post Tokens
Adding Post Tokens inside our loop will allow FeedOtter to display your articles content. Here are the common tokens used.
Paste the appropriate token into your HTML email code in-place of the placeholder data.
The Most Common Post Loop Tokens
Merge code
Description and Usage
[[post.post_title]]
The title of an article.
[[post.post_excerpt_text]]
The description text or slug for an article. This value is automatically created by using the best option between the Description text and Content. All incoming HTML is stripped.
[[post.post_url]]
The website URL of the article.
[[post.image_url]]
The best featured image that represents the article as chosen by our algorithm. Learn more about how FeedOtter selects campaign
images here.
The [[post.image_url]] token is not relevant to the example template we are displaying but it is very common to use this to display a great looking featured image with each article.
Loop and Tokens in Place
With the loop and tokens in place our HTML email look like this:
...and if we preview it in FeedOtter's interface we can see our loop and tokens successfully merging with real content.
Full Code
Here is the full code example of the finished email. Paste this example below into your FeedOtter account(see Moving your email template to FeedOtter to learn how) to see how our loop and tokens appear when used with FeedOtter.
We recommend testing your FeedOtter campaigns with a test subscriber list of contacts before sending to your real audience.
When we test internally, we set our ESP settings to target a test/internal list of subscribers:
Marketo - Done in Marketo on the ### - Email Setup program
All other ESPs - Done in the FeedOtter Integration settings
Then use FeedOtter's Send Now feature to trigger an instant send from your ESP. This will allow you to verify the full email send process and delivered email code.
