While developing some apps on Bubble, I noticed that sending emails was one of the biggest challenges for small businesses seeking professionalism. Indeed, after seeing some posts (especially after the SendGrid outage), I realized that many Bubble apps were still using Bubble’s default email sending tool, which displays Bubble’s domain and has restricted limits (about 100 emails per day, if I’m not mistaken).
In this topic, I will describe how to leverage the power of Gmail for sending emails.
Note: I’m not entirely sure about the efficiency of this, but I’ve been using it for a while to send password reset and welcome emails to my users… I’ve never had any issues.
Known Limits: Gmail’s documentation is a bit contradictory, but from my tests, you can send up to 150 emails per minute (this is the official quota that appears on my dashboard). In older articles, it states that Gmail limits to 1,000 emails per day, while in another, it’s reported that the limit is 10,000, etc.
Setting up the domain
Yes, you can set up your own domain in Gmail and stop using @gmail.com (for receiving and sending messages). The first requirement is that your domain needs to be set up on Cloudflare, so point the DNS to Cloudflare’s servers.
In this example, I’ll use my domain squaadai.com.
After setting up your domain on Cloudflare (I won’t go into details because it’s easy and quick), you should access your domain:
And go to Email Routing:
In Email Routing, click on “Get Started” and define how you want your new email to appear. In this case, I set it as support@squaadai.com. In “Destination”, put the original email of your Gmail account (I recommend creating a separate Gmail account to avoid mixing it with your personal one).
You will receive a confirmation email from Cloudflare, just click on “Verify”.
Go back to the page and set up the DNS as instructed… you can define this in the DNS panel of Cloudflare.
Go back to Email Routing and enable Catch-All:
All set, domain configured!
Setting up the email
This part seems complicated but it’s simple. Access your Gmail (the same email you set as “Destination” in Cloudflare).
At this stage, if you set a password, an error will occur:
This happens because, as we will receive and send messages with our domain via Gmail, we need to have two-factor authentication enabled and a specific password generated by Google.
Access your Google account at: My Account - App Passwords (this will not work and you won’t be able to create a password if you don’t have two-factor authentication enabled, so activate it).
In “App name”, set it as Gmail:
You will receive a password, which must be entered. And… success!
Now, you can send and receive emails with your personalized domain. After verification (an email will be sent to your inbox, even if Google says it was sent to your domain), click on “Set as default”:
You can now test. Send an email from another account (it doesn’t work if it’s the same one) to your new personalized email. In this case, I received it successfully:
and you can reply to any email with your personalized email as well:
Sending emails directly from Bubble
Perfect! We’ve set up the domain and email, meaning we can now send and receive emails, but… only via Gmail.
I created a free plugin that allows sending emails simply and quickly. You can insert it into your app here: Gmail - Send messages Plugin | Bubble.
Getting the Google keys
To make this work, you will need three Google keys: ClientID, ClientSecret, and RefreshToken.
ClientID and ClientSecret
I’ll use images from a Russian site to illustrate better. Let’s go:
Access: Google APIs Library - Gmail API
In “Authorized redirect URIs”, put: https://developers.google.com/oauthplayground
.
Perfect! Now, go to “Credentials” and select the OAuth you just created. There you will find your ID and Secret:
RefreshToken
Access OAuth 2.0 Playground. The first thing you need to do is set the ClientID and Client Secret, as taught in the previous step.
After setting it up, follow the steps below:
Select the Gmail account where your personalized email is set up and allow access:
Click the blue button:
Done, you now have your Refresh Token!
After getting the ClientID, ClientSecret, and RefreshToken, just paste these tokens into the plugin configuration Everything is working!
Now, whenever you want to send an email, use the ‘Send email (Gmail)’ action and fill in the necessary fields (the sender’s email must be your personalized email set up):
You can test by sending an email to yourself using the test app I made: Your Bubble app. You should receive an email from support@squaadai.com, sent using the Gmail API and the mentioned plugin.
The plugin also allows attaching a file (jpg, jpeg, png, gif, pdf, mp3, or mp4).
Customizing an email
The email content (body) works based on HTML, not the usual Bubble formatting. To make a word bold, for example, use <b></b>
instead of [b][/b]
.
This opens up a world of email customization opportunities. You no longer need to send just basic
texts to your users. Search for “HTML email templates” on Google and have fun playing with online HTML email editors or editing templates. In fact, you can ask ChatGPT to generate an email, as in the example below:
A known error is that if you decide to repeatedly send an email with the same subject to the same recipient, it will not be sent. I believe it’s a Gmail API protection, not an actual error.
This does not replace SendGrid and other platforms; it is more geared towards small businesses and people in countries where the dollar is extremely high compared to the national currency, like Brazil. Twenty dollars may seem little to send 50,000 emails per month via SendGrid, but in Brazil, twenty dollars corresponds to almost 10% of the minimum wage.
Anyway, if anyone finds more use cases, ideas, quota limitations that I’m not aware of, problems, or bugs, just comment in the thread