How to Make Custom Email Templates with Bubble and Comnoco [NO CODE]

Introduction to Comnoco

In this video demo, we'll be looking at how Comnoco can extend your No Code app, whether you're building with Bubble or a different No Code platform, to enable you to generate really rich and really clean email templates in HTML that you can then feed into an email API of your choice. So, I'm going to hand over to Stuart and Stuart, could you start by explaining a quick demo introduction of what Comnoco can do and then we'll launch into email templates as a demo.

Overview of Comnoco Features

Awesome, cool. Yes, so Comnoco is a visual programming language that you can use to build your own back-end, your own APIs, process webhooks that come in from other systems or run tasks on a schedule. So, let's dive in and go and have a look at it.

Logging in to Comnoco

So, you can sign up and log in with social service or email and password. I'm going to use Google here and once you log in you will get taken to probably what looks a lot neater than mine area. So, I've got a number of teams, you'll just have by default one and then in the teams you'll be able to create a new workspace. So, I've got this one I prepared earlier for this which is what we're working with today.

Creating Email Templates in Comnoco

So, yeah, so we're going to focus very much on how to create a transactional email in a sort of visual editor that you can sort of hyper personalize today. So, we'll fly through some of the concepts that you can learn about in other videos and just focus on that today. But basically when you build in Comnoco you build functions which are reusable components that you can create once and reuse in many places and when you build them you can organize them into collections. Just means you can literally be organized. So, all my things for connecting to Stripe are here and everything else that's got my tax calculations is here. That's all you're doing with these collections.

Creating a Transactional Email Template

So, we are going to look at generating a nice transactional email. So, to do that we want to create a transactional email template. So, if we do this we'll give it a name and we'll call it order and this will give us a skeleton template, email template. So, basically this is where you build up the template.

Adding Components to the Email Template

So, the first thing we can do perhaps is show you what that looks like very simply. So, if I click add here it shows you the things you can add. So, let's add for example a hero section on and that's now given us that section there with the hero and it's got some text hero title. So, if I refresh that you'll see there's our hero section. It's got a background image. If we click there you'll see there's the background image which is a placeholder and it's got the text which we could go in here and change. So, do that etc and you'll see the text changes. So, that's how you build. You basically build up these components.

Understanding Email HTML Limitations

Now, emails and email HTML is frankly a bit of a nightmare. So, there's the problem with email HTML is it doesn't support JavaScript. So, you can't do fancy clever things and it doesn't support much advanced HTML either because you've got Apple devices, Windows devices, Samsung devices, mobile devices, desktop devices, tablets, you name it and with email you've got to hit kind of the lowest common denominator to match all of those and that's why you'll find quite a few email builders are limited for good reason and that's why you'll find that just taking HTML that looks great on a website just won't work with email.

Using MJML for Email Compatibility

So, what we've done is we've built this on top of an open source library called MJML which solves all those problems for you. It makes sure it works on everything from Archaic, Microsoft Outlook through to Gmail etc works on mobile works on desktop. So, basically what you're creating here is or what Comnoco creates from these blocks is HTML.

Viewing Generated HTML

So, we can add more blocks and we can even see the HTML it creates. So, the resulting HTML looks like this and the MJML which is the open source library we build on top of looks like this. So, we're building it through that system to make sure we take advantage of that stuff and one benefit of that is that actually if you've got an MJML template elsewhere someone else has built or that you've downloaded you can actually import it and it will turn it into a Comnoco email template. But we're starting from scratch on this one today.

Adding Sections and Columns

So, there we go. So, I've added like a hero section. Let's just show you a couple more things that you can build. So, if I click here and I'm going to add a section and in that section I'm going to put two columns maybe and in one of those columns we're just trying to add something. Let me add a button maybe and in that button the content is just put hi and in the other column maybe I'll just add some text and we'll put content of oops hi again. What you'll see is this should now have created two columns with our content and the beauty of that is now that's always responsive.

Styling Email Components

So, you can explore these blocks yourself. I'm not gonna yeah I'd go further I think hours to days of frustration when it comes to building email templates absolutely and then of course what I haven't said is that you know you can style everything. So, you've got you know everything from the size to the padding to the borders whatever it might be you can style when you're on each of these. So, a container for the column so we could give that background color make it look awful. You can tell at this point I'm not a designer but there you go you can see that that column now has a background color and that becomes clearer there. So, you can style all this stuff but then of course Comnoco allows you to completely bring it alive.

Adding Dynamic Content to Email Templates

So, this template we can define things that come in so I can go up here and I can say let's take in some text and that text might be I don't know the name in. So, the name that comes in and let's just set a value to my name. So, we're taking that name in now we can use it so we can go down to this text item that's here and we can click this button here and that exposes it to what we call the Comnoco tree and then what we can do is replace it with the content that comes in. So, now if I refresh that you'll see that's now got my name in it. Simple things.

Working with JSON Data in Email Templates

Now what we could also do is we could maybe we have an order comes in that has multiple items so maybe let's do that I'm going to click here on my input and I'm going to give it a data structure which is essentially JSON that comes in so maybe I'll just call that JSON and I can load some sample data. So, let's just load some sample JSON so that sample JSON comes in and as you see in Comnoco we convert that to these blocks and that means they're typed so we can control where they can be used to make sure you don't make mistakes. Don't use a number where it should be text, don't use an object where it should be an array, whatever it might be.

Creating Dynamic Buttons for Order Items

