HomepageDocumentationGet FeedOtter

Preparing a custom email design for use with FeedOtter

To ensure your custom HTML template can be setup quickly and error-free we recommend following the best-practices outlined below.

At FeedOtter, we are excited to help you turn your custom HTML email into an automated newsletter. Before our team can setup your custom HTML it is important that you follow the HTML email best practices outlined below. This ensures a timely, high quality automated newsletter.

Acquire a clean, high-quality HTML email file

Ask your email designer/coder to create or identify a clean, responsive HTML email.

  • We recommend testing this HTML email with a tool such as Litmus to ensure that is it compatible with all major email clients.

  • This email should have your logo, footer text, and other static resources coded in place.

  • Areas where you would like blog posts and content to appear should be coded with placeholder text/images. (More on that in a moment)

Acceptable sources for your HTML code:

  • HTML files exported from your ESP

  • HTML direct from your email developer

What NOT to send us:

  • EML files or files downloaded from email clients such as Gmail

What Your Email Must Contain (short version)

  • All images are visible when your html is viewed in a browser.

  • All images that should be linked have anchor tags(links). Including article featured image placeholders.

  • All text that should be linked has anchor tags(links). Including article placeholder text(titles, read more, etc...)

  • Your html email has been tested with a tool such as Litmus or other suitable testing tool.

Ensuring theses bullets are met will ensure our team can provide you with a timely, high-quality, automated newsletter setup.

Our team will not accept emails that do not pass a basic Litmus check and/or are missing items outlined above.

If you have an HTML email file that meets these items you can start a new setup project with our team here:

https://www.feedotter.com/import/

The Long Version

Below you will find full description of what goes into a placeholder email. If you are building your emails from scratch this will be valuable read.

Creating A Great Placeholder Template

When creating the HTML code for your template here are key considerations to keep in mind.

Header and Footer

Your logo, and header images should be coded into the email and any links (to homepage etc...) coded in place. In your footer you should place any text, disclaimers, and links to your unsubscribe / email preference center pages here. All links should be accurate and final. We will not touch this code so it needs to be 100% what you want on the final email.

Blog, Article Content, and Repeating Regions

These areas are the core zones that the FeedOtter team will modify during setup. Our team will add a variety of data-tokens and programmatic loops that display the featured image, title, description and details from your feeds in an email.

Review the topics below to learn exactly what we look for.

Article Spacing

If you wish to show more than 1-2 articles of content in your newsletter it is important to include multiple rows so that the spacing between articles is apparent and can be maintained when our team sets things up.

Text

As with any HTML email it is important to designate text areas throughout your email.

For article titles and descriptions it is very important to design your HTML email considering the length of your texts as this text will be supplied dynamically by FeedOtter.

  • If your article has a long title will it wrap onto a new line?

  • Should content be truncated at a certain number of characters?

  • Make sure any CTA buttons and images are also linked. You can simply link to google.com or "#". Our team will update these during import.

Here is a great placeholder text generation tool:

Images

All images in your email must have a valid SRC that points to an actual image URL before the handoff to FeedOtter.

This includes but is not limited to

  • featured images for your articles and content

This also goes for:

  • logo images

  • social icons

  • banner images

  • ad images

If you need a placeholder image here are several useful

Relative image SRCs such as <img src="/images/myserver/myimage.jpg"> are not allowed.

Links

Ensuring your HTML email has proper anchor tags and links is essential to any HTML email. This is also true for a great automated newsletter.

  • If you want featured images to be linked, ensure they are wrapped in the appropriate <a> tag.

  • This includes placeholder images that are to be replaced with article images.

  • If you do not know the link destination, set the link href="#". Our team will update this to point to your article.

  • Text that you wish to be linked such as your article title, read more etc.. MUST be linked with anchor tags. As before, use href="#" as a placeholder for your actual article link.

Anchor tags (links) affect the style of text and images so we cannot add these for you. They must be added by your team and tested to ensure proper formatting prior to handoff.

Failing to properly link images; placeholder or otherwise in a custom HTML template is the most common reason for email setup projects to become delayed.

Testing

A high-quality automated newsletter is our goal. We will test all incoming HTML in Litmus. If it does not pass basic compatibility we will return it to you.

We do this for your benefit to ensure your automated newsletters are high-quality and compatible.

Recap: Steps for a Successful Template Import

Before sending, follow this checklist and ensure your email template is completely ready for import.

  1. Are all images and links (including images) linked to correct locations or set as placeholder links "#".

  2. Compatible. Have you tested your HTML email code with a tool like Litmus? FeedOtter will not import incompatible HTML code.

  3. Placeholder content. Is there a place for all your content in your email?

If yes to all these questions, you're finally ready to request a template import.

Ready? Preflight Checklist

Before submitting your HTML code for setup please review the following essential tasks that should be completed before doing so.

  • All images are visible and linked to an ACTUAL URL. No broken or missing images when the HTML file is viewed in a browser.

  • Lorem Ipsum text is used and is linked where intended

  • You are confident your HTML code is responsive and well-tested

When you are sure your template is compatible and there are no broken links (other than content-related ones) you can submit your template to the FeedOtter team.

Upload Your Template Here

Custom HTML Email Setup FAQs

Cost

The cost for email setup is included with our basic and premium support service tiers. We provide documentation for self-service clients to be able to add FeedOtter tokens to their custom HTML. If you have questions regarding a custom email setup, please email us to discuss your project at success@feedotter.com.

Import Timeframe

We aim for a turnaround time of 3 business days for Basic setups and 5-7 business days for Advanced setups

Can I use a Marketo template?

Ideally, no. Marketo templates have oodles of extra "Marketo code" that make them less than ideal for use as a template in any other system. If you must, you can test and send your HTML file over and our team will review it and make a recommendation moving forward. Here's an article on how to import your Marketo template for use in FeedOtter.

Can I use a Pardot template?

Absolutely! Pardot templates integrate well with FeedOtter for use. Check out this tutorial on exporting your Pardot email template.

Can I make my own template?

Yes, you can! If you are familiar with the template and token languages used by popular ESPs you may have what it takes to roll your own. Head over to Getting Started with FeedOtter's Email Template Language to learn more.

If you have any questions or concerns, feel free to reach out to our team at success@feedotter.com. We're happy to help!

Last updated