At some point, any webshop will need to send transactional emails to customers at different stages of the user journey. The following may be five of the most typical types of transactional emails:

• Welcome email
• Password reset email
• Order confirmation email
• Order is shipped email
• Follow-up email

A very common and traditional approach to sending such emails from Episerver is this:

1. Create a special CMS page for the email, including a XHtmlString property and other supporting properties.
2. Create a separate view template for the email, including all layout optimizations.
3. Render that page, either by downloading it (behind the scenes) or rendering it with a Razor engine.
4. Send the rendered markup as an email, using an SMTP client.

Even Episerver shows off this approach in their Quicksilver sample site.

What is wrong with the traditional approach?

Even though I have done it myself, I really do not like this approach, for these reasons (among others):

• Rendering emails in Episerver is not very efficient.
• Custom sending queue and error handling is needed.
• Whenever someone from Digital Marketing wants a change to the template, a new code deployment is needed.
• Even though the email is a CMS page, the templates get really inflexible.
• Open, bounce or click tracking does not come out-of-the-box.
• No good way of integrating to a mail marketing platform.
• Rendering webpages and sending emails really should be two separated concerns.

A better solution: using SendGrid

Sending transactional emails is not one of my core competences, and I suppose the same applies for most Episerver developers. Rather than building custom email sending components for different websites, I suggest integrating to one of the cheap cloud mail platforms out there, and save time and money for other tasks that actually falls under our core competences.

For this demonstration, I chose SendGrid as the email platform. It is cheap, reliable and already known by Episerver DXC customers. However, other similar platforms (like Mandrill, Hubspot or Campaign Monitor) can be equally good. If your business already has an email platform in place, I suggest you re-use it for sending your transactional emails.

Integrating to SendGrid

Since I chose SendGrid as my email platform of choice for the demonstration, the rest of this article revolves around it. With most other platforms the approach would be more or less the same, though.

This is the approach I am promoting:

1. Create a transactional email template in SendGrid.
2. Add HTML template markup to that email template, using Handlebars tags wherever you want to put dynamic data from Episerver (like mail merge tags).
3. Pass some test JSON data to the template, test it online and send some test emails to different email clients.
4. Add a simple integration service to your Episerver Commerce solution (see these Gists).
5. Wherever your Episerver solution is sending emails, pass relevant data to the SendGrid client and use it for sending the emails.

With this approach, we can separate concerns. Episerver will take care of web and business logic, while SendGrid will take care of rendering and sending emails.

Implementation

There is one downside of SendGrid templating, compared to the traditonal approach: SendGrid does not support localizing a complete template. You will either have to create a separate template per language, or create conditional Handlebar blocks in the same template.

Anyway. This is my SendGrid integration service.

Other classes can call the SendMail method, provide the ID of the SendGrid template (which could be stored as a page or settings property) and get a response back from the remote API. If the request is accepted, the email will be sent within seconds.

Here is my SendGrid template for an order confirmation, re-implementing the template from Episerver’s Quicksilver site.

And here is a JSON file, generated by the website (after refactoring the view model). I used it for online testing in the SendGrid template editor.

With these things in place, I made a purchase on the Quicksilver site and immediately received this email. It looks very much like the original.