Add image in Signature using Gmail send email action

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

Page 1 / 2

Very cool! 😃🙌 Note that images in both Google Drive and Dropbox (and other cloud storage systems) can be made public, so you can use any cloud storage system that you would like for this.

Been looking for a way to do this for years now. However, my image is not loading.

Do you have any idea what could be?

Been looking for a way to do this for years now. However, my image is not loading.

Do you have any idea what could be?

Hey @giulia_mg,

Where do you store your image and what type of the file is it?

Thanks

Hey @giulia_mg,

Where do you store your image and what type of the file is it?

Thanks

Hey Dimitris!

I've stored in on cloudinary as a png file.

Hey Dimitris!

I've stored in on cloudinary as a png file.

Hey @giulia_mg,

You need to use the public url for the asset. Here is the guide from cloudinary. To test if the url is public, you can copy the url from the asset and past it on an incognito browser and see if this search returns the image, if it returns then you have the right url 🙂

In case it doesn't work please post here and it would be pleasure to check case 🙂

Thanks

Hey @giulia_mg,

In case it doesn't work please post here and it would be pleasure to check case 🙂

Thanks

Hey @Dimitris_Goudis

So, I checked and my email signature is public on cloudinary, but still not working.
This is how I'm writting on Airtable automation:

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

Also, not so sure of which height and width would be the best fit...Any sugestion?

Thanks!!!

Hey @Dimitris_Goudis

So, I checked and my email signature is public on cloudinary, but still not working.
This is how I'm writting on Airtable automation:

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

Also, not so sure of which height and width would be the best fit...Any sugestion?

Thanks!!!

Hey @giulia_mg. Thanks for testing the script and texting me back. Regarding the url the problem is on brackets please clear them form the script for example: src=https://res.cloudinary.com/duqasmcuv/image/upload/v1684946215/Central_de_Pedidos_gxqpwm.png Also the underscores need encoding, so the easiest way to do this is to rename the document with no spaces and underscores. Regarding the image dimensions my suggestion is to perform some tests and choose the best on your image also. Please feel free to text us back for any further question. Yours sincerely, Dimitris Goudis

Dimitris, this worked great!!
Thank you soo much for all your help!

@Dimitris_Goudis is there a way to link the signature photo? Would like to link the image to my website if possible.

Hey @Cristina_Garcia,

thanks for your message. This is very nice idea. Yea you can do it you just need to update the html code by adding the tag with the redirection link and will work. 🙂

Yours sincerely,
Dimitris Goudis

Hey @Cristina_Garcia,

thanks for your message. This is very nice idea. Yea you can do it you just need to update the html code by adding the tag with the redirection link and will work. 🙂

Yours sincerely,
Dimitris Goudis

What would be the formula to link the photo of the signature?

Hi @Dimitris_Goudis !!

Thank you for the code! I tried using it but the image doesn't appear. I have my signature image in Google Drive but made public (tried it on incognito window). When I try running it this is what appears instead of the image:

This is how I put the code:

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

Hey @Arturo_Hinojosa,

Thanks for your reply! the image source should be in a public url while the google drive's urls are not public. To test it try to open the images url from an incognito window, if the image appears then you can use this link in your code.

Yours sincerely,
Dimitris Goudis

What would be the formula to link the photo of the signature?

Hey @Cristina_Garcia,

You have to add the href tag before the img tag in code. Please check the instructions from here.

If you have troubles again please feel free to DM me 🙂

Yours sincerely,
Dimitris Goudis

Hello,

I'm wondering if publishing the signature via Canva will work? It appears it is not for me but i'm wondering if I am doing it wrong. This is how it shows in the bottom of my email when I test it:

This is what I am using as the code in the automation:

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

Here is another variation I tried filling in the length and height and all it did was leave an empty space at the bottom of the email:

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

Thank you

I just have a question regarding this code. We created our signature using WiseStamp, when we pull it uo it doesn't seem to give us a URL but it does give us a HTML code but when we drop this into airtable it partially works, some images and words do not show up. Would you know anything about WiseStamp signatures?

I just have a question regarding this code. We created our signature using WiseStamp; when we pull it up, it doesn't seem to give us a URL, but it does give us an HTML code. But when we drop this into airtable it partially works; some images and words do not show up. Does anyone know anything about WiseStamp signatures?

Hello,

I'm wondering if publishing the signature via Canva will work? It appears it is not for me but i'm wondering if I am doing it wrong. This is how it shows in the bottom of my email when I test it:

This is what I am using as the code in the automation:

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

Here is another variation I tried filling in the length and height and all it did was leave an empty space at the bottom of the email:

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

Thank you

Hey @JMANHOMES,
I am not sure is canva link are public but you can give it a trial and share your feedback 😎

Hey @antoninaschimdy,

Not sure what's going on, are your images stores on a public url?

Thanks

Hey @antoninaschimdy,

Not sure what's going on, are your images stores on a public url?

Thanks

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

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.

Hey @JMANHOMES,
I am not sure is canva link are public but you can give it a trial and share your feedback 😎

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.

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

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!

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

Reply

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded