FeedOtter templates start life as high-quality, well-tested HTML email templates. By adding loops and tokens we can make them compatible with FeedOtter.
In the previous article we talked about the basic elements found in every FeedOtter template. Let's expand on that further by placing our LOOP code in an existing email and then adding some 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.
