Custom Components in Email Development

Jeffrey Hoffman
Dec 9, 2018 · 3 min read

Detangle your content from repetitive email code with configurable, reusable custom components.

In Inkcite 1.18, we rebuilt Helpers from the ground up to make them easier to use while also making them dramatically more powerful. Helpers give you and Your team the ability to create custom, modular, configurable components that can be used throughout an email and across campaigns.

If you’re unfamiliar with the concept of Inkcite’s Helpers, they are designed to detangle email content from layout code. I wrote at length about the power and flexibility of content and display patterns here. TL;DR: Helpers allow you to generalize your display and layout code, turning it into a custom HTML tag with attributes of your own choosing. Neat!

Easier to Define

In my earlier blog post introducing Helpers, I outlined how to create a component for displaying videos in a consistent, 3-column layout. Let’s revisit that example but updated for Inkcite 1.18’s new Helper format.

Instead of defining Helpers with tab-delimited, multi-line code blocks using the <<-START and END->> notation in helpers.tsv, the new version of Inkcite lets you define Helpers in their own separate HTML files. These are saved in the new helpers/ subdirectory Inkcite creates when you initialize an email project. For this article, the code would be saved as a file called helpers/video.html.

---
href http://www.youtube.com/watch?v=$id$
---
<td valign=top style="font-size: 14px; padding: 15px;">
<a href="$href$" style="color: #336699; text-decoration: none"
target=_blank>
<img alt="$title$" width=170 height=150 border=0
src="images/$id$.jpg" style="display: block;">
<div style="font-size: 20px;">$title$</div><br>
</a>
...
<% unless attribute?('no-play-button') %>
<br><br>
<a href="//www.youtube.com/watch?v=$id$"
style="color: #336699; text-decoration: none;"
target=_blank>Play &#9658;</a>
<% end %>
</td>

This new format is cleaner and easier to read. The new format also makes it possible to do some pretty amazing things.

Attributes

Like the previous version of Inkcite, anywhere within your Helper code, you can declare attributes by sandwiching words between $ symbols. Attributes represent values that must be passed-in when the Helper is used in email code. In this example, the title and id values for the video title and YouTube video ID, respectively, are referenced in the code in appropriate spots. You can use an attribute multiple times in the code if its value needs to be repeated in several spots, like the video ID is. Attributes make Helpers configurable and reusable.

Frontmatter

Inkcite Helpers now support frontmatter. Frontmatter lets you define default values for attributes. Like the variables in your projects helpers.tsv, these values are tab-delimited name-value pairs. The three dashes separate frontmatter from the Helper’s HTML code.

Frontmatter variables can be set to any number, string, color or other value that is important in the Helper code.

They can also build off of other attributes. In this example, the frontmatter declares the href attribute will default to a YouTube video link that resolves to the id attribute provided by the user. By declaring the video Helper href attribute in this fashion, I’ve made it even more flexible. Most videos in this example link to YouTube but now you can pass a different href value when you need the video to link to Vimeo or some other hosted video platform.

Body Content

Take note of the in the middle of the code. This is a special marker indicating that the Helper has both an open and a close tag and that any body or child elements within those should be injected at this point. For example:

{video id="la6vK6hI7rM" title="Cats Coding Emails"}
New 2018 compilation of cats coding modern, responsive emails.
{/video}

The “New 2018 compilation of cats coding modern, responsive emails.” body content will be injected into the Helper code at the point that the appears.

Conditionals and Scripting

An advanced feature of Inkcite’s new Helpers is the ability to use ERB (Ruby) scripting within the code. This allows you to make your Helper code dynamic based on the values of attributes provided.

In the example above, I’ve added a conditional that allows the Helper user decide whether or not the play button is added after the video description. By default, the play button will be included but if the Helper is invoked with the no-play-button boolean attribute, it will be skipped:

{video id="..." title="..." no-play-button}

Conditionals can access any attribute value passed to the Helper — not just Boolean attributes like this one.

Next Steps

New Helpers are just the beginning. Inkcite is a free, open-source modular design system for building modern, responsive emails. Inkcite makes it easy for email developers to keep their code DRY (don’t repeat yourself) and integrate Display patterns, versioning, compatibility testing and minification into their workflow. Installation and getting started instructions available here.

Jeffrey Hoffman

Written by

Creator of Inkcite, the modular design system for modern, responsive email development. http://inkcite.com #emailgeek #MakeEmailBetter