Custom templates

This guide will walk you through the creation of a basic, custom HTML email template that works with FeedOtter.  This guide will focus on creating the technical elements of the data-driven email.  You can apply the lessons learned here to your own HTML email creation to create custom, data-driven emails that are compatible with FeedOtter's automated and curated email features.

Like many other email softwares FeedOtter has a token or merge variable language.  Using any of the following tokens in your FeedOtter HTML email will result in data being displayed in place of the token object.

There are several different kinds of tokens:

Campaign Tokens:
Used to display data related to the FeedOtter campaign object such as Send Date or Campaign Name.

Post Loop Tokens:
These are tokens that relate to your RSS content such as post title, description, url, and author.

UI Tokens:
These are special tokens that allow you to interact with the FeedOtter "edit" UI.  Examples include: primary color, button color, and heading text.  If you are coding an email from scratch we recommend using Custom Tokens rather than UI tokens as they offer more flexibility.

Custom Tokens:
These are tokens defined in the email template file.  You can create any number custom tokens to make parts of your email editing from the FeedOtter edit UI.  Customers use these to allow for custom image uploads, text and headline updates and more.  

Here we cover the basic elements of a FeedOtter data-driven RSS email.

FeedOtter uses the TWIG template language.  As such ANY of the TWIG supported filters and formatters are available to use to manipulate data and display variations.  Here we will give examples of the some commonly used formatters.

FeedOtter supports the usage of your email platform’s merge codes as well.  This is useful to insert personalization (first name etc…) or other data fields from your email platform.  Here are several common and useful examples.

MARKETO:

{{system.viewAsWebpageLink:default=edit me}}
{{system.unsubscribeLink}}
{{system.forwardToFriendLink:default=#}}
{{lead.First Name:default=edit me}}

Full list of Marketo merge tokens

PARDOT LEGACY:

%%unsubscribe%%
%%email_preference_center%%

Full list of Pardot Classic Variables

PARDOT 2020+:

{{Unsubscribe}}
{{View_Online}}
{{EmailPreferenceCenter}}
{{Recipient.FirstName}}

Full list of Pardot HML Variables

Certain merge codes are available for use in your subject line they are listed below.

Best Practice: Subject lines should not exceed 100 characters so we always recommend using a truncated post title.

//Insert the title of the most recent post in the subject line
[[feedotter.latest_post_title]]
[[feedotter.latest_post_title|truncate(40,true,"...")]] //truncated example

//Date examples
[[feedotter.send_date]]
[[feedotter.send_date | date("F d")]] //formatted October, 25

Often it is desirable to show/hide content based on whether Tag values are present.  This can be done using conditional tags.  Here are some examples:

//Basic IF Statement
[% if post.image_url == true %]
<img src="[[post.image_url]]">
[% endif %]

//IF / ELSE
[% if post.image_url %]
<img src="[[post.image_url]]">
[% else %]
<img src="http://placehold.it/600x400">
[% endif %]

//Ternary IF / ELSE
[[post.image_url ? post.image_url : 'http://placehold.it/600x400']]

//Loop Based IF / ELSE
[% if feedotter.posts|length >0 %]
//display something
[% endif %]

While FeedOtter requires a valid RSS feed to supply data.  We can also read additional, custom xml values.  Client’s have used this to supply custom images and descriptions along with the standard RSS data fields.

This can be especially useful when building data-driven emails from job boards, news sites, and eCommerce applications.

A helpful starting point is to use the token [[ post.asArray | json_encode ]] in your loop.  This will display the raw object that you can then use to access various elements using standard object / array notation as shown below.

Below is a partial RSS entry.  Note the node:

<item>
<title>Beautiful Painting of saharanpur</title>
<link>
https://uat.rauantiques.com/catalog/product/view/id/102845/
</link>
...
<custom_image>
<![CDATA[
https://cdn-uat.rauantiques.com/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/1/_/1_30-6635_1_3.png
]]>
</custom_image>
<price cost="$179,000" age="2,000 years" condition="perfect"></price>
...

Here is how to access the custom_image property in the FeedOtter post loop:

[% for post in feedotter.posts %] //standard post loop

//the post.asArray provides direct access to any xml fields in the <item> node of the RSS feed
[[post.asArray.custom_image.value]] 

[% endfor %]

You can also access attributes of custom elements such as the cost=”$179,000″.  The post.asArray.price.attr contains all of the attributes on that node.

[% for post in feedotter.posts %] //standard post loop

//the post.asArray provides direct access to any xml fields in the <item> node of the RSS feed
[[post.asArray.price.attr.cost]]  // displays $179,000
[[post.AsArray.price.attr.age]] // 2,000 years
[[post.asArray.price.attr.condition]] // perfect


[% endfor %]

Applies to: Automated Emails

One of FeedOtter's most powerful features is the ability to incorporate multiple RSS feeds into a single email. Customers have used this features to automate complex multi-section emails, displaying categories of content, or content from multiple blogs or news sites in a single email.

While using multiple feeds is a more advanced use-case and requires a Plus plan or higher it can be a great way to automate more elaborate emails.

This first code sample shows how to display content from multiple feeds in an html email.  Each additional feed you add to your campaign enables a new loop  feedotter.posts, feedotter.posts2 and so on.

You can loop through content using and use the familiar slice() filter to access specific sections of the feed content.