How To Send Dynamic Images In html Emails...?

I want to Send a list of images inside of a transactional email…

It isn’t possible with sendgrid.

Does anyone have any idea how it can be done?

I just figured this out today. Insert a code block on your SG template where you want the picture. In the code block put <img src="%VAR1%"> (or whatever your desired VAR # is) Then if you are pulling the desired dynamic image from a picture uploader you want to set the corresponding variable in your workflow as “https:picture uploader’s value” make sure to put “https:” before the dynamic input because when you call the URL of an image it will start with “//” and without the “https:” it will surely error.

Hope this helps

5 Likes

I’m not sure you’ve given enough info to help here. I’m trying to do something similar, but am lost at what we’re supposed to do with %VAR1% on the Bubble side…

Where in the workflow?

This worked perfectly.

1 Like

Can you help me out? Not sure where in the workflow to set this variable.

You use the sendgrid send email action and pass the image as a variable. i.e. “https:%VAR1%”

This is interesting. When you want to attach an image hosted on amazon s3, the url being sent in the API begins with a “//”

04 PM

But when the image is hosted on the Facebook CDN (e.g. profile pictures from facebook profile), the full image is being passed

27 PM

Anyone know why that is?

so depending on your apps/preferred/needed protocol you just append it to the front… by the way if you have not seen it yet

This will let you create awesome looking email, right in bubble, with attachments. feel free to reach out if you require a tweaked outside the commercial store version…

A few aditionnal info on how it worked for me:

  • You could simply put <img src="%VAR1%"> in your HTML block
  • alt="(image bloquée)" is for alternative text (when the image isn’t displayed properly)
  • align="middle" is probably useless (if you only have your variable in that HTML)
  • <center></center> is to have the image centered in you template. You could also use “right” / “left” / “top” / “bottom”
  • I didn’t need to tweak the variable in Bubble with “https: file url” (eg adding the “https” part)
2 Likes

Every time I create a template and link back to bubble it send the email but fails to fill in the TO: field and therefore the email never sends. Any ideas?

Thank you.

The error I receive on the send grid portal is “This email was not sent because the SMTPAPI header was invalid.”

Likely some of your data needs HTML escaping. Does it work for fixed test data rather than dynamic data?

Hi ! How do you set this variable ? I can’t find it [edit : solved]

thx lot !

For those who are looking for how to attach a dynamic image with Sendgrid from the image uploader, here how i managed to do it.

Set a variable in your email template on sendgrid side, using a code module : <img src="{{VAR1}}">
On Bubble > Workflow, add a Send email action and Add a Substitution tag VAR1 = https:PictureUploader A’s value

Done !

3 Likes

What if we wanted to take that image, which is square, and turn it into an circle avatar like they use right here when we post? How do we size and round the image to produce a circle? Would help to make a personal touch in some emails if they could see the face of the sender. Thanks

How do you insert “http:” ? Did you simply type then add the picture’s value? It seems the fiend does not accept any text… When inserting dynamic value it delates out “HTTP:”

Hi everyone, I need some help.
I am sending a dynamic image from a bubble to a send grid template.
But there is a problem, when I open the email in browser, Gmail service removes the link from the html code.
But when I receive emails to my @outlook.com, @yandex.by or any other mailboxes, everything works correctly.
I have configured to send the logo via base64.
I have attached some screenshots and hope someone knows how to solve this problem. Thanks.


Снимок экрана 2023-07-20 в 18.40.07