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

How to send emails with Postmark and Bubble using templates

In this Bubble.io tutorial video we demonstrate how to link Postmark and Bubble with the API connector.

Why Bubble with Postmark

Postmark is a fantastic transactional email provider and can in my experience, offer a much better service than the built in SendGrid transactional integration in Bubble.

This video is going to show you really 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 plugins 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.

Understanding Postmark

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. I'm going to create it as Live and create server.

Postmark Streams

So 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 Hi <inserting 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. It's 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 and in order to send transactional emails, we need to set up some templates.

Benefits of using Postmark templates

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 transactional email provider contains lots of text and there's HTML code, probably a little bit of BBcode mixed in there from Bubble, then you're just going to be hit with so many JSON errors. By using a template, you limit the data that you're sending across to just the bits that you're going to change.

Templates & layouts

So if we go into templates and let's explain the difference between templates and layouts. Layout files like the header and footer of your email. So you can have a layout which has got your logo on 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. If you're going to make a change to your logo or your contact details, you make that once rather than having to update ten or so different templates.

Creating a template

So 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. So we've got preview here. When you're making your email templates in Postmark, you have to create an HTML version and a text version. So here's the HTML version and this is just the body content.

We're not going to go into it in this video because it would take far too long. But to edit the styling of the email, you would do that in your layout. That's where you can change your button colours and obviously your logo. So here we are say, yeah, welcome. Then it sets the name. These are the merge tags. They can be pretty powerful. Product name, get the most out of product name. Great.

We don't have an action URL and let's just simplify this otherwise. And then here's the text. So you have to have duplicated your core text content with your merge tags into text in order for it to be fully accessible across different email applications. It's just really good. Best practise.

So I'm going to simplify it by removing a lot of that middle section. So it 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.

Let's get rid of this bit about trial periods and let's get rid of that bit about documentation.

Cool. Brilliant.

Okay, so 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. And then let's have a look at how we fill out these sections.

Probably the bit that you've been waiting for in this video.

Bubble API Connector

So really simple if you know us, look, we just click on code examples and this provides us with everything we need to know. So 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 as the body of the call, but H stands for header. We have to make these declarations and because I know that this is going to be in common across, 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. These are things which if you were to miss them out or you were to create a slight typo, you're likely to get a bug. Well, it's likely not going to work.

Authentication

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

Cool, then we're down to the data section. 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 into here.

Right. 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.

Remember to update your text template

Even though I've removed it from the HTML version, I've not removed it from the text version. Postmark is still requiring the merge fields. Let's go to that and get rid of that.

Now if I view the code example yeah, there we go, much better.

Cool. So we can then start filling this out.

Sender authentication (DNS)

Another thing we need to factor in when working with Postmark is a way of authenticating that we are indeed the sender, transactional email or well any email sending, whether it's from a personal email address or transactional email sent from a server, you have to do battle with not being falsely detected as spam.

So in Postmark, (I don't know why it's doing that today), you have to set up a send a 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.

Another thing that I love about Postmark is that they make it really easy to do that. If you have any issues with sender signatures, leave a comment. But I think that it's fairly self explanatory.

So I have to pick one that I've already set up. So that's going to be I can go with matt@hello.www.planetnocode.com. This is one of the ones that we use in our business. And then two, this is going to be a merge field or a data field in Bubble. So recipient email. Then I get the ability down here to add the content in.

Dynamic data

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 a workflow in the Bubble workflow builder. So the template areas, I'm going to keep the same private name demo product. Oh, no. That's product, URL. So that would be something like whatever your business is.

Product name. Okay. So the ones that I'm not needing to change dynamically, I'm just leaving in here.

So name, that is the recipient's name.

The action URL, so that's from if we remember, I'll go back to the template, that's what my button does.

So for the sake of illustrating it... Then send the name, company name and then company address, we just leave that as the tag at the moment. So if I fill in these details, I just need a working inbox recipient name, Matt, that's my name. Then let's initialise and see if it works.

Testing

There we go. We have got a no error code or a zero and message is okay.

We can check that because we can go into our Postmark Message Streams and then default transactional stream. Maybe give it a moment or two and there we go. So I've been confused by this in Postmark; there are a series of stages that your email will go through. First is processed and this can take there we go. I was going to say this can take a minute or two and then you get delivered. If you've got some of the tracking set up, you will also have in this activity feed which is just so clear and so helpful if the email is opened and if any links are tracked.

Wrap up

So 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 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. Imagine trying to send all of this over in the body of your adjacent object and all of the symbols and the punctuation is 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.

 

Latest videos

menu