How to send HTML email with SendGrid Rest API using custom html file with Nodejs handlebars?

Viewed 53

I'm trying to send dynamic emails with Twilio SendGrid Rest API with Nodejs and handlebars. I have created my own custom template and placed the design in a file template.html. I'm successfully using this template using Nodemailer and SMTP-transport. But when trying to send it with SendGrid I get error :

ResponseError: Forbidden at node_modules/@sendgrid/client/src/classes/client.js:146:29 at processTicksAndRejections (internal/process/task_queues.js:95:5) { code: 403, response: { headers: { server: 'nginx', date: 'Wed, 07 Sep 2022 17:03:16 GMT', 'content-type': 'application/json', 'content-length': '281', connection: 'close', 'access-control-allow-origin': 'https://sendgrid.api-docs.io', 'access-control-allow-methods': 'POST', 'access-control-allow-headers': 'Authorization, Content-Type, On-behalf-of, x-sg-elas-acl', 'access-control-max-age': '600', 'x-no-cors-reason': 'https://sendgrid.com/docs/Classroom/Basics/API/cors.html', 'strict-transport-security': 'max-age=600; includeSubDomains' }, body: { errors: [Array] } } }

This is my nodejs

const handlebars = require('handlebars');
const path = require('path');
const fs = require('fs');
const sendgrid = require('@sendgrid/mail')
sendgrid.setApiKey(sendgrid_api_key);

//readhtmfile
var readHTMLFile = function (path, callback) {
fs.readFile(path, { encoding: 'utf-8' }, function (err, html) {
if (err) {
throw err;
callback(err);
}
else {
callback(null, html);
}
});
};

//dynamic variable received from client
var name = 'John Doe';

//email user
readHTMLFile(path.join(__dirname, '/', 'template.html'), function (err, html) {
var template = handlebars.compile(html);
var replacements = {
email_title: 'Welcome email',
email_body: 'Welcome to our website '+name
};
var htmlToSend = template(replacements);
var mailOptions = {
from: '"Company Website" <verified_sendgrid_email@company.com>', // sender address
to: email, // list of receivers
subject: "Welcome email ", // Subject line
html: htmlToSend, // html body
};
sendgrid.send(mailOptions, function (error, response) {
if (error) {

console.log(error);

} else {

console.log(response);

}
});
});
1 Answers

Upon printing the body errors, which I should have done, the detailed error was :

{
  errors: [
    {
      message: 'The from address does not match a verified Sender Identity. Mail cannot be sent until this error is resolved. Visit https://sendgrid.com/docs/for-developers/sending-email/sender-identity/ to see the Sender Identity requirements',
      field: 'from',
      help: null
    }
  ]
}

Unlike me, make sure you enter the Verified SendGrid mail. I had misspelled it.

Everything works like a charm now!

If you wonder what the template looks like and how to make it dynamic here it is :

template.html

<html>

<head>            

<style>
@media only screen and (max-width: 600px) {
.main {
width: 320px !important;
}

.top-image {
width: 20px !important;
}
.inside-footer {
width: 320px !important;
}
table[class="contenttable"] { 
width: 320px !important;
text-align: left !important;
}
td[class="force-col"] {
display: block !important;
}
td[class="rm-col"] {
display: none !important;
}
.mt {
margin-top: 15px !important;
}
*[class].width300 {width: 255px !important;}
*[class].block {display:block !important;}
*[class].blockcol {display:none !important;}
.emailButton{
width: 100% !important;
}

.emailButton a {
display:block !important;
font-size:18px !important;
}

}

