Add a logo to Postmark templates

Introduction to Postmark and Email Templates

Postmark is a fantastic email API with some amazing features such as the ability to easily send merge field data, so populate data in a field in the template, form your Bubble up 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 Bubble coaching client and they were really wrestling with well how do I attach an image and yeah that's complicated 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.

The Benefits of Using Image URLs in Email Templates

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 server. I don't know why postmark does this I don't know if it's just in arc it's buggy anyway. It just means that you know if someone sends you like a two megapixel logo and you exchange 50 emails with them you probably got at least a hundred megabytes of logo sat in your inbox and it's all the same logo and just the way space.

Setting Up the Bubble App for Logo Upload

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 fields in postmark. So 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. I'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.

Creating the Logo Upload Workflow

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 in 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. I think that worked so 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.

Displaying the Uploaded Logo

No in fact the best way to do this because if you're setting up like a settings panel like a 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 Plex. Now I'm going to demonstrate one other thing here because this is gonna well if you don't understand this then the next few steps aren't going to work.

Understanding Image URLs in Bubble

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 colon at the start of it and now we will need to add that in in order to make sure that it works with postmark.

Setting Up Postmark Integration

So let's set up our postmark integration and I can do that by going to postmark and I've just set up an invoice here as an invoice template and you can check out my previous videos on postmark and how to do that but you know this is I think I've not even changed 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 end point is going to be send with template here I'll say 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 is 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 it 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 plant code 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 just wrong way 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 yeah 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 right let's go and actually set up an image.

Creating the Email Template with Logo

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 as 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 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 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 email 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 and then preview so where it says product name which is that one product name value I think that must be it yeah I'm going to insert an image here and we just insert it as an HTML image so we can say image source and then we'd say logo URL just lowercase we can even add in like an alt we could say logo and close it off that I'm going to click save and 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 equals and let's say max with that's the 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 suck the cross compatibility you know AOL email clients it's 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 I'm going to add it in here make sure I've not broken the JSON syntax like 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 a 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 to let's add in the name field initial content I'll just say Matt and then I'll put in a button and we'll say send email.

Finalizing the Email Sending Workflow

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 just going to draw upon that input right so if you 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 a sandbox it just means that the emails aren't actually going to anyone is that it yeah okay there we go and there's a 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 they 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.