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.
Automate your invoicing: Learn how to create an AI email assistant to send professional invoices with just a click!
Streamline client communication: Discover how to integrate Postmark with Bubble for seamless, templated invoice emails.
Boost efficiency: Master no-code invoice generation and email automation in this step-by-step tutorial.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.