JavaScript

SendGrid HTML Email with Embedded Images

Demonstrates how to send an HTML email with embedded images using SendGrid.

Note

This example is intended for running within a Chilkat.Js embedded JavaScript engine. All Chilkat JavaScript examples require Chilkat v11.4.0 or greater.

JavaScript

var success = false;

// This requires the Chilkat API to have been previously unlocked.
// See Global Unlock Sample for sample code

var req = new CkHttpRequest();
var http = new CkHttp();

// First.. load a JPG file and build an HTML img tag with the JPG data inline encoded.
// Our HTML img tag will look like this:
// <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA3ADcAA..." alt="" style="border-width:0px;" />
var bdJpg = new CkBinData();
success = bdJpg.LoadFile("qa_data/jpg/starfish.jpg");
if (success == false) {
    console.log("Failed to load JPG file.");
    return;
}

// Note: HTML containing embedded base64 image data may not be visible in all email clients.
// For example, GMail might not display the image, but viewing in Outlook might be OK.
var sbHtml = new CkStringBuilder();
sbHtml.Append("<html><body><b>This is a test<b><br /><img src=\"data:image/jpeg;base64,");
// Append the base64 image data to sbHtml.
bdJpg.GetEncodedSb("base64",sbHtml);
sbHtml.Append("\" alt=\"\" style=\"border-width:0px;\" /></body></html>");

var json = new CkJsonObject();
json.UpdateString("personalizations[0].to[0].email","matt@chilkat.io");
json.UpdateString("personalizations[0].to[0].name","Matt");
json.UpdateString("from.email","admin@chilkatsoft.com");
json.UpdateString("subject","Test HTML email with images");
json.UpdateString("content[0].type","text/html");
json.UpdateSb("content[0].value",sbHtml);

http.AuthToken = "SENDGRID_API_KEY";

var resp = new CkHttpResponse();
success = http.HttpJson("POST","https://api.sendgrid.com/v3/mail/send",json,"application/json",resp);
if (success == false) {
    console.log(http.LastErrorText);
    return;
}

console.log("response status code: " + resp.StatusCode);
// Display the response.
// If successful, the response code is 202 and the response body string is empty.
// (The response body string may also be empty for error response codes.)
console.log(resp.BodyStr);