I’m trying to include QR Codes in emails that I send via Sendgrid that’ll take them straight to the relevant order page.
However I can’t find an option under Image that can accept a Substitution tag.
Have I missed one? These are the only options I have…
The only option I have is to upload any images I want to include in an email into a static Image Library within the template and choose them from there. Is there another way to do it? Perhaps it’s to use the Code option but I have no idea where to even start with that…
Any advice would be much appreciated.
All the best
You need to do it in code view…
Add the image, then set its source dynamically using substitution tags.
1 Like
@joefarrowsmith I’m trying to do the exact same thing and stuck - were you able to get this working properly?
I’m not sure if I’m using the right code or not within Sendgrid - <img src="{{qrcode}}">
With this as my sub tag
Any advice?
Hi Patrick
I hope the following helps with getting QR Codes to display in emails. This is what I did…
- As you, I created the QR Code in the app then to include it in the email, I put a similar Substitution Tag. Here’s what mine looks like… (the tag reads “OrderQRCode”)
- In SendGrid, I added an image placeholder in the template. This felt weird because it was basically blank (and, I have to admit, I had to look and think hard at my screen just now about what I’d done when I went to get the screenshot because I couldn’t find it as it doesn’t display!)…anyway, you just need a place on the template to hold the QR Code that’s why it’s there. Then hover the mouse over it and hit the “Edit Module HTML” bit in the top right hand corner of it. Here’s what I’m blathering on about…this is mine…
- In the HTML bit you just need to put the name of the Substitution Tag you created in Step 1 above into the squiggly bracket things next to where it says “Src=”.
I’m using the QR Code to take people to a specific order and my Substitution Tag is called “OrderQRCode” hence in the HTML it says Src=“{{OrderQRCode}}”
This is what my HTML blah looks like…
And that’s it.
NB…I did have some trouble getting the QR Code to display at the right and looking a bit distorted and squashed. If this happens to you, just use the Width option in the template builder on the left in SendGrid, it takes care of this (I spent the entire morning trying to edit the HTML code to no avail first - I hope I can save you that frustration!)
One addition to this…for me (and this is a biggy) the QR Codes don’t display if looking at the email in the Gmail app. I don’t know how to change this. If you ever work this out (or anyone else), do let me know.
I hope that helps.
All the best
Joe
1 Like
Excellent @joefarrowsmith , thank you for the explanation. I was checking with Gmail - that was the issue, that Gmail doesn’t allow base64.
I was able to get it to work in Gmail by using the plugin “Barcode and QR Code Generator” because it converts the base64 into a png. Then calling the URL for that png instead. Worked like a charm!
My QR generator settings
Workflow
Sendgrid Code
1 Like
@patrickryanwatkins My apologies for this late reply. Just wanted to thank you for this info. My QR Codes are now displaying and working in Gmail which is a vast improvement. Not sure I’d have got there any time soon without your help!
All the best
Joe
