Forum Academy Marketplace Showcase Pricing Features

Sending email with Sendgrid - general options

Hi,

need some help in understanding how Sending email works.

I already use the standard sender in bubble, so far only for some emails related to account and registration. Everything works, even if there’s not template or design stuff.

Then i registrered on Sendgrid, get the api and inserted on bubble.

Now i want to use a template, in order to make the emails look nicer. The problem is that, after inserting the template id in the setting, every email i send is the same. I mean, seems that the template actually becomes the new mail, replacing and deleting the body of the email (something that i don’t want to happen of course)

Am i missing something in the process?

In case anything is not clear, please tell. Thank you in advance for your help

Andrea

2 Likes

As far as I have tried Sendgrid plugin. The transactional template will be sent as it is to everyone. I’ve tried to insert custom values (i.e., to personalize user name) but it never worked too.

On the bright side, the delivery is very reliable and looks great.

You probably want to install the plugin then use transactional templates, create a different template for each use case. You can send dynamic information to the template. In the plugin it has lots of Variables you can send and in the sendgrid template you just add {{VARX}} to represent that variable data.

i.e.

Hello {{VAR1}}

then in bubble send VAR1 as the users firstname.

Hope that points you in the right direction.

Simon

3 Likes

Thank you @simon,

i’m also exploring the way you mentioned. So far i’ve faced some issues in using that specific function, but i’ve already contacted the plugin support, so we are working together to solve the bug (apparently looks like a bug, but who knows…)

However, i wrote this post cause i can’t understand the meaning of inserting a template in the general setting.

If i insert the template in the generale setting (right below the api key), that template is applied in every mail sended by my website, also replacing the body. I’m pretty sure i’m missing something, otherwise the function is totally without any sense.

Can someone please clarify this to me?

Thank you

Andrea

Hi, @simon

It never worked until I copied {{VAR1}} in your comment and pasted it in the plugin. Your comment is a magic!

Still wonder why I typed {{VAR1}} myself never worked.

Thank you very much, you made my day :slight_smile:

2 Likes

Hey everyone… good to see some details about setting up Sendgrid, as it took me down some back alleys when I set it up a few weeks ago.

For the record, I got stuck for a while until I realised that you need to set up a Legacy Transactional Template in Sendgrid, rather than a normal one. I’m completely unclear about whether you can access a normal Transactional Template from within Bubble, and why you’d want to do that.

I’ve yet to play with the {{VAR1}} feature but look forward to trying that this week. So are you guys using that with the @copilot plugin?

It would be great to see any other details posted here from experience of what works and how to use it!

Best wishes,
Antony.

1 Like

Any other people experiencing this?

About to start using Sendgrid myself, so the timing on this post is great.

Hi, @antony @SenorPelota

I have just done it right and want to share with you guys. So you don’t have to waste your time like me, lol.

First, go to Sendgrid panel on the left > Templates > Transactional

Then Create Template at the top right corner > Create template name > add a version name. Also copy the Template ID in the red circle.

In add a version, select Design Editor

In your email subject, body or even buttons, you can put variable data by adding {{VAR1}}

Now go to Bubble plugins tab > Send emails with SendGrid plugin > put your API key

Go to Bubble workflow > plugins > SendGrid - Send email

Paste Template ID (Dynamic type starts with d-)

Go down to substitution tags to add variable values, you can have many variable by putting {{VAR1}} {{VAR2}} {{VAR3}} in the template and adding VAR1, VAR2, VAR3 here
38

Done! Your email will go “Hi, your username”

Hope this helps :slight_smile:

10 Likes

Hey @privilet.info the Pixels Poet… Thanks soooo much! It makes such a difference when we can help each other out like this. I will take a look at it later on today.
I have an existing setup which uses the Legacy Templates… be interesting to compare the two and see what the differences are. I’ll have a play and update you on all I find!
Best wishes,
Antony.

Antony,

Just to let you know when you move to dynamic templates and update the SendGrid plugin you loose all your previous Bubble sendgrid config. When I moved from legacy to the new ones it took me a day to find and update all my templates and bubble code. (enjoy :slight_smile:)

Simon

1 Like

Oh wow, thanks for that input @simon! I didn’t get around to it today, but it will definitely be on my agenda tomorrow, so I will bear your experience in mind…

