Creating Custom Email Templates for Use With FeedOtter

A guide to creating custom html email templates using FeedOtter’s template system.

A Typical Header

Most folks opt to create a custom image to head their email templates but there are a number of fields that can be used to make-up a simple header. Here’s an example.

<table>
    <tr>
        <td>
            <img width="250" height="50" src="{{feedotter.company_logo_url}}" alt="{{feedotter.company_name}}" />
        </td>
    </tr>
    <tr>
        <td width="450">                         
            {{feedotter.campaign_name}}                       
        </td>
        <td width="150">
            {{feedotter.send_date}}
        </td>
    </tr>
</table>
Example HTML Email Header

The Post Loop

This is the most important part of a FeedOtter email template.  The loop is designated by {% for post in feedotter.posts %} at the beginning of the html code and {% endfor %} at the end.

{% for post in feedotter.posts %}
<table>    
    <tr>
        <td>
            <a href="{{post.post_url}}" target="_blank">{{post.post_title}}</a>
        </td>
    </tr>
    <tr>
        <td>
            By: {{post.post_author}} | {{post.post_date}} 
        </td>
    </tr>
    <tr>
        <td>
            {{post.post_excerpt_text | truncate(200,true,”…”)}}
        </td>
    </tr>
    <tr>
        <td width="70%">
            <a href="{{post.post_source_url}}" >{{post.post_source}}</a>
        </td>
        <td width="30%">
            <a href="{{post.post_url}}" >Read the full post</a>
        </td>
    </tr>
</table>
{% endfor %}
Repeating Post Loop HTML Example

Advanced – Multiple Post Loops

 

If you need more control over your email templates you can add multiple post loops to a template and specify which and how many posts are displayed from an RSS feed.  The example to the right shows how this is done.

Pay special attention to the | slice(0, 1) part of the loop definition.  The first number in the slice() function is the starting point so 0=first post in a feed. The second number is the length or number or posts to display or loop through, in this case 1.

In the example the first loop displays the first post only.  The second loop displays posts 2,3,4 in the feed.

{% for post in feedotter.posts  | slice(0, 1) %}
<div>
{{post.post_url}}
{{post.post_title}}
{{post.post_author}}
{{post.post_date}}
{{post.post_excerpt_text | truncate(200,true,"...")}}
{{post.post_source_url}}
{{post.post_source}}
{{post.post_url}}
{{post.image_url}}
</div>
{% endfor %}


{% for post in feedotter.posts  | slice(1, 3) %}
<div>
{{post.post_url}}
{{post.post_title}}
{{post.post_author}}
{{post.post_date}}
{{post.post_excerpt_text | truncate(200,true,"...")}}
{{post.post_source_url}}
{{post.post_source}}
{{post.post_url}}
{{post.image_url}}
</div>
{% endfor %}
Multiple Post Loop Example

A Typical Footer

There are many variations for footers.  Some opt for an image with text on top. Others use pure-css/tables.  Here is an example of building a footer that includes your company information and social profile links in FeedOtter.

<table>
    <tr>
        <td>
            <strong>Follow Us:</strong>
        </td>
        <td>
            <a href="{{feedotter.company_twitter_url}}" target="_blank">Twitter</a>
            <a href="{{feedotter.company_facebook_url}}" target="_blank">Facebook</a>
            <a href="{{feedotter.company_linkedin_url}}" target="_blank">LinkedIn</a>
            <a href="{{feedotter.company_instagram_url}}" target="_blank">Instagram</a>
            <a href="{{feedotter.company_pinterest_url}}" target="_blank">Pinterest</a>
            <a href="{{feedotter.company_blog_url}}" target="_blank">Our Blog</a>
        </td>
    </tr>
    <tr>
        <td>
            <p>
                {{feedotter.company_name}} | Copyright {{ "now"|date("Y") }}<br />
                {{feedotter.company_address}} | {{feedotter.company_city}}, {{feedotter.company_state}},  {{feedotter.company_zip}}  {{feedotter.company_country}}
            </p>
            <p>
                <a href="{{feedotter.company_url}}">About</a>  | <a href="{{feedotter.company_unsubscribe_url}}">{{feedotter.company_unsubscribe_text}}</a>
            </p>
        </td>
    </tr>
