mail.md

Mail

Explanation

Two templating libraries are used, they allow easy editing and responsive :

• Handlebars is used as a semantic template motor. It allow us to split email template in order to reuse some parts (header, footer ...)

• MJML is a lib providing a syntax allowing developers to easily build responsive templates.

Usage

Scaffolding

Mails templates can be found inside src/notifications. All reusable parts can be found in base folder.

All stylesheet must be include inside style.hbs.

Create your template

Simply create your template file template.hbs inside the notifications folder.

<mj-hero background-color="radial-gradient(96.2% 96.2% at 50% 3.8%, #343641 0%, #1B1C22 100%)" padding="17px">
  <mj-text align="center" color="white" padding-top="20px" font-size="24px" font-family="Lato" font-weight="normal">
    <img style="vertical-align: middle; margin-right: 12px" src="https://ecolyo.com/assets/ecolyo-icon.svg" alt="Ecolyo"/>
  {{title}}
  </mj-text>
</mj-hero>

How to use it ?

Inside a cozy service

1. Import the mjml lib in order to compile the template.

import mjml2html from 'mjml'

2. Link all the info mandatory to render your email :

const template = monthlyReportTemplate({
    title: 'Du nouveau dans votre espace Ecolyo !',
  })

3. Build the email and send it:

  const mailData = {
    mode: 'noreply',
    subject: '[Ecolyo] - Votre bilan mensuel',
    parts: [
      {
        type: 'text/html',
        body: mjml2html(template).html,
      },
    ],
  }
  mailService.SendMail(client, mailData)

Inside the app

It's very similar to service usage, but because we use react, the app rendering is done in the user browser. That's why we need to change the import for mjml lib into :

const mjml2html = require('mjml-browser')

Useful links

• Mjml live editor

Bounce token

A bounce token stored in the profile of each user is sent in email. It allows us to track if user clicks on links.

Unsubscribe

A user can unsubscribe to our newsletter by a link in each mails. It does not require authentication. This link is built with a sharecode token that contains specific permissions to turn off the sendAnalysisNotification property in the user profile. The sent link has a TTL of 15 days.