Getting Started with FeedOtter Templates
Last updated
Last updated
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.
FeedOtter uses a slightly modified version of the TWIG template syntax
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:
To learn more about loops and how they are used read Anatomy of a FeedOtter Template.
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 .
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.
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
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.
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.
The number of loop passes is determined by the Max Posts setting in the FeedOtter UI.
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.
Now, it would be helpful to learn how to create a basic email template using this information:
See the full list of FeedOtter tokens .
