Retour

Soigner ses emails transactionnels

6 déc. 2017
3mn

L'année dernière un client nous a demandé que les e-mails envoyés par l'api soient plus esthétiques. N'ayant aucun intégrateur dans l'équipe, personne n'était motivé pour s'occuper de ce genre de ticket. Nous avons donc tiré au sort pour savoir qui s'en chargerait.

Bien sûr, c'est tombé sur moi (rip).

Le but de la fonctionnalité était d'avoir des emails beaucoup plus soignés et responsives...

Ah!

Nos e-mails n'étaient pas particulièrement compliqués, mais le centrage du logo de l'entreprise et le design étaient problématiques. J'ai donc commencé le ticket avec du HTML 3 et ses fabuleux tableaux, puis au bout de 5 minutes, je me suis dit qu'en 2017, devoir faire ça était vraiment stupide. J'ai donc cherché un moyen plus moderne de pouvoir intégrer ces e-mails.

solution 1 : un builder drag and drop

La plupart des services d'e-mails proposent sur leur plateforme un builder avec drag and drop et un système de blocs. Intéressant, mais je devais exporter chaque e-mail en HTML 3.

J'ai donc cherché une solution plus orientée développeur. Étant donné que notre service d'e-mails était Mailjet.

Ils venaient tout juste de rendre open source un nouveau projet : MJML.

solution 2 : un générateur de HTML

MJML est une application CLI qui utilise des composants React pour générer du HTML 3 responsive.

Après quelques tests, j'ai choisi cette solution.

On écrit donc des balises du type mj-* qui vont ensuite permettre de générer du HTML 3. Voici un petit exemple :

<mjml> <mj-body> <mj-container> <mj-section> <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text> </mj-column> </mj-section> </mj-container> </mj-body> </mjml>

Vous pouvez essayer ce template ici : https://mjml.io/try-it-live

Beaucoup de composants sont disponibles notamment au niveau des colonnes, des tableaux, des listes, des images. On retrouve dans l'exemple ci-dessus :

  • les composants mj-body, mj-container, mj-section, mj-column qui vont permettre de gérer le placement des blocs de votre template.

  • les composants mj-button, mj-text, mj-divider, mj-table qui eux vont permettre de gérer le contenu de votre template.

  • les composants mj-accordion, mj-carousel, mj-navbar, mj-invoice, mj-location quant à eux, vont permettre de gérer des contenus plus complexes et exotiques comme une facture ou une localisation grâce à Google Maps.

Vous pouvez retrouver l'ensemble des composants sur la documentation de MJML : https://mjml.io/documentation/#standard-body-components

Le framework permet de gérer son style via le composant directement, comme par exemple :

<mj-image width="100" ...

ou directement dans les headers HTML via le composant mj-style.

... <mj-head> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> ... <mj-text> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> ...

Utilisation

MJML est disponible sous forme de CLI installable comme ceci :

npm install -g mjml

Maintenant que MJML est installé, on va créer un fichier template.mjml. Vous pouvez trouvez ici des exemples de template déja tout prêts.

Pour générer un template de MJML vers HTML3 il suffit de lancer la commande :

mjml template.mjml --output my-email.html

Intégration rapide dans Symfony

Une fois le template réalisé, j'ai remplacé les données par des variables twig et lors du déploiement, je génère des fichiers avec l'extension twig :

mjml /path/of/templates/template.mjml --output /path/of/ressources/my-email.html.twig

Grâce à cet outil, un développeur peut réussir sans trop de problèmes à proposer dans son application des emails transactionnels propres. En espérant ne plus voir en 2018 des emails composés uniquement d'un texte et non affichables sur son téléphone...


Articles sur le même thème

Monitorer ses containers Docker

Les containers sont aujourd'hui largement utilisés du développement jusqu'en production. Cependant un `docker stats` en ssh ne permet pas de gérer correctement son environnement de production. Nous allons donc voir comment répondre à ce besoin de monitoring pour des containers en production.

12 déc. 20175mnQuentin Neyrat

Présentation de gRPC

gRPC a été développé initialement par Google puis rendu open source. Il permet de réaliser des clients et serveurs rpc via HTTP/2 et donc de profiter de ses nouveautés.

28 sept. 20175mnQuentin Neyrat

Présentation de Protocol Buffers

Une problématique assez récurrente dans nos applications est la manière de rendre notre donnée, qu'elle soit transmise ou stockée. Le format qu'on utilise souvent aujourd'hui est le `JSON`. Cependant certains langages le gèrent très mal tel que Java et Go. Google a donc développé un système pour palier à ce problème : `Protocol Buffers`.

20 sept. 20176mnQuentin Neyrat

Découvrez Eleven Labs

L'ESN qui fait décoller vos projets web, mobile & data !

Voir le site web

Contact

Eleven Labs - Paris

102, rue du Faubourg Saint Honoré

75008 Paris

Eleven Labs - Nantes

40, rue la Tour d'Auvergne

44200 Nantes

Eleven Labs - Montréal

1155, Metcalfe St Suite 1500

Montréal, QC H3B 2V6, Canada