How to send emails with Postmark and Bubble using templates

Introduction to Postmark and Bubble Integration

Postmark is a fantastic transactional email provider and can in my experience offer a much better service than the built-in SendGrid transactional email integration in Bubble. This video will show you everything you need to know about connecting your Bubble app to Postmark with an API integration. No other Bubble plugins required, nothing paid, nothing free from the Bubble plugin store apart from the Bubble made API connector. In this video, it's going to cover the API calls, JSON, templates, layouts and merge tags. So let's dive right in.

Setting Up Postmark Account and Server

You'll need to obviously have a Postmark account. Here's mine and we're going to create a server. There are a number of different areas in Postmark to understand what the terms mean. A server is a way of grouping together emails that are sent. So you might have a different server for different websites or different apps that you're running. You can see here that I have quite a few from the different websites I manage and apps that I run. So let's create a server and I'm going to name this demo video and create it as live and create server.

Understanding Postmark Streams

There are three different streams. There's broadcast stream, that's for if you were creating like a MailChimp application where you're sending the same message to a group of people and they're all getting the same message. Maybe you're changing the like high insert in the name but it's for broadcasting the same content out. You then got inbound stream, not going to touch on that in this video but that's for receiving emails and that's actually something that I've done in the past is that you can set up an email address, have email sent to the email address and process that data in Bubble. Perhaps that will be a future video but for now we're going to be focusing on transactional stream.

Creating Templates in Postmark

In order to send transactional emails we need to set up some templates and this is I found this to be hugely helpful because I've seen people in the Bubble forum struggling with this is that if your API call from Bubble to your transaction email provider contains lots of text and there's HTML code probably a little bit of BB code mixed in there from Bubble then you're just gonna be hit with so many JSON errors and so by using a template you limit the data that you're sending across to just the bits that you're going to change.

Templates vs Layouts in Postmark

Let's explain the difference between templates and layouts. Layouts are like the header and footer of your email so you can have a layout which has got your logo in the top and your contact details in the footer and then you can have a series of templates which sit in the body section of the email. It's just a fantastic way of not having to duplicate your code and you know if you're going to make a change to your logo or your contact details you make that once rather than having to update 10 or so different templates.

Creating a Welcome Email Template

Let's create a template and we're going to go with a welcome email. Another thing that I love about Postmark is that they've got these templates ready to go for all your common use cases for a SaaS application. So we'll create a new layout and here we go. So it's already got this beautifully formatted email that I can then go ahead and start updating.

Editing HTML and Text Versions of the Email

When you're making your email templates in Postmark you have to create an HTML version and a text version. Here's the HTML version and this is just the body content. To edit the styling of the email you would do that in your layout. That's where you can change your button colors and obviously your logo. For here we are say yeah welcome then it inserts the name these are the merge tags they can be pretty powerful. Let's simplify it by removing a lot of that middle section. So this does take a little bit of knowing what to do with HTML but I wouldn't say I'm a coder but I know my way around some HTML.

Integrating Postmark with Bubble

Let's now work on how we integrate this in with Bubble so I'm going to hit save and go into Bubble and into the API connector and add a new API Postmark. Let's have a look at how we fill out this section probably the bit that you've been waiting for in this video. Really simple if you know where to look we just click on code examples and this provides us with everything we need to know.

Setting Up the API Call in Bubble

It is a post request to this URL. I'm going to name this send welcome email and it's a post request. Then we have to in the header section this is the data or I find it helpful to think of it as the body of the call but H stands for header we have to make these declarations and because this is I know that this is going to be in common across if I you know if I was to set up a password reset email all of those it would be in common. I only need to enter them once if I enter them up in the shared header.

Understanding Postmark Server Tokens

Each server in Postmark has got a server token like an API key and that's how you can you know how Postmark knows which server of yours to send the emails through and that helps you to group them together and you know you can view really nice stats about open rates deliverability that sort of thing.

Configuring the Data Section in Bubble

Then we're down to the data section and so I'm going to copy everything from this bracket all the way down to here without selecting the quotation mark and I just paste it in to here. You'll notice that the trial section is still here and that's because even though I've been this mistake plenty times before just being a little bit funny even though I've removed it from the HTML version I've not removed it from the text version so Postmark is still requiring the merge fields so let's go to that and get rid of that.

Setting Up Sender Signatures in Postmark

Another thing we need to factor in when working with Postmark is a way of authenticating that we are indeed the sender transaction or any email sending whether it's from a personal email address or it's transactional sent from a server you have to do battle with with not being falsely detected as spam so in Postmark you have to set up a sender signature. I'm not going to delve into that because it's pretty self-explanatory but it means that you have to declare specific email addresses or a specific domain or subdomain that you're sending from and then either verify that individual email address or verify ownership of that domain.

Configuring Merge Fields in Bubble

By adding in these rows here and by unticking private and then making sure that my use by is action I can access this from an a workflow in the Bubble workflow builder. So the template areas I want to keep the same product name demo product other that's product URL so that would you know that would be something like whatever your business is product name. The ones that I'm not needing to change dynamically I'm just leaving in here.

Testing the Integration

If I fill in these details see the working inbox name Matt because that's my name then let's initialize and see if it works. There we go we have got a no error code or a zero and message is okay and we can check that because we can go into our message streams and then default transactional stream maybe give it a moment or two and there we go.

Understanding Postmark Email Stages

I've been confused by this in Postmark there are a series of stages that your email will go through first is processed and these can take there we go I was gonna say this can take a minute or two and then you get delivered and if you've got some of the tracking setup you will also have in this activity feed which is just so clear and so helpful if the email is opened and if the if any links are tracked.

Conclusion and Benefits of Using Templates

There we have it there is an overview for you of how to integrate Postmark into Bubble without using plugins using templates to really limit the amount of HTML that you'd have to send over JSON because if we look at let me go back to the template because I've seen people struggling with this you know imagine trying to send all of this over in the body of your adjacent object and yeah there's just the all of the the symbols and the punctuation it's bound to cause problems so strip it back use a template and use merge tags so that the content is filled just where it needs to be and nothing else or additional needs to be sent across.

If you have any questions about it please leave a comment if you've got any suggestions for future videos leave a comment we check them every day and we have a growing number of videos like this one that we produce because a comment has been left.