Dynamic Email using sendgrid API & Send Inline images

In this article, we will be discussing how to send Dynamic Email using SendGrid APIs & send inline images with the text. Also, find the code snippet as well as some challenges we face and how we overcame them.

The article consists of –

Setting up email sending
Dynamic templates & Handlebars Introduction
Finding API keys
Creating Templates
Testing API s
Some issues faced
References

Hope you find this article useful and eventually it helps you manage to send emails from SendGrid dynamically. Using this powerful feature to send Dynamic Email using SendGrid APIs & send inline images with the text it greatly improves user experience and can be easily integrated into any custom application.

Setup email sending

These are some initial steps to help you get started on the email sending from SendGrid.

Add host to DNS:

https://app.sendgrid.com/settings/sender_auth/verify?link=1876865&domain=9191875

Adding as an individual sender for the test system. For production, this may be a different option as we are using for POC so to quickly set up it is recommended to add as a single sender.

https://app.sendgrid.com/settings/sender_auth/verify?link=1876865&domain=9191875

Using below for test system

Add all sender information and confirm via email

Use of Dynamic Templates to send Dynamic Email using SendGrid APIs & send inline images

In order to use the email from API and populating dynamic values, you should understand the handlebars and how they can be used.

https://sendgrid.com/docs/ui/sending-email/how-to-send-an-email-with-dynamic-transactional-templates/#design-a-dynamic-transactional-template

To create a dynamic template follow the below steps

https://mc.sendgrid.com/dynamic-templates

Create a dynamic template
Note the template ID d-bb9f40e39bf2405dafd53ed65**
Add version

Select the design using a blank template or from an existing SendGrid Email Design

In order to populate dynamic values, you could use the handlebars as mentioned here

https://sendgrid.com/docs/for-developers/sending-email/using-handlebars/#personalizing-email-with-handlebars

Find API Keys:

https://app.sendgrid.com/settings/api_keys

Create keys if you have not used the APIs before with full access or you could restrict as per the options below

Creating Template

Below is a template content created;

Note: if you want to send HTML code then use 3 braces else two should be fine. For Example, in the below case, I want to send the image in the Message field hence included 3 braces.

From the builder, you need to select the text block or code block as per the information you want to see in the email and logically group them

Test API

Let’s make use of the Sendgrid API to send the email

API to send the email – Follow the below steps

https://sendgrid.com/docs/API_Reference/api_v3.html

In the dynamic template section for sending mails we would update below information:

Click on Try it out
Update bearer token or API key
Template ID
Also, update From and To Email to be sent
Add the value in the template

{"personalizations": [ { "to": [ {
"email": "test.03@gmail.com",
"name": "TestID" } ],
"dynamic_template_data": {
"FirstName": "Test1",
"LeadName": "Lead1",
"Message": "this is your message" } } ],
"from": {
"email": "info@peritossolutions.com",
"name": "John Doe" },
"reply_to": {
"email": "info@peritossolutions.com",
"name": "John Doe" },
"template_id": "d-bf4abd947b9b4ff7a9090d96" }

2.2 Updated code if you want to send an image in the email

Use this code to send an image in the mail by converting to Base 64

{ "FirstName": "Ben", "LeadName":"Lead1", "Message":" Test. 
" }

This is not the full string as base 64 is a long value so it is a snippet.

Update the blue text with the base 64 value you get from the below links

https://base64.guru/converter/encode/image

https://base64.guru/converter/decode/image

This is how the email would look in the preview

Issues faced

3.1 In the free account they keep blocking emails

The email keeps getting blocked from being sent out and Sendgrid asks you to whitelist the IP address so it can continue to send the emails. Note if your IP keeps changing this can be very difficult to achieve.

3.2 Locked out of SendGrid account

When sending emails while SendGrid you might see emails being blocked and in that case, it asks you to use IP access management as below

Note that we were using Azure as the application and adding all IP relevant steps to it

, however, forgot to add our own IP and got locked out as the system did not allow us to login

The process to get yourselves is cumbersome and extremely inefficient. You need to fill this form to unlock yourself

https://support.sendgrid.com/hc/en-us/requests/new#ipam-lockout

Also for some reason, they do not allow you to send email to verify yourself (Weird considering we are using an email service provider ) but they prefer to call you on your number so highly recommended to maintain your account and also if you are a paid user it is easier to get unlocked

After a series of follow-ups, emails being sent out, and tweeting them we created a new account

3.3 Image not sent from APIs even though it does show up in the preview

The API somehow does not convert the base 64 image in the email being sent out. So we decided to follow a workaround as we wanted to send it inline we had to use attachment functionality

Attachment attachment = new Attachment();
string currentSrcValue = x.GetAttributeValue("src", null);
currentSrcValue = currentSrcValue.Split(',')[1];//Base64 part of string
string contentId = Guid.NewGuid().ToString();
attachment.Content = currentSrcValue;
attachment.Type = "image/png";
attachment.Disposition = "inline";
attachment.ContentId = contentId;
attachment.Filename = contentId + ".png";
x.SetAttributeValue("src", "cid:" + attachment.ContentId);
attachments.Add(attachment);