BlogUse Cases

    How to Use HTML to Send Emails With Embedded Images

    What this scenario does: Gets images stored in Google Drive and emails them as embedded images. 

    Level Of Difficulty: Intermediate 

    Implementation Time: Approximately 15 mins 

    Assumptions: You have a Google account with all connections added (Gmail/Google Drive). You are familiar with the functions of an Array Aggregator and HTML

    In certain instances, sending emails with embedded images improves the sharing of knowledge and boosts engagement with the intended audience as opposed to sending emails with attachments since some people may find it tedious to first download and then view. Embedding the images works exceptionally well when sending product promotions to your customers which is the example used in this tutorial. Let’s jump in.

    Configuring the Scenario


    The scenario consists of the following modules:

    • Google Drive > Watch files in folder 
    • Array Aggregator
    • Gmail > Send an email

    Here's the scenario: Google Drive and Gmail Integromat scenario
    First is the Google Drive > Watch files in folder module. Select the folder that you want to watch. Since you are emailing image files, upload only images files to this folder:
    Google Drive Integromat module settings
    You can set the Maximum number of downloaded files that will be returned during one cycle execution. Let’s set this to 3 as that would be the optimal number of images to be displayed in an email:
    Google Drive Integromat module settings
    Next is the Array Aggregator which is used to convert multiple bundles of data into a single array containing collections of specified items - the 3 images in this case. The Source file is automatically selected. Under Target Structure Type, select Attachments. Under Source file, select the Google Drive > Watch files in folder option: Array aggregator Integromat module
    Now you need to map the File ID outputted by the Google Drive module to the Content - ID field:
    Google Drive and Array aggregator integration
    Let’s move on to the Gmail > Send an email module. As you are already familiar with, you need to enter the email address of the recipient/s and the subject line. Now copy the HTML content, paste it in the content box and map the Array[1] Content-ID element. Here you can see that the structure is created for 3 embedded images: Send Gmail email module
    Lastly, map the Array element outputted by the Array Aggregator to the Attachments field:
    Gmail and Array aggregator module integration
    The scenario has been fully configured and executed successfully. Let’s take a closer look: The image files were uploaded to Google Drive, aggregated and sent as embedded images in a single mail:
    Scenario preview
    There you have it! Hope you found this quick tutorial insightful.

    Happy Automating! 🙌

    Do you like this article?
    Don't forget to share it!
    Share

    Learn how to make your business better.

    Subscribe and get the best industry tips, app hacks, and automation insights straight to your inbox.

    Get started now!

    Sign up for a free Integromat account today!