[HOWTO] Insert an image in an HTML AI-generated email

Hey,

I needed to insert a logo in an email sent by my AI-powered workflow and wanted to share my progress and what I’ve found out along the way :

Context

The email HTML body is created by an AskAI node and handed over to the Gmail Sender node.

V1

Originally I had the logo available only as a hosted SVG file. SVG doesn’t get displayed properly by email clients like Outlook, so I had to convert it to PNG base64 from the SVG file URL using a Python Run Code node and then hand over the base64 to the AskAI node in charge of writing the email HTML. Cumbersome but it did work :white_check_mark:

V2

Then switched to a simpler workflow by finding a way to host a PNG copy of the logo and simply provide the image file URL to the AskAI node. Worked as well and a lot quicker :rocket:

How to host the image file (i.e. get a file URL)

I thought I could use Google Drive to host the image file with a URL of the type
https://drive.google.com/uc?export=view&id=YOUR_FILE_IDbut it actually does not work.

The solution I found was to use the logo in my Gumloop workflow interface and get the image link from the interface (which gives me a link of the type https://storage.googleapis.com/agenthub-public/…/logo.png). Works perfectly and is totally self-contained :ok_hand:

Hope it can be helpful to others ! And let me know if you have any question.

Cheers,

Romain

Amazing, thanks so much for sharing! :raising_hands:

1 Like