Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Add a logo to Postmark templates

Learn how to effortlessly integrate images into your emails using Bubble.io, making your email templates more engaging and professional with Postmark.

Introduction

Postmark is a fantastic email API with some amazing features such as the ability to easily send like merge field data. So populate data in a field in the template from your Bubble app and send it all across with like a code example just like this one. But what if you want to send across an image? Now I was speaking with a coaching client and they were really wrestling with well, how do I attach an image? And yep, that's complicated.

Sending an Image as a URL in Postmark

You don't need to do that because in this Bubble tutorial video I'm going to show you how you can send an image as just the URL and then have that appear as a logo in your email template that you're sending from your Bubble app through Postmark. Now it's a best way to do this not only because it's simpler to set up, but also because it's actually a pet peeve of mine when people have their logo in their email and it is an attachment rather than pointing at a source of the image on the surface. I don't know why Postmark does this. I don't know if it's just in ark, it's buggy anyway. It just means that if someone sends you a two megapixel logo and you exchange 50 emails with them, you probably got at least 100 megabytes of logo sat in your inbox and it's all the same logo and it's just a waste of space.

Setting up the Workflow

So yeah, let's set it up so that we can take something simple in our Bubble app like this. We're going to upload an image and then we're going to send that image in an email as the logo filled in Postmark. Before I dive into that, if you are learning Bubble, then click the link down below because I've got at least four or five other videos on Postmark, including how you can set up alternative sender domains, meaning that your users can send under their identity through your Bubble app. We've got video covering that. We've got videos covering all sorts to do with no cap, no code app development and you can click the link down in the description to find out more and start watching those today.

So let's just set up this workflow because I need to save an image for my business, like as a logo. So let's just update this to say upload a logo and then let's add on the workflow and we'll just save this to current user. So make changes to current user, add a field logo image and then link this to the picture uploaders value. Perfect.

So let's give that a try. Let's upload an image.

Uploading the Image

I think that worked, but it was really quick. Didn't even see a loading bar. So let's just test it. So I'm going to get an image field. No, in fact the best way to do this because if you're setting up like a settings panel like my profile, we just want to make this dynamic so that it can easily be overwritten.

So we'll say logo. So that just means that when the page loads it's going to show the logo that's been saved for the user. So by refreshing it I can see that we have it saved in place.

Understanding the Image URL

Now I'm going to demonstrate one other thing here because this is going to, well if you don't understand this then the next few steps aren't going to work. I'm just going to add in a text label and I'm going to say current users logo and then we'll say URL because ultimately this is the source, this is where our logo is saved into our Bubble storage, which is basically AWS storage managed by Bubble.

And this is the actual location on the Internet of the image file. But if we go ahead and we demo it, we'll notice something peculiar or at least something we need to take note of, which is that here's where the image is stored, but there is no HTTPS:/ at the start of it. Now we will need to add that in in order to make sure that it works with Postmark. So let's set up our Postmark integration and I can do that by going into Postmark. And I've just set up an invoice here as an invoice template and you can check out my previous videos on Postmark on how to do that.

But yeah, this is, I think I not even change this. This is a template. Postmark makes setting up an email API so quick and we can then look at the code example and this is what I need to send through to Postmark. So I'm going to copy this and place it into here. I'm then going to take my server token and I'm putting in header because you can see here h for header, d for delta or basically b for body.

And then the endpoint is going to be send with template.

Sending the Email with Postmark

Send email with template. It's going to be a workflow action. And it's post. Why is it post? Because we get told here that it's post and then these are all of the fields that we have to provide some data for in the template.

So I'm going to copy that and paste into here. And then basically we have to send from a verified sender. So that has to be a sender signature that you set up in your Postmark account. So I think, I think I've got the plantocode domain set up for that. Let's just try it.

There's the alias that tells you which template is going to be sent. This is all demo data. I basically just want to initialize it and make sure that it is free from errors. Let's try. That does not contain a valid server token.

Oh, I chose the wrong one here. There we go. Private key in header, not in URL. Let's try that again. Brilliant.

It's worked. I can go back into Postmark refresh, this weird effect that's going on. Then if I go into streams and transactional stream activity, I can see that. Yep, this is the one and it's been sent through. And this is really helpful for debugging because I can go into the template model and I can see all the values that I sent through to it.

Adding the Logo Image to the Email Template

Right, let's go and actually set up an image. So I'm going to go into my templates and choose my invoice template. And something that's so easy to get tripped up with here is that Postmark for email deliverability, for accessibility you have both a HTML version and the text version. And everywhere that you've got these double curly brackets. Where's an example?

Here we go. Like product name, that's a variable, that's a merge tag that you can insert data into. And when you click on code example it's going to show you all of those because they're sort of like required fields now. But if you remove them like say you've got this invoice template and you don't need all these fields and you want to simplify it, you also would need to remove those from the text version. Otherwise it's still going to list them here because it still appears in the sum of the emails.

So refresh it. Let's add in an image. And I'm actually going to add the image in to the layout because that's what wraps it. So I'm going to go into my layout basic here, then preview. So where it says product name, is that the one product name value?

I think that must be it, yeah. I'm going to insert an image here and we just assert it as an HTML image so we can say image source and then we'd say logo, URL we can even add in like an alt, we could say logo and close it off that I'm going to click save and then I'm going to go preview and we can see now it's broken. There isn't actually an image there because if I go on to test variables my image logo has no value. What I can do is go back into my Bubble app and I'm going to copy the location here and paste it in with HTTPS.

Okay, there's my logo. Now it's a little bit big so let's add some inline css into it so we can say style and let's say max with let's say max with 80 pixels min max height 80 pixels. Now I'm no expert with CSS and HTML syntax in emails. Emails are so much less reliable, so much more fiddly than if you're coding a website. That's just the cross compatibility AOL email client is going to make an email that different to Gmail.

All of that is important to consider. But now we can see that it's a great size. So I'm going to click save there and then I'm going to go back into my invoice template and now my code example, we can see that there is a logo URL field. So I'm going to copy that and I'm going to add it in here making sure I've not broken the JSON syntax commons are in the right place. I've not missed any speech marks and I'm going to make this into a dynamic value or like a merge field variable in Bubble so we can say logo.

Sending the Email with the Added Logo

And then let's also set the name as well. So really all of these values, you would set them up as dynamic if you need to make them dynamic in your email. But I'm not going to spend time doing all of those. I don't need to reinitialize. I'm confident that it's going to work.

So let's just set this up here. In fact I'm going to add in a name field too.

Let's add in the name field, initial content, I'll just say matte and then I put in a button and we'll say send email.

So I can now go into plugins and I can find my Postmark. Send email with template, action logo. I can say current user logo but it needs to start with HTTPS like that and then name. I'm just going to draw upon that input.

Testing the Workflow

Right. Let's hope we get this working. Let's test it.

So I'm going to click send email. Just click run. Didn't get any errors. That's good. Let's go back into Postmark and have a look at the activity stream.

Notice I've got this server set as sandbox. It just means that the emails aren't actually going to anyone. Is that it? Yeah. Okay, there we go.

And there's our logo. And there's the name. So yeah, that's how we can get it to work. That covers a number of common mistakes, frustrations that certainly I've encountered with using Postmark. Just things I've not understood as I've tried to deploy into my Bubble apps.

But there you go. That's how you can easily add a logo, add an image to an email and send it through a Postmark template from your Bubble app.

Latest videos

crossmenu