Special delivery: Postmark transactional email templates

Today, I have the pleasure to share with you a big set of enhancements that we’ve been cooking up for Postmark, and we know you’re going to love them.

We know there’s a lot to delivering beautiful, actionable, emails to every inbox. Here are just a few things that pop up when creating transactional emails:

1. Writing copy that is clear and engaging.
2. Inlining CSS styles so that content renders correctly in more email clients.
3. Iterating on email designs before and after deployment of your software.
4. Sending test emails to make sure everything is pixel perfect.
5. Making your email “dynamic” so that it can be sent with details specific to a particular recipient.

Postmark Templates provide the tools you need to address these challenges and will have you creating awesome emails in no time.

Let’s take a peek:

To start using Postmark Templates, navigate into one of your Servers, and then click on “Templates.” One of our designers, Derek Rushforth, has put together some rock-solid starter templates. These templates don’t just look great (including on Mobile!), they also take into account all of the lessons we’ve learned from our research on the best practices for transactional email.

Once you’ve selected a template, or decided to code your own (try it, it’s fun!), we head into our editing environment.

We start with our Preview feature that will render the content of your HTML and Text bodies using the same process that would occur if you sent an email using this template from our API (applying dynamic values, then inlining styles).

At this point, you may be wondering, how can we show a fully rendered email if you haven’t supplied us with the content for each variable in the template? Postmark Templates includes a powerful feature that can suggest a model for all of the values required by the template. (Don’t worry if this doesn’t make sense yet, keep reading!)

To show this, let’s put the editor in full screen mode, and click “Edit test variables”:

Notice how clean the markup is? We take care of inlining the style blocks (collapsed in the screenshot above), so that updating the structure of your HTML doesn’t require another manual trip through a CSS inliner!

This just scratches the surface of all the little things we’ve done to make authoring email templates fast and easy.

Let’s talk a little more about what you can do once you’ve created your first email template.

We know that in most cases the content of your transactional emails is largely the same. “Forgot password” emails often vary in the link that’s included, and the user’s name, but are exactly the same in every other way. We think sending this sort of email should be as simple as:

client.emailWithTemplate(
  “jenny@example.com”,
  “bob@example.com”,
  <template-id>, 
  {
    "link" : “<a href="https://example.com/reset?key=secret" target="_blank">https://example.com/reset?key=secret</a>”,
    "recipient_name" : “Jenny”
  }
);

Here’s an overview of how this works:

1. You POST a request to our REST API, which includes a TemplateModel, TemplateId, recipient, and sender.
2. We lookup the Template associated with the submitted TemplateID, combine the Text, HTML, and Subject content of the Template with the TemplateModel submitted through the in the POST request to create the rendered email content. Note: We do CSS Inlining after we’ve applied the TemplateModel, which means selectors like “:nth-child()” apply correctly when we merge arrays of values.
3. We send the rendered email to the recipient specified in the send request.

To work with templates, we’ve opened up all of the normal endpoints you’d expect:

• Create Template
• Update Template
• Delete Template
• List Templates
• Get a Single Template
• Validate Template
• Email with Template

We believe in testing and adopting our products, so Nick Canzoneri built above, using only these public endpoints.

If you’re using our official libraries for node.js, PHP, .net, or Ruby, we’ve added Template API support in those clients, so you’ll be able to adopt the templating features in no time. You should also check out our documentation on these endpoints, and then come back here, because we have more to show you!

Back? Good.

Introducing Mustachio #

Since we’ve piqued your interest, you’re probably wondering what the templating language looks like.

We’ve built a very capable, fast, and safe, templating language that has its roots with another template language you’ve probably seen: “Mustache.” Since our version is a spiritual descendent of Mustache, but maybe a bit more flavorful, we thought we’d call it “Mustachio."

"Mustache” + “Pistachio” = “Mustachio”, get it?

If you’re not already familiar with Mustache, including dynamic content in your templates is as easy as:

Hello, {{recipient_name}}!

Seriously, you’ve got the basics of the templating language. Mustachio is different from “standard” Mustache in three ways:

1. 'Each’ syntax is added, and is recommended for handling arrays of values in your models:

{{#each people}} {{ name }} {{/each}}

2. Complex keys are supported, for example:

{{ this.is.a.valid.key }} and {{ ../this.goes.up.one.level }}

3. Template 'partials’ and ‘lambdas’ are not supported.

Of course, you can see more examples of Mustachio syntax, and get more information on why we differ from “standard” Mustache in Mustachio’s Wiki Pages. We’ll follow up in a future post about why we built Mustachio.

We think that access to these tools and content are valuable to the entire community. That’s why we’re happy to announce that we’re making the following projects Open Source:

• Mustachio: https://github.com/activecampaign/mustachio
• Style Merge: https://github.com/activecampaign/style-merge
• Transactional Email Templates: https://github.com/activecampaign/postmark-templates

We want you to be able to integrate these tools into your email workflow, even if you use an Email Service Provider other than Postmark.

We love templates so much, we’ve already switched over to using them to send notifications from our own applications.

We can’t wait to see what you do with Postmark Templates, and hope that they make sending transactional email easier than ever.

What are you waiting for? Try out Postmark Templates, and let us know what you think!