CODEWITHSUNDEEP
node.jsemailsails.jsnodemailer
Jabaa
Jabaa

Reputation: 1753

Nodemailer:HTML not rendering properly

I am using nodemailer to send a welcome mail after registration, the email template is stored in variable

var template = '</!DOCTYPE html><html><head><meta charset="utf-8"><meta http -equiv="X-UA-Compatible" content="IE=8; IE=edge,chrome=1"> <title> Cushbu Art</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">';
        template+= '<style type="text/css"> * {margin: 0; padding: 0; -webkit-box-sizing: border-box; box - sizing: border-box; } p { margin: 0; }';
        template+='@font -face{ font - family:"roboto-regular"; src: url("/Roboto-Regular.ttf/"); } body { } main { } . mailer { max - width : 100 %; width: 100 %; margin - left: auto; margin - right: auto; float: left; clear: both; } h2 { font - family: roboto-regular; font - size : 32 px; text - align : center; color: # fff; margin: 0; } h3 { font - family: roboto-regular; font - size : 52 px; text - align : center; color: # fff; margin: 0; } . mailer -head{ width: 100 %; padding: 52px 0; background: url("/mailer-head.png/") no-repeat; background -size: cover; background -color: #fff; } . mailer -body{ width: 100 %; background -color: #fff; float: left; padding: 24px 0; box - shadow : 0 2 px 5 px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } . mailer -body .logo{ height: 60 px; width: 160 px; margin: auto; display: block; background: url("/logo.jpg/") no-repeat center; background -size: contain; } . para { padding: 24px; max - width : 80 %; margin: auto; } . para p { font - size : 20 px; font - family: roboto-regular; text - align : center; color: # 161616; margin: 0; line - height: 34px; } . container-grid{ max - width : 100 %; margin - left: auto; margin - right: auto; width: 100 %; float: left; clear: both; } . grid - 2{ width: 50 %; float: left; padding: 8 px; } . btn { font - family: roboto-regular; font - size : 15 px; text - align : center; color: # fff; border - radius: 2px; text - decoration: none; padding: 8 px 12 px; background -color: #2066df; } . btn - refer{ float: right; } .btn-upload{ float: left; } .signature{ width: 100%; float: left; clear: both; } .signature p{ font-family: roboto-regular; font-size: 15px; text-align: center; padding: 6px 0; } .signature .sign{ height: 60px; width: 160px; margin: auto; display: block; background: url("/sign.png/") no-repeat center; background-size: contain; } .mailer-footer{ width: 100%; float: left; clear: both; padding: 24px 0; background-color: white; /*border-top: 1px solid #ededed;*/ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .mailer-footer ul{ display: table; margin: auto; padding-bottom: 14px; } .mailer-footer ul li{ float: left; list-style: none; } .mailer-footer ul li a{ height: 47px; width: 47px; line-height: 0; border-radius: 50%; cursor: pointer; vertical-align: middle; margin: 10px; display: block; text-decoration: none; } .mailer-footer ul li a i{ padding: 16px 0; color: #fff; display: block; text-align: center; } .btn-fb { background-color: #3B5998; } .btn-li { background-color: #0082CA; } .btn-tw { background-color: #55ACEE; } .btn-ins { background-color: #3F729B; } .btn-pin { background-color: #C61118; } .btn-gplus { background-color: #DD4B39; } .mailer-footer p{ font-family: roboto-regular; font-size: 15px; text-align: center; }.mailer-footer .p-btm{ padding - bottom: 24px; } . mailer -footer .p-top{ padding - top: 24px; } . mailer -footer span{ font - family: roboto-regular; font - size : 15 px; display: block; text - align : center; } . container-mailer-body{ background: #e5e5e5; float: left; width: 100 %; padding: 0 24 px; clear: both; } footer{ background: #e5e5e5; padding: 10px; clear: both; } footer p { font - family: roboto-regular; font - size : 15 px; text - align : center; } </style></head>';
        template+= '<body> <main> <div class="mailer"> <div class="mailer-head"> <h2>Welcome</h2> <h3>user!</h3> </div> <div class="container-mailer-body"> <div class="mailer-body"> <div class="logo"></div> <div class="para"> <p>I am so delighted you have joined us here at www.cushbu.com. Our goal is to create a global platform for artists to exhibit, sell their artworks and worldwide visibility for the International art community. If you are interested in promoting your artworks through our site, instead of the sale, we welcome to do so by an active participation by creating and sharing artworks. We heartily invite you to explore our site with new creative artworks and connect with the talented artists all around the world.</p> </div> <div class="container-grid"> <div class="grid-2"> <a href="" class="btn btn-refer">Refer Now</a> </div> <div class="grid-2"> <a href="" class="btn btn-upload">Ulpoad Art</a> </div> </div> <div class="signature"> <div class="sign"></div> <p>Sanata Balakrishnan</p> <p>COO - Cheif Operating Officer</p> </div> </div> <div class="mailer-footer"> <ul> <li> <a type="button" class="btn-floating btn-small btn-fb" href="https://www.facebook.com/cushbuart/" target="_blank"><i class="fa fa-facebook"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-li" href="https://www.linkedin.com/company-beta/13277468/admin/updates/"><i class="fa fa-linkedin"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-tw" href="https://twitter.com/cushbuart"><i class="fa fa-twitter"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-ins" href="https://www.instagram.com/cushbuartlive/"><i class="fa fa-instagram"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-pin" href="https://in.pinterest.com/cushbu/"><i class="fa fa-pinterest"></i></a> </li> <li> <a type="button" class="btn-floating btn-small btn-gplus" href="https://plus.google.com/u/0/communities/112678263549800648922"><i class="fa fa-google-plus"></i></a> </li> </ul> <p class="p-btm">You are receiving this email because you opted in at our website</p> <span>Email your thoughts to,</span> <span>[email protected]</span> <span>[email protected]</span> <p class="p-top">You are receiving this email because you opted in at our website</p> </div> </div> </div> </main> < footer> < p > Copyright © 2017 Cushbu Art Pvt Ltd rights reserved</p> < / footer></body ></html>';