</table>
Sample Footer Code

FeedOtter Merge Fields

When you create a campaign in FeedOtter there are a number of fields that can be inserted into an html email template.

Variable NameDescription
{{post.post_title}}The title of a blog post
{{post.post_description}}The full content of the post as available in the rss feed
{{post.post_description_text}}A text only version of the content as seen in the rss feed. Super Tip! You can truncate this field using this: {{post.post_description_text | truncate(200,true,”…”)}}
{{post.post_excerpt}}A excerpt of the post -typically the first 250 chars
{{post.post_excerpt_text}}A text only excerpt. Can be custom length controlled using {{post.post_excerpt_text | truncate(200,true,”…”)}}
{{post.post_url}}The url of a blog post
{{post.post_author}}The author name of a blog post
{{post.post_date}}The publish date of a blog post
{{post.post_source}}The name of the source blog of a blog post
{{post.image_url}}The best image to represent a blog post as chosen by our alogrithm
 ###
{{feedotter.primary_color}}The color(hex) selected as primary color in the campaign wizard
{{feedotter.secondary_color}}The color(hex) selected as secondary color in the campaign wizard
{{feedotter.headline}}Big, bold headline text used in select templates.
{{feedotter.subheader}}A subheadline used in select templates.
{{feedotter.campaign_name}}The name of your campaign as provided during the wizard process
{{feedotter.send_date}}A text string date that your email is generated/sent. By default the date is formatted as: Tuesday, November 15 2016
{{feedotter.send_date_object}}A date object that can be used for advanced formatting such as {{feedotter.send_date_object | date(“Hi m/d/Y”, “Europe/Paris”)}}
{{feedotter.campaign_from_name}}The FROM NAME value as provided during the campaign wizard process
{{feedotter.campaign_from_email}}The FROM EMAIL value as provided during the campaign wizard process
{{feedotter.campaign_reply_email}}The REPLY EMAIL address as provided during the campaign wizard process
{{feedotter.preheader_text}}Special text block designed for an email preheader. This includes the title of the first post and the first 100 characters of the first post text.
 ###
{{feedotter.company_name}}Your company name as provided during the campaign wizard process
{{feedotter.company_address}}Your company address as provided during the campaign wizard process
{{feedotter.company_city}}Your company city as provided during the campaign wizard process
{{feedotter.company_state}}Your company state as provided during the campaign wizard process
{{feedotter.company_zip}}Your company zip as provided during the campaign wizard process
{{feedotter.company_country}}Your company country as provided during the campaign wizard process
{{feedotter.company_logo_url}}The url of the logo you uploaded during the campaign wizard process
{{feedotter.company_url}}The company website as provided during the campaign wizard process
 ###
{{feedotter.company_twitter_url}}The Twitter url of your company as provided during the campaign wizard process
{{feedotter.company_facebook_url}}The Facebook url of your company as provided during the campaign wizard process
{{feedotter.company_linkedin_url}}The Linkedin url of your company as provided during the campaign wizard process
{{feedotter.company_youtube_url}}The YouTube url of your company as provided during the campaign wizard process
{{feedotter.company_google_plus_url}}The Google+ url of your company as provided during the campaign wizard process
{{feedotter.company_instagram_url}}The Instagram url of your company as provided during the campaign wizard process
{{feedotter.company_pinterest_url}}The Pinterest url of your company as provided during the campaign wizard process
{{feedotter.company_blog_url}}The blog url of your company as provided during the campaign wizard process

Helpful Marketing Automation Merge Codes

