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

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

Learn how to enhance your no-code invoicing app by integrating Postmark for transactional emails in this comprehensive Bubble.io tutorial. Dive into setting up email templates, variables, and API connectors to create a seamless experience for sending invoices to your clients. Master the art of no-code development with this step-by-step guide.

Invoicing App Setup

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. Now we're going to be using postmark as our transactional email provider, our 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 receive, sending and receiving email through the postmark API.

Setting up the Template

So first thing I'm going to do is set up the template in postmark. So I've got myself a server set up and I'm going to go to templates and I'm going to choose a layout. And the layout is what's dictating, basically the header, what's around the container and the footer the email. So I'm just going to say basic. Okay, that's done.

And then templates go back there. I'm going to 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.

Placeholder Tags

Okay, here we go. So a few things to point out about postmark is that for accessibility and also to reduce the chance that your email ends up in spam to improve your deliverability. Every version, every email template has an HTML version and the text version. And 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.

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

Code Example

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. So just because you think oh, I don't need product URL and you remove the product URL from your HTML version, if you don't remove it from your text version, postmark is still going to expect that as an input. So 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, oh, I've had this bug before with postmark.

Using the API Connector

That's weird. Let's 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 quickly as possible with this. So I'm going to say import a call from CCL, paste in import.

Authentication

Right? Has that worked? Yeah, so I don't think I need these anymore. I'll stand corrected. I think bubble adds those in automatically.

Now this is my authentication so I actually want to put that into private key and header authentication. Paste in your server token is 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, go and delete this one and say send invoice template. Go change this to action.

Filling in Details

And then let's start filling in some details here. So from, I'll just say support apparent calm.

I'm going to say I'm just going to 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, refresh this page. For some reason is there. So that's what I'd rename.

That's the variable. This is really playing up. Cool. There we go.

Product name. I'm going to leave all of these blank, but 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, we'll just say April 3, 2024. And then I think that's everything we need just to test it. So let's test it. Initialize call. There's no error.

We get an 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 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. So I can go into the transactional email, I can 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 field 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 being sent to jefflanetnocode.com, although I do believe this goes towards your allowance for the month based on your postmark plan because your, you're using all of their service, all of their activity, tracking all of their API up until the point of not actually sending it to the intended recipient.

Sending Invoice Details

So 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. 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. So code example every item in the invoice needs to be formatted like this. So I'm copying that some weird yellow thing going on there.

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

No no no. Okay, I made a mistake there. Not this page's invoice. We're talking about the item. We're saying this is our expression for each individual item in our repeating group here.

So we say 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.

So 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 can put a value in there and you can see how it updates. It's going to update live. Okay.

Updates it live there. So we need to get this into the API connector.

So I'm going to take everything between the square brackets and make this a merge build. And I'll say list of items.

Oops. Needs to end that in a triangle bracket. Yeah. And it's not private. Now if I try and initialize this now, I'm going to 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.

Where am I going? Here we go. Next one. Yeah. So let's add in our button.

Let's put it at the top here. I'll say email and we'll add in a workflow. And 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.

So product URL just got test in there.

Ooh, there's a mistake there. That's not good. We do not want ah, okay. Right. Bad, bad.

You do not want your API key to be anywhere other than something marked as private, either by ticking private there or up here. Because this will mean that any data that isn't marked as private you should assume that your user could or might get access to and so you do not want that.

Right, there we go. It's gone. So due date, we'll 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 right click on that space. I'm just going to check it all formatted as perfect, perfect, perfect. And let's go ahead and test that.

So I'm going to click email. I've not got an error. That's a good thing. I'm going to go into postmark and check the activity stream. This is very helpful if you ever need to debug anything.

I'm going to 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 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. So there you go. Very beginners aspect.

Or look at how to create an invoice email based on bubble and postmark. And if you want to learn more about bubble and building no code apps then click the link down in the description and of course like and subscribe to support our channel.

Latest videos

crossmenu