HomepageDocumentationGet FeedOtter

Getting Started with FeedOtter Templates

When building custom email templates with FeedOtter’s template language, it’s essential to follow key guidelines. These best practices form the foundation for creating effective and functional templates.

In this article, you'll learn how to get started with FeedOtter's template language.

Things to know

  • FeedOtter uses a slightly modified version of the TWIG template syntax

Loops

Loops are the heart of every FeedOtter email. FeedOtter displays articles and content by looping through the number of articles you wish to show. In FeedOtter they look like this:

<!--## [% for post in feedotter.posts %] ##-->
... display content from an individual ITEM ...
<!--## [% endfor %] ##-->

To learn more about loops and how they are used read Anatomy of a FeedOtter Template.

Conditionals

You can show or hide portions of an email based on properties in the content using conditionals such as IF and IF/ELSE.

For a full list of conditionals and example code read Conditionals.

Merge tokens

Merge tokens allow you to insert article data from RSS feeds and other content sources directly into your email.

  • Use campaign tokens to insert data related to the FeedOtter campaign, such as the date an automated email is sent or the name of the campaign in the <title> tag of an email.

  • Use post loop tokens INSIDE the LOOP of your FeedOtter email. These tokens will insert data from your source, like post title, description, featured image, URL, etc.

  • Use UI tokens to interact with the FeedOtter "edit" UI. Examples include primary color and button color. When coding your own template, we recommend hard-coding your colors and skipping these tokens.

  • Use custom tokens to make parts of your email editable from the FeedOtter interface. Customers can use these tokens for custom image uploads, text and headline updates, and more. Campaigns are limited to 10 custom tokens per template.

See the full list of FeedOtter tokens here.

External ESP Tokens

You may also use ESP tokens in your FeedOtter emails. Unsubscribe and View as Webpage are common examples. These ESP tokens are supported in the following areas:

  • HTML template code

  • Subject lines

  • Custom fields

Following, 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 performs best with a well-designed and thoroughly tested HTML email template. Once your template has been created, coded, and tested with a compatibility tool like Litmus, you can then 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.

<!--## [% for post in feedotter.posts %] ##-->
        <tr>
          <td valign="top" align="center"><table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="width: 650px;" class="em_wrapper">
              <tbody>
                <tr>
                  <td width="25" style="width: 25px;" class="em_side15">&nbsp;</td>
                  <td valign="top" align="center" style="padding-bottom: 50px;" class="em_pbottom30"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                      <tbody>
                        <tr>
                          <td valign="top" align="left" style="font-family: Helvetica, Arial, sans-serif; color: [[feedotter.primary_color]]; font-size: 13px; line-height: 16px; font-weight: 700; padding-bottom: 12px;" class="em_defaultlink">[[post.post_author]]</td>
                        </tr>
                        <tr>
                          <td valign="top" align="left" style="" class="em_defaultlink">
                          <a href="" target="_blank" style="text-decoration-line: none; font-family: Helvetica, Arial, sans-serif; color: [[feedotter.button_color]]; font-size: 18px; line-height: 21px; font-weight: 700; padding-bottom: 10px;">
                          </a></td>
                        </tr>
                        <tr>
                          <td valign="top" align="left" style="font-family: Helvetica, Arial, sans-serif; color: [[feedotter.primary_color]]; font-size: 15px; line-height: 21px; font-weight: 400; padding-bottom: 10px;" class="em_defaultlink">[[post.post_excerpt_text | truncate(feedotter.post_body_char_limit,true,"...")]]</td>
                        </tr>
                        <tr>
                          <td valign="middle" align="left" style="font-family: Helvetica, Arial, sans-serif; color: [[feedotter.button_color]]; font-size: 12px; line-height: 15px; font-weight: 700;" class="em_defaultlinku"><a href="[[post.post_url]]" target="_blank" style="text-decoration: underline; color: [[feedotter.button_color]];">[[post.cta_text]]</a></td>
                        </tr>
                      </tbody>
                    </table></td>
                  <td width="25" style="width: 25px;" class="em_side15">&nbsp;</td>
                </tr>
              </tbody>
            </table></td>
        </tr>
<!--## [% endfor %] ##-->

Now, it would be helpful to learn how to create a basic email template using this information:

Last updated