Let’s Build a No Code Invoice Web App - Part 4 (Email Invoices)

Introduction to Postmark and Email Templates

In this Bubble tutorial video, I'm going to show you how we can take the no code invoicing app we've built so far and add a click to email the invoice to your client and include that invoice in the content of the email. We're going to be using Postmark as our transactional email provider and email API gateway. Other ones are available. We've done videos on those you can go and check them out. I'm also going to assume that you've set up your own Postmark account and that you have verified your sender signatures. That's just going to mean that you can start sending and receiving email through the Postmark API.

Setting Up the Postmark Template

First thing I'm going to do is set up the template in Postmark. So I've got myself a server setup and I'm going to go to templates and I'm going to choose a layout. The layout is what's dictating basically the header, what's around the container, and the footer of the email. So I'm just gonna say basic. Okay, that's done and then templates get back there. I'm gonna say add a new template and this is where Postmark really excels because they have an invoice one set up. It's going to use our basic layout.

Understanding Postmark Templates

Few things to point out about Postmark is that for accessibility and also to reduce the chance your email ends up in spam to improve your deliverability, every version, every email template has an HTML version and the text version. I'm not going to cover it in this video, but you ideally would want to ensure that they are as similar as possible. So when you make changes to the HTML version in here, you also make changes to your preview version.

Exploring Merge Tags in Postmark

What do we have going on here? Well, we've got some placeholders. Let's go back into edit. Basically they use a syntax called I think it's called mustachio. You can read all about it in the links down there. But effectively the curly brackets double curly brackets makes a merge tag and so if I go into code example, then we can see here everything that goes into sending the request to Postmark to send the email. Remember that this is going to look for merge tags in both your HTML and your text version.

Setting Up the API Connector in Bubble

Let's just take everything here and place it into our Bubble app. So I'm going to select it all, copy and go into Bubble Plugins. I'm going to use the API connector. Now you will find Postmark plugins available, but they're not going to offer you the flexibility that you would get by doing it yourself. So let's add in the API connector. Say Postmark and then I'm really just going to get us going as quick as possible with this. I'm going to say import a call from ccar paste in import.

Configuring Authentication and API Settings

This is my authentication so I actually want to put that into private key and header authentication. Place in your server token. It's like a password. You guard that like a password because if someone got hold of that they'd start sending emails on your behalf or even worse on behalf of the users of your app. So yeah, really important to protect that. Going to delete this one and say send invoice template. Go change this to action.

Setting Up Email Details

Let's start filling in some details here. So from, I'll just say support@planetnocode.com. To, I'm gonna say I'm just gonna make one up jeff@planetnocode.com. This is where it picks the template that we're going to be using and if you're unsure where that comes from, I refresh this page for some reason is there so that that's what I'd rename. That's the variable which is really playing up.

Adding Dynamic Values to the API Call

Product name I'm gonna leave all of these blank but you know, I have to make them a variable or a merge field or dynamic value. I'd say product URL in triangle brackets and that adds it down here. By making it not private, I can add data into this in the workflow. So in fact, the only one I'm really going to demonstrate this with is the due date because I'm not going to go through and do every single one of these. So the due date will just say April Third 2024.

Testing the API Call

I think that's everything we need just to test it so let's test it initialize. Cool, there's no error we get. Okay message back that's great and we can go into Postmark message streams. Now this is a transactional email. It's not a broadcast stream. Broadcast stream is kind of your email campaigns sending, you know the same email roughly at the same time to a whole group of people. Whereas the transactional email think about is it a notification? It's probably a transactional email.

Reviewing Email Activity in Postmark

So I can go into the transactional email and view activity. And I can see that there are two steps here. I've got it being processed and it being delivered and we can see that the merge fields due date has been updated because that appears in the title and it also appears here in the HTML version and in the plain text version. This message here, this is because I've set this server up to be a black hole which is perfect for testing, but it means it's not actually been sent to jeff@planetnocode.com.

Creating a JSON Expression for Invoice Items

Let's go back into our Bubble app and get down to how do we actually send the invoice details because this is going to be a list of items. Let me demo how we can go about this. I'm going to demo it by just adding some text in. First of all we need to create a text expression of JSON. That's the code that goes into the API connector that expresses a list of items in our invoice and we can do that by going repeating group list of items formatted as and I'm going to go back to my template to see how it wants it to be formatted.

Formatting the JSON for Invoice Items

So code example, every item in the invoice needs to be formatted like this. So I'm copying that. Format as text and pasting it in. Now JSON doesn't care about spaces or enters but by pasting it into this box here Bubble is going to treat this as rich text. So I actually need to get rid of the spaces or enters here just tidying it up. Each item and you could expand this with additional fields but you need to add those into your template as additional merge tags, so the description and then I'm just going to say total amount in here. The delimiter is what separates them that's going to be a comma and the space could just be a comma.

Previewing and Updating the JSON Expression

Let us preview this now. We get this perfectly formatted JSON expression of each item in the table. I'm going to just make this not disabled just so I could put a value in there and you can see how it updates. It's gonna update live. Okay updates it live there. So we need to get this into the API connector.

Adding the JSON to the API Connector

So I'm going to take everything between the square brackets and make this a merge field and I'll say list of items. It's not private now if I try and initialize this now I'm gonna get an error because I've not got the right formatting of list of items in there in this field here. But I don't need to reinitialize it.

Creating the Email Button and Workflow

Let's add in our button. Let's put it at the top here. I'll say email and add in the workflow. Because I did successfully initialize it we'll see it displayed here. If you don't see it displayed here, it's because you've not changed this to action or you've not initialized it.

Configuring the Email Workflow

Product URL just gonna write test in there. Due date will insert the due date. So current pages invoice due date format as okay. List of items now I can just go here copy this right click on it. If I right-click in here now it might not paste what I intend. So I click insert dynamic data first and then I'll right click on that space. I'm just gonna check it all formatted as perfect perfect perfect and let's go ahead and test that.

Testing the Email Workflow

So I'm gonna click email. I've not got an error. That's a good thing. I'm gonna go into Postmark and check the activity stream. This is very helpful if you ever need to debug anything. I'm gonna refresh the page. There we go, it's been delivered and I can click through onto this email and I can see that yes, it's successfully added in dynamically any item that was in my items repeating group. It even includes them in the plain text version and it shows me exactly what was sent to Postmark to generate this email.

Conclusion

So there you go, very beginners aspects or look at how to create an invoice email based on Bubble and Postmark.