Sendgrid Dynamic Templates > using variables / substitution tags

Hi,

I am using the sendgrid plugin by copilot on my app and I’ve wasted hours trying to figure out why my variables didn’t show up in my e-mails :face_with_symbols_over_mouth: … so I decided to share a few quick learnings to make that easier for the next builder experiencing this (the sendgrid documentation could really be improved though…).

  • Learning 1 : What I call a “variable” is also known as a “Substitution Tag”

  • Learning 2 : Sendgrid doesn’t like to see accents or spaces or special characters ( like _ / - ) etc.) in variables / Substitution Tags. Be careful how you name those substitution tags.

  • Learning 3 : Double curly brackets seem to be the right thing to do (I’ve read different things about that on the net, some people say that one is enough, others that you need 3… well, I managed to make it work with 2 :exploding_head:. Your variable / Substitution Tag must look like this {{ MyVariable }}. Whether you have the spaces inside or not doesn’t seem to make a difference so {{MyVariable}} seems to be just as good as {{ MyVariable }} (but remember : no space in your substitution tag i.e {{ My Variable }} won’t work…

  • Learning 4 : Within your bubble action those Substitution Tags must NOT bear those brackets. Brackets are to be used only within your Sendgrid dynamic template. So from bubble action you send MyVariable and then reference it as {{ MyVariable }} in your sendgrid template

  • Learning 5 : may sound trivial but I had to figure out how to make curly brackets on my Mac keyboard. It turns out that you just need 2 keys : Alt (Option) + ‘(’ >> { OR Alt (Option) + ‘)’ >> }

Hope this helps someone one day…

3 Likes

Bookmarked! Thank you for sharing. :smiley:

One more recent learning >> Using special characters in Subject or Preheader

The issue: Special characters being automatically HTML encoded which doesn’t look good and isn’t really easy to read…

The solution: Using triple brackets (in your sendgrid template) instead of double brackets to neutralise HTML encoding / escape. Nothing else to do on the Bubble side. >> {{{Preheader}}}

I found this solution in an old stackoverflow post that you can read here