Dynamic Email using SendGrid APIs with 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.

SendGriid Email using APIs

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  

SendGrid Automation create sender Identity

Use of Dynamic Templates to send Dynamic Email using Dynamic Email using SendGrid APIs with 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

SendGrid Dynamic Template send Images inline

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

SendGrid Dynamic Template send Images inline

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

SendGrid Email APIs

Creating Template in Dynamic Email using SendGrid APIs with inline images

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

SendGrid Dynamic Template

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
  • And then add the value in the template

Sendgrid dynamic template using APis and inline image

{"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

Sendgrid dynamic template using APis and inline image

Issues faced in Dynamic Email using SendGrid APIs with inline images

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

Sendgrid Access issues not able to login IP locked out

, 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);

References

API to send email

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

Navigate to Dynamic templates

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

Integration guide

https://app.sendgrid.com/guide/integrate

Thanks for reading! Hope you found this useful. Please share your comments and feedback

About Peritos 

To know more about our service offerings visit the pages below.

https://peritossolutions.com/services/

For any business inquiry please drop us a message on our website

https://peritossolutions.com/contact/