@stencila/email-templates

Stencila branded email templates

Usage no npm install needed!

<script type="module">
  import stencilaEmailTemplates from 'https://cdn.skypack.dev/@stencila/email-templates';
</script>

README

@stencila/email-templates

These templates are intended to be used for transactional and marketing emails.

They are built using MJML.

Quick Start

There are two kinds of templates, Transactional and Marketing Campaign templates.

  1. git clone git@github.com:stencila/email-templates.git && cd email-templates
  2. npm install
  3. npm run start

Production Build

To build the templates for use with other services, run:

npm run build

This will generate two directories inside the ./dist, one for email campaigns for use with Intercom (./dist/campaigns/), and one for usage via the Stencila Hub and SendGrid (./dist/transactional/).

Media asset notes

Images for use inside the email body should be 576px wide to avoid overflow issues on some email clients.

Updating Intercom marketing templates

First run npm run build to generate the templates.

As part of the build step the npm run prepare:intercom will do the following:

  • Add a data-premailer="ignore" attribute to <style> tags to prevent Intercom from inlining them when sending a campaign. This is because we already inline the necessary styles during compilation of this project.
  • There are some styles which need to be inlined, namely the dynamic content from the Intercom email editor, for those we look for the special /* inline-styles */ comment, and replace it with a simple <style type="text/css"> tag which will be inlined by Intercom.

Navigate to Intercom email templates page paste in the contents of the generated campagins/template-intercom.html file into the editor and save the template.

Update Hub

To be documented

Sending Transactional Emails via SendGrid API

Transactional Email templates require some substitution tags to be defined for the variables to be correctly interpolated.

Each template's requirements can be seen in a <template-name>-data.json file. Please note that there are some additional requirements for the transactional footer partial. and the campaign footer partial.

References