Marketo:
{{system.viewAsWebpageLink:default=edit me}}
{{system.unsubscribeLink}}

Note Marketo variables must be wrapped with special tags in templates.
{% verbatim %} {{lead.First Name:default=edit me}} {% endverbatim %}
{% verbatim %}{{system.viewAsWebpageLink}}{% endverbatim %}
{% verbatim %}{{system.unsubscribeLink}}{% endverbatim %}
{% verbatim %}{{system.forwardToFriendLink:default=#}}{% endverbatim %}

Pardot:
%%unsubscribe%%
%%email_preference_center%%

All Pardot’s merge variables can be used in your FeedOtter template. Even Dynamic Content codes.  Refer to: http://help.pardot.com/customer/portal/articles/2127194-variable-tags-overview for a full list of Pardot variables.

Subject Line Merge Fields

These fields can be used to personalize the subject line of your emails.

//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
Subject Line Merge Codes

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

Social Share Icons/Links

While some FeedOtter templates come with built in social sharing icons. You may want to add your own.  You can do this by adding the below code into the feedotter.post loop.

<a target="_blank" href="https://twitter.com/intent/tweet?text={{post.post_title}}&url={{post.post_url}}">
	<img src="https://storage.googleapis.com/feedotter-com.appspot.com/social_icons/color_circle_1/twitter.png" title="Twitter" alt="Twitter" width="20" border="0" />
</a>

<a target="_blank"  href="https://www.linkedin.com/shareArticle?mini=true&url={{post.post_url}}" >
<img src="https://storage.googleapis.com/feedotter-com.appspot.com/social_icons/color_circle_1/linkedin.png"  title="LinkedIn" alt="LinkedIn" width="20" border="0"  />
</a>

<a target="_blank"  href="https://www.facebook.com/sharer/sharer.php?u={{post.post_url}}" >
<img src="https://storage.googleapis.com/feedotter-com.appspot.com/social_icons/color_circle_1/facebook.png"  title="Facebook" alt="Facebook" width="20" border="0" />
</a>

<a target="_blank"  href="https://plus.google.com/share?url={{post.post_url}}" >
<img src="https://storage.googleapis.com/feedotter-com.appspot.com/social_icons/color_circle_1/google.png"  title="Google+" alt="Google+" width="20" border="0"  />
</a>
Social Media Share Icons

Here’s an example of how we implemented social sharing icons on our Almeria template.

Advanced Formatting and Conditionals

There are several ways fields can be formatted in your FeedOtter email templates.

Title/Content Length & Truncate Features

In order to make your RSS content look the best it is often necessary to limit what is shown to the user. FeedOtter has multiple truncation features to make this easy and beautiful.

By adding | truncate(200,true,”…”) to the end of any FeedOtter Tag you can limit the number of characters; 200 in this example that are shown.

Sentence Truncate

Another way to truncate text in your templates is using our specially designed sentence truncate filter.  When you use this filter (as shown below) FeedOtter will get the first 450 characters and then backtrack to the last period so your blurb will contain full sentences.

{{post.post_excerpt_text | truncate(200,true,"...")}} //200 chars, preserve words, add ellipses
{{post.post_excerpt_text | truncate_sentence(450)}} //preserve sentences
Truncation Examples

Date Formatting

In general FeedOtter can use any date formatting supported by PHP as seen here: http://php.net/manual/en/datetime.formats.date.php

{{feedotter.send_date | date("F d")}} //the date FeedOtter sent your email formatted as: October 25

Conditional Content

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:

{% if post.image_url == true %}
<img src="{{post.image_url}}">
{% endif %}
Basic IF Statement
{% if post.image_url %}
<img src="{{post.image_url}}">
{% else %}
<img src="http://placehold.it/600x400">
{% endif %}
IF / ELSE
 
{{post.image_url ? post.image_url : 'http://placehold.it/600x400'}}
Ternary IF / ELSE