Oct 1, 2021

💌 Designing beautiful transactional email for your Bubble app with Postmark - Issue #16

James from NoCodeSaaS

Happy Friday!

If you’re building a SaaS app, it’s likely you’re going to need to send your users all kinds of emails.

Whether it’s the basics like welcome emails, password resets and billing invoices - or more advanced things like surveys and newsletters.

Fortunately, there are some fantastic email providers out there which integrate perfectly with Bubble to allow you to send really good looking emails easily.

There are two main platforms that I’ve had experience with integrating into Bubble - Sendgrid and Postmark.

They both work in fundamentally the same way - you sign up and verify your domain, then can send email using their API.

They both allow you to use custom HTML templates to design good looking emails that work across different email clients.

You also get in-depth metrics on things like bounces, open rates and click tracking.

This week I’m going to walk you through how to set up Postmark with Bubble to send transactional email using a template.

Postmark has also generously provided a coupon code for subscribers which gives you 20% off for 3 months, their plans start at $9.99 / month - so it’s pretty good value!

Use code POSTMARKFRIENDS20 when you signup. (This isn’t a sponsorship, I genuinely like the product!)

This month I’ve also made a tutorial video which you can watch here.

There’s also a public Bubble app where you can view the examples here.

So, let’s get started!

Watch my video tutorial for setting up Postmark transactional email in Bubble

Setting up Postmark

The first step to sending a transactional email from Bubble is to get your Postmark account setup.

There are a few steps you need to go through to set up your custom domain, so you will need to follow this guide to get all of that completed.

When you first set up your Postmark account, you can only send emails to yourself until your account is verified - so bare that in mind when you’re testing your integration!

Servers

When you have your Postmark account all set up, you will need to create a server in order to send your emails. Postmark recommend creating a different server for each type of email your app sends.

So for example, if you have billing emails and your app also sends out emails on behalf of your users, you should set up a server for each of those use cases to protect your deliverability rates.

Once you’ve set up your server, head to the templates tab.

Select create new template, then you’ll see the screen below.

Upoad your own HTML template or use a Postmark standard template

Here you can either upload your own HTML email template, or use one of the many standard SaaS email templates that Postmark provides.

Tip: If you’re not an expert at coding email templates, I highly recommend checking out Fiverr to get someone to help you to make a custom tepmate. I found a great email designer there who helped build, desian and test my custom email template. It costs around $20-30 and can save you a ton of time and give you a really nice looking template that works for you.

Once you’ve selected your template, you’ll be able to open it up in the Postmark editor.

As you can see, there are a lot of things already set up for you, you can flip the template into edit mode to start changing the content of the email.

You’ll notice dynamic values are wrapped in {{curly}} brackets, this is where you’re going to inject your custom values into your template from Bubble.

These are also available in the subject line at the top so you can add your own custom subject lines from Bubble.

Edit and add your own values to the email until you get it looking just how you want.

Start customizing your template

Once you’ve got your email looking good and with your custom data fields set up, press the Code Examples button on the top right of the editor.

This shows you a fully populated POST request in cURL with everything you need to send this email over the Postmark API.

Now for the fun part, setting this up in Bubble to send emails from your app.

To get started, copy the content of this curl call from the word curl until the closing } bracket.

Postmark gives you a pre formatted curl POST request which will send this template

Set up the Postmark API in Bubble

Head over to Bubble, and make sure you have the API Connector plugin installed.

Press the ‘Add Another API Call’ option.

At the bottom, you’ll notice an option to ‘Import another call from cURL’.

Press the Import another call from cURL

A modal will appear where you can paste in the example request you got from Postmark.

Once you import that, the API call will all be set up in Bubble ready for you to start customizing.

The next step is to give your API a name and selct ‘Use as Action’ so that we can use the API from within a workflow.

Your API call for Postmark will be automatically imported and setup ready for you to go.

The next step is to make each of your fields dynamic in Bubble so that you can inject your own custom information from your Bubble workflows.

To do that, simply replace the placeholder data with a field surrounded by <> symbols.

You should also uncheck the ‘private’ option so that you can populate these fields from your workflows.

Make your fields dynamic in Bubble using <> symbols

Once you’ve customized those fields, you will be able to inject some demo data (using your own email address for now)

Then comes the exciting bit - you can Initialize the call!

This will then send you an email via Postmark - adding all the custom fields you declare into the template.

It’s worth noting, you can inject all sorts of data using this method. Images, text, numbers - whatever you need to make your emails look great.

The final step in this tutorial is to trigger an email from a standard Bubble workflow.

As you can see below, I’ve set up a demo button (you can view the page here in my demo app editor) which will simply trigger an email to be sent by Postmark.

I can append all my custom data into the action within the workflow to customize the email.

Trigger your new API call from a workflow.

That about covers the basics of sending an email using a Postmark template!

As I mentioned in the video tutorial - there are some even more advanced things you can do, such as pulling open and click data back into your Bubble application if that’s important to you.

That's it for this week!

Hope you found this issue helpful - feel free to reply to this email with any other topics you would like me to cover over the next few weeks.

If you could share the newsletter with your friends on Twitter that would be super appreciated. People can sign up at https://nocodesaas.app - I cover a new NoCode SaaS topic every Friday.

Until next time, happy building!

James :)

Did you enjoy this issue? Yes No

James from NoCodeSaaS @jamesdevonport

If you're thinking about building a SaaS product using no-code or visual development tools - this newsletter is for you!

Every Friday I'll be sharing practical tips and advice on building a SaaS app using the Bubble.io platform.

From how to structure your database, to implementing 3rd party APIs, we'll touch on everything you need to know to get started and scale your app to thousands of users.

I'll be using my own Bubble app as an example. I'm currently building UserLoop.io - a Shopify App designed to help store owners automatically survey their customers and get more reviews.

In order to unsubscribe, click here.

Created with Revue by Twitter.