Dynamic Email using sendgrid API & Send Inline images

Table of Contents
    Add a header to begin generating the table of contents

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

    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

    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
    • 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

    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-us/