So, here you see I've got an array of items and they're the order items. So, I think there's four of them. So, maybe we want a button for each of them. I can't honestly tell you why you would want to do that but you might do. So, we can put a loop on and then the loop block says okay what data are you going to feed me and what am I going to do for each item. So, if I click on the data there I can go to my input JSON that array and then for this item if I just prime that it will show me the first item in this loop and for each of those I might want to draw that button.

Customizing Button Labels with Order Data

So, I can actually drag that button now from where it was and put it on there and then the same way as before I expose the text I can expose the label for that button and instead of it being hard coded I can replace that and I can make it come from the description. So, now I've done that basically what we're going to get if I just make that bit smaller if we refresh this I guess you see a button for each item in the order. So, what you start to see is that you can bring it alive and it can be completely personalized to every transaction it goes through.

Importing a Pre-made Email Template

So, I'm making a bit of a mess of this again I'm not a designer it's very clear. So, what I might do now is park this one and just switch to here's one I created earlier just to show you something a bit neater. So, let's just save that in case I need it. So, if I go back to my dashboard I think I created one earlier and exported it. So, actually if I go here I can go to my files and I can import a template. So, I'm going to import a Comnoco email template file that I created earlier. If I select the file which I have downloaded I might just refresh that. It didn't want to select a file. Right let's try that again. Let's try that again. Import the file that's better. So, I should have this one receipt email. So, it's the receipt for an order.

Customizing the Imported Email Template

So, if I import that it's just slightly neater to look at. And it goes with our order that we have. Right so, in the same way I built it before we've got now a couple of things I've added here in the email section metadata I've given it a vague background color. And I've also added here in this preview I've added some preview text. Now that's really important because it actually it's the bit that shows you know on your iPhone whatever you get the text that shows in the preview that's that text. So, you can control that and it won't show your HTML or anything else.

Structuring the Email Template

So, I've created this and I've done the same thing as we did before. I've got a hero section that's got some text. I've got the body section which is this bit here which has got one column and it's just got my text in it and we'll come back to that. And then I've got a little divider and the footer. So, it's just something basic to show it.

Adding Dynamic Data to the Template

So, and again like we did before I have incoming data defined and I've also added a number input which is the total for this order. And that is because if we look at the data that we've got and I just paste some sample data in at this point. You'll see over here what it doesn't have is the total amount for the order. So, we are assuming we're going to calculate that in the function that calls this.

Formatting Dynamic Content in the Email Body

So, in the body I've put this text and what I've done is I've put a template HTML and in that I'm able to paste some HTML, basic HTML formatting, so new paragraphs and then put a variable in name and total. And once I've done that in the data that feeds this I can add two items. So, here let's just get rid of that. Here what I've done is I've added two items. I've taken the order ID I think from memory. Let's have a look. Yes, the no the customer name, so not the order and the total. And this total I've added a format number and that allowed me to select it as a currency and give it a number of decimal places and then I can give it the number that's coming in from our input parameters.

Connecting Data to Template Variables

So, if I do that you'll see it's linked to there. So, delete that one because I already had it. So, I've given it those two things. So, now if we refresh this you'll see that's where it gets the zero and that's where it gets the name from, these two things. If I go and change this sample value to a number like 23.222 and then come over here and run this again you'll see it formats that number as a currency and it it drops the third decimal point as well.

Creating an API Function to Send Emails

So, that's very simply how to create a transactional email template. You can obviously go into way more detail and make it come way more alive but let's just keep it really simple here. So, here we have our template. Let's save that. So, the next thing we need to do if we've got an email template is we want to expose that so that an API can call it and run it and send it. So, you might want to call it from Bubble. So, to do that what we want to do is create a function collection and maybe let's call this emails. And that function collection remember is just a place where you can order your functions and then in here we can choose what kind of function we're creating.

Defining the API Function

So, is it going to be an API that we define? Is it going to be a webhook where we just sent data and we don't get to define it? Do we want to schedule something or are we going to recreate something we can reuse time and time again internally? What we're going to do today is build our own API. So, we'll just call this send email. And what that gives us is the skeleton API function. And in Comnoco it says what do you want to take in in this API? What business logic are you going to apply? And what are you going to send back?

Setting Up Input Data for the API

So, we are going to take in this raw data that another system is going to give us. We'll keep it simple. It will just be order data which will be our sample JSON which again we can load just by doing this. So, that's our sample order JSON. And there we see it come in like we did before. And now we also know that we want to calculate a total. So, we need somewhere to put that. So, here we can put the total. And this becomes an internal variable that we're not taking in and we're not sending back. We're just using it internally. So, call it total calc.

Configuring Email Sending with Comnoco

And now we can basically send that email and add the total. So, let's keep it simple. Let's show us how to send the email first. So, we'll click here. And as you can see, you can do way more. I'm going to search for send email block. And there it is. And this allows us to send the email with Comnoco. And what we allow you to do is work with any email service provider that you have. And the idea of that is that if you were using a sort of sending email through Comnoco and we sent it for you, you would have a risk on deliverability because someone else using that service might be spamming someone and it would get a very bad reputation.

Choosing an Email Service Provider

So, for email deliverability, you really want to set up your own. And it's really easy because there's all sorts of email service providers from loops to resend, to SendGrid, to anything else. And you can sign up for them and use them. They've all got free tiers. So, you can start sending immediately. So, in my case, I'm going to use SMTP and I'm going to use Resend. And so, I just want to fill in these details. So, the username I know is Resend. The host address I should have here. The port is too small for me to read on my other screen, but it's 465. There we go. Yeah, absolutely.

Setting Up Email Service Provider Details