Skip to main content

Is it possible to have images in automatic emails?

  • September 7, 2021
  • 16 replies
  • 801 views

Forum|alt.badge.img+1

Hello,

I am wondering whether it is possible to add an image to the body of the emails that are sent using automation? I want to add the logo of the company to the signature.

Thanks
Amir-Homayoun

16 replies

JonathanBowen
Forum|alt.badge.img+18

Hi @Amir-Homayoun_Javadi - no, is doesn’t look like you can do this. Although the email body field supports markdown, it doesn’t support image markdown. This would work in a .md file:

![Airtable](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Airtable_Logo.svg/640px-Airtable_Logo.svg.png)

But it doesn’t work in the email action. This ties in with this article which makes no mention of images.


kuovonne
Forum|alt.badge.img+29
  • Brainy
  • September 7, 2021

Actually, Airtable quietly added support for images in automation emails a while ago. You use an html image tag. You can even set the height and width of the image (unlike in markdown).

Per the bottom of this support article

We support using Markdown syntax and a variety of HTML tags within your emails to ensure things are formatted the way you’d like. We currently support using the following HTML tags: <b> , <br> <u> , <strong> , <em> , <img> , <a> and <span> tags. You can also include inline CSS by adding a style attribute to your HTML tags.


Forum|alt.badge.img+1
  • Author
  • New Participant
  • September 7, 2021

Jonathan and Kuovonne, thanks for your reply. Much appreciated.


JonathanBowen
Forum|alt.badge.img+18

Actually, Airtable quietly added support for images in automation emails a while ago. You use an html image tag. You can even set the height and width of the image (unlike in markdown).

Per the bottom of this support article

We support using Markdown syntax and a variety of HTML tags within your emails to ensure things are formatted the way you’d like. We currently support using the following HTML tags: <b> , <br> <u> , <strong> , <em> , <img> , <a> and <span> tags. You can also include inline CSS by adding a style attribute to your HTML tags.


@kuovonne - I tried a regular html <img> tag too, but this doesn’t work for me either. Did you get this working?


JonathanBowen
Forum|alt.badge.img+18

@kuovonne - I tried a regular html <img> tag too, but this doesn’t work for me either. Did you get this working?


Oh I see why this didn’t work. It is a bug really. This image:

https://dl.airtable.com/.attachments/e5d6574fb1f4c9cb38133a2bb7fa2f12/cde44e23/pcgb18_0338_fine.jpg

has underscores in it and it doesn’t render.

This image (no underscores) does:

https://1.cms.s81c.com/sites/default/files/2021-08-17/2020%20Corporate%20Environment%20Report.png

And by chance I had picked one with underscores


kuovonne
Forum|alt.badge.img+29
  • Brainy
  • September 8, 2021

@kuovonne - I tried a regular html <img> tag too, but this doesn’t work for me either. Did you get this working?


I’ve done it a while ago. I put the entire body of my message in a long text field and then included only that one field in the message body. If you try to put it in piecemeal, you might experience some variations.


kuovonne
Forum|alt.badge.img+29
  • Brainy
  • September 8, 2021

Oh I see why this didn’t work. It is a bug really. This image:

https://dl.airtable.com/.attachments/e5d6574fb1f4c9cb38133a2bb7fa2f12/cde44e23/pcgb18_0338_fine.jpg

has underscores in it and it doesn’t render.

This image (no underscores) does:

https://1.cms.s81c.com/sites/default/files/2021-08-17/2020%20Corporate%20Environment%20Report.png

And by chance I had picked one with underscores


I recall that including links in emails sometimes had problems too and needed escaping. Airtable got confused and would think that the underscores were markdown syntax.


JonathanBowen
Forum|alt.badge.img+18

I recall that including links in emails sometimes had problems too and needed escaping. Airtable got confused and would think that the underscores were markdown syntax.


Yep - I think that’s what it is doing. As it is inside the src attribute at this point, you would think it would deal with this, but a bug that can be workaround I guess, without too much issue. As you say, forming the full html content in a long text field is also a nice way of doing this


Forum|alt.badge.img+1
  • Author
  • New Participant
  • September 8, 2021

I’ve done it a while ago. I put the entire body of my message in a long text field and then included only that one field in the message body. If you try to put it in piecemeal, you might experience some variations.


@kuovonne sorry, this might be a very simple question. But how do you “put the entire body of the message in a long text field and then included only that one field in the message body”? Can you copy-paste a sample here? Thanks.


kuovonne
Forum|alt.badge.img+29
  • Brainy
  • September 8, 2021

@kuovonne sorry, this might be a very simple question. But how do you “put the entire body of the message in a long text field and then included only that one field in the message body”? Can you copy-paste a sample here? Thanks.


I do this with scripting. I have scripts that generate records in an email table with the body fully formed. This lets me have many different email templates that I use with button fields, but takes up only one of the twenty-five automations.


Forum|alt.badge.img+1
  • Author
  • New Participant
  • September 9, 2021

I do this with scripting. I have scripts that generate records in an email table with the body fully formed. This lets me have many different email templates that I use with button fields, but takes up only one of the twenty-five automations.


Thanks @kuovonne I am on the free version, so no scripting. I might get back to this when I have more complicated tasks. Thanks again.


Anna11
Forum|alt.badge.img+12
  • Inspiring
  • May 3, 2022

Just wanted to chime in to say that I came here looking for this answer (HTML tag) and it worked perfectly for me - both using Airtable’s native email and using the Gmail integration. Yay!

A few notes:

  • Like @JonathanBowen I initially used a URL with underscores in it and it failed - but URLs with no underscores worked great.
  • In the Airtable email, the image was distorted on mobile - but using Gmail, the image dynamically adjusted. I’ll be using Gmail!

Anna11
Forum|alt.badge.img+12
  • Inspiring
  • September 28, 2022

As I posted above, I was able to successfully implement an HTML image embed code in an Airtable Automation Gmail email by hard-entering the code into the Message. More recently, I took it one step further and used a formula (below) to generate unique a HTML image embed code for each of about 50 recipients, then inserted it as a dynamic field into the Message. At first I thought it didn’t work, but after re-testing the trigger, it did! Hope this helps someone else trying to do something similar in the future.

"<img src=" & {Image Link} & " width=800 alt=Alt Text" & ">"

Forum|alt.badge.img+8
  • Participating Frequently
  • January 2, 2023

I just tried and it worked, you can have underscores in the url if you escape them.

For instance, if your image is https://someurl.org/your_image.png,

<img width="200" height="26" src="https://someurl.org/your\_image.png">

will work.


Forum|alt.badge.img+3
  • New Participant
  • June 8, 2023

I just tried and it worked, you can have underscores in the url if you escape them.

For instance, if your image is https://someurl.org/your_image.png,

<img width="200" height="26" src="https://someurl.org/your\_image.png">

will work.


I just keep getting this 

 


Spruce
Forum|alt.badge.img+7
  • Known Participant
  • November 28, 2023

Hi @Anna11 , thank you so much for helping us solve this. I am having an issue though. The image shows up, but the link doesn't work.

This is my version of your suggestion, what am I getting wrong? 

<img src="https://sprucecircularity.com/assets/images/image12.png?v=f55c7e34 & {https://sprucecircularity.com} &" width=150 alt=Alt Text" & ">

I also pulled this HTML code off another website and tried it, but it also only displays the image without being a link:

<a href="https://www.educative.io" target="_blank">

<img src="https://www.educative.io/static/imgs/logos/logoMarkv2.png"> </a>

Thank you so much!
Devon