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