Email sending code

var transporter = nodemailer.createTransport({
            host:'XX',
            port :465,
            secure: true,
            auth: {
                user: 'XX',
                pass: 'XX'
            }
        });
        var mailOptions = {
            from: '<sender>', // sender address
            to:'[email protected]', // list of receivers
            subject: 'Welcome', // Subject line
            html:template
        };

        transporter.sendMail(mailOptions, function(error, info) {
            if (error) {
                res.send(error);
                return console.log("Error ",error);
            }
            res.send('Message %s sent: %s', info.messageId, info.response);
        });

But the problem is email is not rendering the HTMl properly styles are missing

Upvotes: 0

Views: 4777

Answers (2)

SanzioSan
SanzioSan

Reputation: 254

External files dont seem to work with nodemailer, You are referencing a CSS file, you need to make all those styles inline

Upvotes: 0

arbuthnott
arbuthnott

Reputation: 3819

I'm not an authority on this, but I'm fairly sure the html payload of an email is supposed to be a lot simpler than a full document. Whether or not it gets rendered, and how complicated the styles can be is really up to the client that the receiver is using to view the email (gmail, thunderbird, etc, etc).

I'd use a couple rules of thumb for sure:

  • Don't expect anything from the <head> element to be included. I'd even leave out the <body> and just use a <div> or <p> or <table> as your root element.
  • Put styles either directly on your elements, or in a <style> tag - not in the <head> as that will likely be excluded.
  • No links to local resources! I think you're trying to grab a font from a relative url. Best to avoid all external resources if you can, but if you must, absolute urls may work.
  • The simpler the better.

You can really do a lot with just a few styles in an email. If you really need your branded font, just create a logo image that features it. Nodemailer has some cool tricky ways to include your images as attachments so they don't count as external resources and are less likely to be blocked. (I can't find the docs, but here is a quick guide).

Upvotes: 1

Related Questions