.coupon {
border: 5px dotted #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}

.container {
padding: 2px 16px;
background-color: #f1f1f1;
}

.promo {
background: #ccc;
padding: 3px;
}

.expire {
color: red;
}
</style>
</head>
<body link="#00a5b5" vlink="#00a5b5" alink="#00a5b5">
<table class="main contenttable" align="center" style="font-weight: normal;border-collapse: collapse;border: 0;margin-left: auto;margin-right: auto;padding: 0;font-family: Arial, sans-serif;color: #555559;background-color: white;font-size: 16px;line-height: 26px;width: 600px;">
<tr>
<td class="border" style="border-collapse: collapse;border: 1px solid #eeeff0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;">
<table style="font-weight: normal;border-collapse: collapse;border: 0;margin: 0;padding: 0;font-family: Arial, sans-serif;">
<tr>
<td colspan="4" valign="top" class="image-section" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;background-color: #fff;border-bottom: none !important;">
<a href="https://mycompany.com">
<img class="top-image" 
src="https://mycompany.com/images/webb_logo_.png"
style="line-height: 1;width: 100px;" 
alt="My Company Logo">
</a>
</td>
</tr>
<tr>
<td valign="top" class="side title" style="border-collapse: collapse;border: 0;margin: 0;padding: 20px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;vertical-align: top;background-color: white;border-top: none;">
<table style="font-weight: normal;border-collapse: collapse;border: 0;margin: 0;padding: 0;font-family: Arial, sans-serif;">
<tr style="display: none !important;">
<td class="head-title" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 28px;line-height: 34px;font-weight: bold; text-align: center;">
<div class="mktEditable" id="main_title">

{{{email_title}}}

</div>
</td>
</tr>
<tr style="display: none !important;">
<td class="sub-title" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;padding-top:5px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 18px;line-height: 29px;font-weight: bold;text-align: center;">
<div class="mktEditable" id="intro_title">

{{{email_subtitle}}}


</div></td>
</tr>
<tr>
<td class="top-padding" style="border-collapse: collapse;border: 0;margin: 0;padding: 5px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;"></td>
</tr>
<tr>
<td class="grey-block" style="border-collapse: collapse;border: 0;margin: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;background-color: #fff; text-align:center;">
<div class="mktEditable" id="cta">
<img class="top-image"
src="https://mycompany.com/images/learn.gif"
style="width:100% !important;" />
<br><br>

<a style="color:#000067; 
background-color:#FCE8ED;  
border: 10px solid #FCE8ED; 
border-radius: 3px; 
text-decoration:none;" href="https://mycompany.com/login.php">
Log In Your Account Now
</a>

</div>
</td>
</tr>
<tr>
<td class="top-padding" style="border-collapse: collapse;border: 0;margin: 0;padding: 15px 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 21px;">
<hr size="1" color="#eeeff0">
</td>
</tr>
<tr>
<td class="text" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;">
<div class="mktEditable" id="main_text">

{{{email_body}}}


<br><br>
<span style="font-style: italic;">
<small>
<strong>
    “ Build powerful and beautiful websites in 5 mins or less without coding ”
</strong>
</small>

</span>

</div>
</td>
</tr>
<tr>
<td style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 24px;">
&nbsp;<br>
</td>
</tr>
<tr>
<td class="text" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 24px;">
<div class="mktEditable" id="download_button" style="text-align: center;">

</div>
</td>
</tr>

</table>
</td>
</tr>
<tr>
<td style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 24px; padding: 20px;">
<div class="mktEditable" id="cta_try">
<table border="0" cellpadding="0" cellspacing="0" class="mobile" style="font-weight: normal;border-collapse: collapse;border: 0;margin: 0;padding: 0;font-family: Arial, sans-serif;">
<tr>
<td class="rm-col" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 24px;padding-right: 15px;"></td>
<td class="force-col" valign="top" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 24px;">
<table class="mb mt" style="font-weight: normal;border-collapse: collapse;border: 0;margin: 0;padding: 0;font-family: Arial, sans-serif;margin-bottom: 15px;margin-top: 0;">
<tr>
<td class="grey-block" style="border-collapse: collapse;border: 0;margin: 0;padding: 18px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 24px;background-color: #fff; border-top: 3px solid #00a5b5; border-left: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; width: 250px; text-align: center;">

<span style="font-family: Arial, sans-serif; 
font-size: 24px; 
line-height: 39px; 
border-collapse: collapse;
border: 0;
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
color: #555559; 
text-align: center;
font-weight: bold;">
Need Help?
</span>
<br>
My Company team is here to support you. 
Visit our Help Center.<br><br>


<a style="color:#ffffff; 
background-color: #00a5b5;  
border-top: 10px solid #00a5b5; 
border-bottom: 10px solid #00a5b5; 
border-left: 20px solid #00a5b5; 
border-right: 20px solid #00a5b5; 
border-radius: 3px; 
text-decoration:none;" 
href="http://mycompany.com/contact.php">
Contact Us
</a>

</td>
</tr>
</table>
</td>   
</tr>
</table>
</div>
</td>
</tr>                                           
<tr bgcolor="#fff" style="border-top: 4px solid #00a5b5;">
<td valign="top" class="footer" style="border-collapse: collapse;border: 0;margin: 0;padding: 0;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 16px;line-height: 26px;background: #fff;text-align: center;">
<table style="font-weight: normal;border-collapse: collapse;border: 0;margin: 0;padding: 0;font-family: Arial, sans-serif;">
<tr>
<td class="inside-footer" align="center" valign="middle" style="border-collapse: collapse;border: 0;margin: 0;padding: 20px;-webkit-text-size-adjust: none;color: #555559;font-family: Arial, sans-serif;font-size: 12px;line-height: 16px;vertical-align: middle;text-align: center;width: 580px;">
<div id="address" class="mktEditable">
<b>
My Company Inc
<br>
Tech Support : 24/7/365
</b><br>
<a style="color: #00a5b5;" 
href="https://mycompany.com">
Visit our website
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Related