Help

Re: Add image in Signature using Gmail send email action

2889 1
cancel
Showing results for 
Search instead for 
Did you mean: 

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 😉

Dimitris_Goudis_0-1680858456960.png

Dimitris_Goudis_1-1680858481434.pngDimitris_Goudis_2-1680858513865.png

airtable_signature.png

 

Yours sincerely,
Dimitris Goudis 

25 Replies 25
ScottWorld
18 - Pluto
18 - Pluto

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.

giulia_mg
6 - Interface Innovator
6 - Interface Innovator

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?

giulia_mg_0-1684947397198.png

 

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

<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={https://res.cloudinary.com/duqasmcuv/image/upload/v1684946215/Central_de_Pedidos_gxqpwm.png}></div></td>

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!

Cristina_Garcia
5 - Automation Enthusiast
5 - Automation Enthusiast

@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

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

Arturo_Hinojosa
4 - Data Explorer
4 - Data Explorer

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:

Screenshot 2023-08-02 at 16.36.16.png

 

 

This is how I put the code:

</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=100% height=100% src=https://drive.google.com/file/d/1N7R1ivK4qMupA1N-1Ep-YGul81s54LFB/view?usp=sharing></div></td>

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

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 

JMANHOMES
4 - Data Explorer
4 - Data Explorer

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: 

JMANHOMES_0-1698085160150.png

This is what I am using as the code in the 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>

 

<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=https://www.canva.com/design/DAFujmo-9s4/view></div></td> 

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>

<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=90 height=90 src=https://www.canva.com/design/DAFujmo-9s4/view></div></td>

Thank you 

antoninaschimdy
4 - Data Explorer
4 - Data Explorer

Hi 

 

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?

 

antoninaschimdy
4 - Data Explorer
4 - Data Explorer

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?

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