Add image in Signature using Gmail send email action

Dimitris_Goudis · ‎Apr 07, 2023

Hey all,

Having a request from a client I found a way to add image in our signatures for email we send using Gmail action in Airtable.

Due to the fact that the image element is not included in Airtable's markdown list we can add it by adding a piece of html code in our action. Below is the code and the explanation of using it.

</td><td width=96 valign=top>

<div class=t102 style="display:inline-table;text-align:initial;vertical-align:inherit;width:48.97959%;max-width:96px;">

<table role=presentation width=100% cellpadding=0 cellspacing=0 class=t104><tr>

<td class=t105><div style="font-size:0px;"><img class=t106 style="display:block;border:0;height:auto;width:15%;Margin:0;max-width:25%;" width={image_width} height={image_height} src={image_public_url}></div></td>

Comments about the code:

{image_width} & {image_height} are display settings for the image you want to add in your signature. Please keep in mind that those settings are effected also from the table element display settings. So my recommendation here is, "feel free to customize it on your fit" 😎 (example width=50 height=50)
The {image_public_url} is the public URL for the image. This URL needs to be public so sharing URLs from Google Drive, Drobox etc. will not work. 😭

For those who already have a website, I would recommend to use an image's path from there, it works 100% 😎

Hope this will help you make improvements and create better user experiences. Below are some screenshots from an example. Please feel free to post here any kind of question and any incredible idea for improvements 😊.

Last but not least, in the same way we can embed call to action buttons in Gmail action 😉

Yours sincerely,
Dimitris Goudis

antoninaschimdy · ‎Oct 25, 2023

Is amazon photos public? that is where they are currently stored

antoninaschimdy · ‎Oct 25, 2023

I actually was able to get it working, but for some reason no matter which Height and width size I input it shows up small. see attached photos. I have tried variations of sizes from 400x100 to 16000x4000 and the size of the signature has not changed.

JMANHOMES · ‎Oct 26, 2023

I believe canva can make the links public? they give you and embed code or a smart link code to use which is only provided if it is live.

Dimitris_Goudis · ‎Oct 27, 2023

Hey @antoninaschimdy,

This because of the table's dimensions in the code. I think in your case it would work better to add simply the html image tag and add there the dimensions that refer on the image asset.

Thanks

Jessie31 · ‎Dec 12, 2023

Hi Dimitris, this is amazing. One question, where in the html code that I can change the height of the space between the image and my signature(text)? Thank you!

Dimitris_Goudis · ‎Dec 12, 2023

Hey @Jessie31,

Thanks for your reply! As soon as in this piece of code the text is out of the html element table there is no specific place to update the line high. You have the following options here and hope one of them work for you:

- You can include the signature text in your html part and add the high settings
- You can use shift enter and not simple enter to add a new line, this will create move to the next line but it will not create a new section in you text

Do those options make sense for you?

Thanks.

Yours sincerely,
Dimitris Goudis

eranggg · ‎Jun 12, 2024

Hi Dimitris, I tried it and it didn't load the image.

that's the code im using:

</td><td width=96 valign=top>

<td class=t105><div style="font-size:0px;"><img class=t106 style="display:block;border:0;height:auto;width:15%;Margin:0;max-width:25%;" width=200px;height=200px;src=https://drive.google.com/file/d/11jAGxQsqdxeDEABCg2K_Jze2oUA7FlVk/view></div></td>

do you know why it didn't work?