HomepageDocumentationGet FeedOtter

Anatomy of a FeedOtter Template

FeedOtter is a powerful tool for automating emails that contain RSS and web-based content. In this documentation, you will find technical explanations, sample code, and details on how to create an HTML email template that displays data when used in the FeedOtter app.

Example 1:

Like other email software FeedOtter works best with a well-designed, well-tested HTML code email template. After a template has been created, coded, and tested using a compatibility tool such as Litmus is when you should add the necessary FeedOtter code.

The heart and soul of a FeedOtter template is a FOR loop that will wrap block(s) of HTML where you wish your RSS/article content to display.

Here is an example of a FeedOtter HTML email using a FOR loop and displaying the Title and an anchor link to the article webpage.

<html>
<body>

<!--## [% for post in feedotter.posts %] ##-->
<table width="100%" style="border-bottom:2px dotted #ccc">
    <tr width="100%">
        <td width="100%">
            <h1>[[post.post_title]]</h1>            
            <a href="[[post.post_url]]" target="blank">Read More</a>            
        </td>
    </tr>
</table>
<!--## [% endfor %] ##-->

</body>
</html>

Line 4 - This is the opening of the FOR loop. This tells FeedOtter where to start to loop over article content.

Lines 5 through 12 - This is HTML that will be repeated for each article present in a FeedOtter automation.

Line 13 - This is the ENDFOR. This tells FeedOtter where the end of the loop is. All HTML between the FOR loop and ENDFOR line will be duplicated.

(optional) Special Comment Wrappers

// FeedOtter FOR loops and IF statements typically have a special comment wrapper:
<!--## ... ##-->
// These are optional but they are a best-practice and will make working with an email in tools like Dreamweaver better.

The number of loop passes is determined by the Max Posts setting in the FeedOtter UI.

Example 2:

Here is another example of a FeedOtter HTML template this time we will examine it backwards by looking at the styled email displaying multiple articles.

Let's break this design down:

Logo - This is hard-coded with the image hosted in your email software or website.

"3 Useful Ways..." article - The "loop" block. This is where the loop exists.

"A/B Subject Line..." article + 3 more posts - Automatically created by the FeedOtter loop

Footer - Hard-coded into the HTML template. The footer should also include an Unsubscribe or preference center links specific to your email software.

Taking a closer look at the looping area of the HTML to see what a more "styled" template really looks like. Anything that looks like [[ something ]] is a FeedOtter token and either inserts data from the RSS feed or inserts a value editable in the FeedOtter application UI.

Last updated