How To Send Mjml Templates
Sending emails with templates using MJML
Sending emails is something a lot of web apps like to practice. Password resets, notifications, promotions etc.
One of the biggest annoyances in sending emails is HTML EMAILS! They are very messy, ugly, and impossible to figure out.
In the by nosotros would design our emails using Mailchimp then export them as an HTML email. This results in a convoluted mess of HTML that no ane wants to make minor edits to.
Can we do better? Of class we can that's why I wrote this article!
MJML
Enter MJML. Information technology'south a neat little library to arrive easier to keep your HTML emails as code without going crazy!
This is merely a quick example from their site:
<mjml> <mj-torso> <mj-section> <mj-column> <mj-image width= "100px" src= "https://mjml.io/avails/img/logo-small.png" ></mj-image> <mj-divider edge-color= "#F45E43" ></mj-divider> <mj-text font-size= "20px" colour= "#F45E43" font-family= "helvetica" >Hello Globe</mj-text> </mj-column> </mj-section> </mj-trunk> </mjml> As you lot can see, it is very readable and HTML like. Much easier to edit and maintain!
They even accept a costless online editor to see what your email will expect like!
MJML will accept the code that yous write and transform it into something like this:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <caput> <title> </title> <!--[if !mso]><!-- --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--<![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-eight"> <meta name="viewport" content="width=device-width, initial-scale=ane"> <mode type="text/css"> #outlook a { padding: 0; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } .ExternalClass * { line-height: 100%; } body { margin: 0; padding: 0; -webkit-text-size-arrange: 100%; -ms-text-size-adjust: 100%; } tabular array, td { border-plummet: collapse; mso-table-lspace: 0pt; mso-tabular array-rspace: 0pt; } img { border: 0; top: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-style: bicubic; } p { display: cake; margin: 13px 0; } </style> <!--[if !mso]><!--> <way type="text/css"> @media only screen and (max-width:480px) { @-ms-viewport { width: 320px; } @viewport { width: 320px; } } </style> <!--<![endif]--> <!--[if mso]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <!--[if lte mso 11]> <style type="text/css"> .outlook-group-fix { width:100% !important; } </style> <![endif]--> <style blazon="text/css"> @media only screen and (min-width:480px) { .mj-column-per-100 { width: 100% !important; max-width: 100%; } } </style> <way type="text/css"> @media only screen and (max-width:480px) { tabular array.total-width-mobile { width: 100% !important; } td.total-width-mobile { width: auto !important; } } </style> </head> <torso> <div way=""> <!--[if mso | IE]> <tabular array align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" > <tr> <td way="line-summit:0px;font-size:0px;mso-line-meridian-rule:exactly;"> <![endif]--> <div style="Margin:0px machine;max-width:600px;"> <table align="center" edge="0" cellpadding="0" cellspacing="0" function="presentation" style="width:100%;"> <tbody> <tr> <td style="management:ltr;font-size:0px;padding:20px 0;text-marshal:middle;vertical-align:top;"> <!--[if mso | IE]> <table part="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="" style="vertical-align:top;width:600px;" > <![endif]--> <div course="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" office="presentation" style="vertical-align:peak;" width="100%"> <tr> <td align="center" fashion="font-size:0px;padding:10px 25px;word-break:intermission-word;"> <tabular array edge="0" cellpadding="0" cellspacing="0" role="presentation" style="border-plummet:plummet;border-spacing:0px;"> <tbody> <tr> <td way="width:100px;"> <img height="car" src="https://mjml.io/assets/img/logo-small-scale.png" mode="border:0;display:block;outline:none;text-ornament:none;meridian:auto;width:100%;" width="100" /> </td> </tr> </tbody> </table> </td> </tr> <tr> <td mode="font-size:0px;padding:10px 25px;give-and-take-break:break-word;"> <p style="border-acme:solid 4px #F45E43;font-size:1;margin:0px automobile;width:100%;"> </p> <!--[if mso | IE]> <table align="center" edge="0" cellpadding="0" cellspacing="0" style="border-tiptop:solid 4px #F45E43;font-size:i;margin:0px car;width:550px;" role="presentation" width="550px" > <tr> <td style="height:0;line-height:0;"> </td> </tr> </table> <![endif]--> </td> </tr> <tr> <td align="left" way="font-size:0px;padding:10px 25px;word-pause:break-give-and-take;"> <div manner="font-family unit:helvetica;font-size:20px;line-meridian:ane;text-align:left;colour:#F45E43;"> Hullo World </div> </td> </tr> </table> </div> <!--[if mso | IE]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> </tr> </table> <![endif]--> </div> </trunk> </html> AHHHHH!!!! That's just terrifying. We thank MJML for fighting the demons for the states!
Now we can transform our MJML to HTML simply it's currently static.
And then what about templating y'all may ask?
Well...
Templating
We still probably want to be able to use our MJML to brand electronic mail templates. Nosotros want squeamish things like our user's proper noun and custom links. Good web stuff.
For that I use mustache. It'due south fairly uncomplicated to apply:
Our template:
<mjml> <mj-body> <mj-section> <mj-column> <mj-image width= "100px" src= "https://mjml.io/assets/img/logo-minor.png" ></mj-image> <mj-divider border-color= "#F45E43" ></mj-divider> <mj-text font-size= "20px" color= "#F45E43" font-family= "helvetica" >Hello {{user}}</mj-text> </mj-cavalcade> </mj-section> </mj-body> </mjml> Our code:
const mustache = require ( " mustache " ); const templateData = { " user " : " John " } const renderedMJML = mustache . render ( mjmlTemplate , templateData ); Now we take filled in our template with mustache. Only we are notwithstanding in the MJML format.
Why did we do that? Well MJML makes huge transformations to the lawmaking nosotros manus to it. If we try to run mustache afterward we catechumen to HTML we will lose our ability to use mustache.
Luckily mustache doesn't much care what type of document we throw at it. It only cares most {{}}. (Incidentally this allows you to use mustache in many other applications including JSON)
Let's now catechumen from MJML to HTML.
const mjml = require ( " mjml " ); const html = mjml ( renderedMJML ). html ; // don't forget the `.html` Now nosotros have some HTML but nosotros still need to...
Sending email
Okay we now accept an HTML template. We want to send information technology.
I am going to use the Postmark Api considering it'south really easy.
const fetch = crave ( " node-fetch " ); await fetch ( " https://api.postmarkapp.com/email " , { method : " Mail service " , headers : { " Accept " : " awarding/json " , " Content-Type " : " application/json " , " X-Postmark-Server-Token " : " server token " }, body : JSON . stringify ({ To : " example@case.com " , From : " example2@case.com " , Subject : " This is a test " , HtmlBody : html }) }) There you go.
Total Javascript
const fetch = require ( " node-fetch " ); const mustache = require ( " mustache " ); const mjml = require ( " mjml " ); const templateData = { " user " : " John " } const mjmlTemplate = ` <mjml> <mj-trunk> <mj-section> <mj-column> <mj-image width="100px" src="https://mjml.io/assets/img/logo-small-scale.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello {{user}}</mj-text> </mj-column> </mj-section> </mj-body> </mjml> ` const renderedMJML = mustache . render ( mjmlTemplate , templateData ); const html = mjml ( renderedMJML ). html ; // don't forget the `.html` await fetch ( " https://api.postmarkapp.com/e-mail " , { method : " Mail service " , headers : { " Accept " : " awarding/json " , " Content-Type " : " awarding/json " , " X-Postmark-Server-Token " : " server token " }, body : JSON . stringify ({ To : " case@example.com " , From : " example2@example.com " , Subject : " This is a examination " , HtmlBody : html }) }) Read adjacent
The Future of Web Evolution in 2022
Evelyn Grace -
Laravel API Series: Controllers, Crud, Routing and Search Functionality
Adebayo Adams -
How the TypeScript Partial Type Works
Johnny Simpson -
Visual Testing with Chromatic
Duarte Nunes -
How To Send Mjml Templates,
Source: https://dev.to/powerc9000/sending-emails-with-templates-using-mjml-318e
Posted by: grahamsatchis.blogspot.com
0 Response to "How To Send Mjml Templates"
Post a Comment