hi @privilet.info,

thank you for your explanation. unfortuantely i’m afraid there’s a bug, because today i already tried to do exactly what you did and showed, but still, i don’t see the variable changing. Infact, in the received email, i still see {{VAR1}}.
Then i sent an email to the developer of the plugin. Waiting for a reply now…

Hi, @escaperoomers

That’s what happened to me before as I said in reply 5. I used {{VAR1}} from Simon’s reply 3 and it worked!

Try it and let’s see.

YAS THANK YOU!!! Been hunting through their API guide all day for this.

The detail and step by step is much appreciated.

I need to send several VAR1’s. Im assuming I just keep adding the number for each one like VAR2, VAR3 etc right?

Correct. I’ve used up to VAR7 !

1 Like

Does anyone know why a dynanic image would not work in a sendgrid email?
For example, here is the HTML in my email:

              <td style="padding: 20px 0; text-align: center">
                    <img src={{VAR1}} width="200" height="50" alt="this is the image" border="0" style="height: auto;  font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                </td>

and then in bubble i use:

24%20PM

But the image doesn’t show. Anyone know why this would not show the image in the email?

Thanks!

Hey @tmuelle1,

Looks like you don’t have valid HTML. Attributes are typically encapsulated in quotation marks:

<img src="{{VAR1}}"

Might not be the only issue, but give it a go and see what you find! :slight_smile:

2 Likes

I’m adding a few comments here that might help others trying to implement better email messages through SendGrid, particularly variable images:

-The Plugin is now just called “SendGrid”, by Copilot (thanks @copilot)

-Thanks @privilet.info for the walkthrough, that is still correct, with slightly updated documentation available in the plugin

-Dynamic templates work, they do not just have to be Legacy

-You now can name the variables whatever you want, e.g. “firstName” instead of VAR1. Note: when in the substitution tags, just put “firstName” (no quotes), and then in your dynamic email template, you can put {{firstName}} – in SendGrid it asked me to define my “handlebar” dynamic links, and I entered “{{” and “}}” as my handlebars

-For dynamic images, @tmuelle1, I was able to get it work with “https:” at the beginning of the image. When you upload an image to bubble, it will link to “//s3.amazonaws.xxxxxxx”, for me to get the image to work in SendGrid I had to add https: to the beginning. E.g., set {{imageVariable}} = “https:[insert dynamic link here]”. I also had some images that were .svg format, which won’t work in SendGrid / in the receiving email client (jpg, gif, or png needed I think).

-I found the easiest way to work with images in SendGrid was to drag and drop the image module, and then edit the source code to put in the {{imageVariable}} tag

Cheers,
Ken

6 Likes

Hi there - if anyone is familiar with Sendgrid and JSON, perhaps you could help me out: (@copilot?)

I’ve not used JSON before but am trying to add categories to my Sendgrid template emails, so that I can track open and click rates by category (otherwise it doesn’t seem possible to segment Sendgrid stats by email). Adding categories is based on a suggestion from the Sendgrid support team.

I’m trying to use the Sendgrid - Send Email (Custom) function to add JSON that might enable categories. I’m referencing these Sendgrid documentation:
General dynamic template info: https://sendgrid.com/docs/ui/sending-email/how-to-send-an-email-with-dynamic-transactional-templates/
Categories: https://sendgrid.com/docs/API_Reference/SMTP_API/categories.html
Substitutions: https://sendgrid.com/docs/API_Reference/SMTP_API/substitution_tags.html

The email sends, but I wasn’t able to get either categories or substitutions working. My JSON is probably wrong, and it might not be possible to add categories here anyway.

image

I kept everything else the same when switching from Sendgrid - Send Email to Sengrid - Send Email (Custom) action, but substitutions aren’t included in the custom format and have to be in the JSON. I don’t know if it’s possible to also include categories in the JSON, since the documentation says to include categories in the email header, not in the dynamic_template_data. (And, if it’s supposed to be in the header, is it possible to include it in the HTML header, which can be edited on the Sendgrid platform?)

Thanks for anyone who takes a look!

Ken

2 Likes

Thank you, Kenneth, for laying out those ‘variable images’ instructions in a clear and accurate way - much appreciated.

1 Like