đ Building weekly summary emails for your no-code Bubble app - Issue #21
Hi everyone,
Welcome to everyone who signed up this week.
This newsletter is all about building a profitable SaaS business using Bubble - without being a programmer!
Each week I share some learnings from building my own Shopify SaaS - UserLoop.
This weekâs issue is all about adding automated weekly summary emails to your app.
We probably all get some of these âsummary emails every week.
They tend to give you an update of everything that happened in your account with some high-level statistics.
For my weekly update emails, I needed to include a few lists of things, which is typically quite tricky to do in Bubble in a nice way.
My app needs to email users a list of all the good and bad feedback they got that week.
In this edition, Iâm going to show you how to build these kinds of emails with Bubble, and how to have them run and send every week on a schedule.
This post is a bit of a follow up to my original edition on sending emails using Postmark, so if you havenât read it, read that first!
So with that in mind, letâs get started!
Build your template
Below is an example of what we are aiming to create.
Itâs an email thatâs automatically sent out every week to every user.
It contains some high level stats, and a list of all the customer feedback messages the user got that week.
Email template including section for repeated elements.
To get started, youâll need a basic HTML email template including placeholder information where you want to populate user info.
If like me youâre not a coder, I recommend just getting an off the shelf template or paying someone on Fiverr to code one up for you.
I have all my email templates coded up by Fiverr freelancers and it saves me a ton of time and hassle - plus they look great!
Once youâve got your template, get it set up in Postmark. You can then also set up all the placeholders for each piece of data you need to inject. This is all covered in this previous issue + video tutorial.
Once youâve got the basic fields set up, we need to spend some time setting up the part of the template which is going to repeat when your data contains multiple items.
To do this you need to use the below format.
Around the HTML block you want to repeat, wrap it with the below tags.
Open the repeating block with
{{foreach yourfieldname}}
and close the repeating block with
{{/each}}
Hereâs how it looks in the template codeâŚ
Open the repeating block
Close the repeating block
In the middle of the block, you can add all your mail merge tags as normal like below.
These will be populated for each individual record.
Bonus tip
If you have a field that might sometimes be empty you can set a placeholder text that will appear in itâs place. You can do this using the below format
{{^ yourfieldname}}This is a placeholder{{/yourfieldname}}
You can see some examples of this in action above.
A full list of all the Postmark email syntax is available here, other platforms like Sendgrid will have a similar structure.
Set up the API Connector
The next thing we need to do is to head over to Bubble and set up our API connector to send the summary email.
Much of this is the same as in the previous tutorial.
The only difference is for the fields which will contain repeating data.
In the example below those are goodresponses and badresponses fields.
They are wrapped in square brackets eather than quote marks.
This is because we are going to be injecting a json formatted list of items in there containing our data from an API workflow later on.
Set up a backend workflow to send a single email
The next thing we need to do is to set up a backend workflow to send our summary email.
Depending on your app, youâll want to set your workflow up with the right data you need for your emails contents.
My example is below.
Get all the data your email template requires through the backend workflow fields
Once youâve got your data, we can start populating the steps in our workflow to send the email via Postmark.
For each value in your template, we need to populate it with the data here.
As you can see most of them are quite straightforward - exactly like the previous tutorial.
Populate your fields with the data they need
Where things get interesting is where we populate our repeating values.
In my example above this is goodresponses and badresponses.
These are lists of things. So to get the list of things for the current user, we need to run a search.
Search for a list of things to include in your email
Depending on what kind of list of things you want to show in your repeating section in your email template this might be different for you.
But you can see how Iâm searching for my list of responses for the current user in the example above.
Once weâve got our list of things, we need to format the results of the list in a way that Postmark can understand to inject into our email template.
To do this we need to take our search results and use the format as text operator on the results.
This is where things get a tiny bit code-y - but donât be intimidated⌠itâs quite quick to pick up once you get the format.
As you can see in the box below, we can see the format content as text interface.
This is where we are going to build our json object.
The basic structure is thisâŚ
{âfieldnameâ: âyourDynamicFieldâ, âanotherfieldnameâ: âyourNextDynamicFieldâ}
In my example, Iâve injected a ton of stuff in there to populate my template, but yours might only be one or two fields.
Use the format as text menu to build a json object
Youâll notice in the box below thereâs a delimeter option which is a comma (,). This is what is injected in between each result to give us a valid json object.
Once youâve got all this set up, and youâve double checked your field names used here match the ones you have in your template, you can send a test.
Running the email summary on a schedule
You will most likely want these emails to be sent out to all users automatically each week.
To do this we will need to set up a recurring event in Bubble.
Note: You might want to give your users the option to turn these emails on or off. To do this, create a yes/no field on the user database object called ToggleEmailSummary. You can then use this in a filter for your searches when sending out your emails, and only send the email if the users ToggleEmailSummary is yes.
Hereâs my recurring event which will trigger my send-email-summary workflow.
As you can see the first step is to Schedule API Workflow on a list.
The list itâs scheduled on is⌠do a search for all users where ToggleEmailSummary = yes.
To set this recurring event running, you simply need to place a button on an admin page and set it to start.
Then every week, the recurring event will search for all your users who want to get an email summary and send the summary out to them, totally automatically.
Thatâs it! I know this weekâs issue is quite technical, but I thought this is quite a neat trick to be able to send out these kind of summary emails automatically.
That's it for this week!
Thanks so much for subscribing, I hope you found this helpful.
If you could take a moment to share the newsletter with your other no code friends on Twitter it would be super appreciated -
https://nocodesaas.app
Iâm still making good progress on my new book - The No Code Startup which is going to be launching early next year. Itâs going to contain tons of practical advice on how to start a SaaS business without being a programmer. Pre-orders are open now with an earlybird price.
Until next week. Have a great weekend & happy building!
James :)