Hey Everyone… I’m on a journey to understand all that can be done with Sendgrid, and I’m going to document my experience here!
The Big Picture
You could say there are three kinds of emails you can send from Bubble…
-
Bubble’s Transactional Emails
By this we mean the ones that that Bubble sends out automatically on our user’s behalf such as those for a password reset. -
Bubble’s “Send Email” Action
So using the standard action that comes with native Bubble, found in Add Action -> Email -> Send Email. -
Using a Plugin
Which brings all sorts of other possibilities.
For the sake of this discussion, let’s call (1) and (2) “native emails”, and (3) “plugin emails”.
Native Emails: How Bubble Works By Default.
When you first set up an account with Bubble, native emails are sent via an email service which comes as a part of the Amazon Web Services (AWS) environment that Bubble is hosted on. However that service has some limitations, in terms of the number of emails you can send per day, and the fact that the email header looks like it has come from a “no reply” location (even though you can actually set up a working reply to address ).
To overcome this, Bubble set up an integration with a professional email service called Sendgrid (who have recently been bought by Twilio).
A Quick Overview of Sendgrid
Email systems are based on the idea of defining a Template for the emails they will send. A Template defines the overall look and feel of the email, and the content is then inserted into the template using a kind of [shortcode] system. In Sendgrid these are called Variables, and are enclosed in {{CurlyBraces}}, or <%PercentTags%>.
Bulk emails are generally seen as being for one of two functions: “transactional” emails for things like password resets or telling your client you received their payment, and “marketing” emails for things like newsletters. Transactional emails you tend to send one at a time and can look quite plain. Marketing emails you tend to send en-mass for things like newsletters, and you want them to have more of an eye catching design.
Sendgrid actually has three types of templates, which at first can be a little confusing:
- Legacy - a basic form of transactional template from their earlier days of operation.
- Transactional - their more recent and sophisticated transactional templates.
- Marketing - their marketing email template types.
Setting Up the Sendgrid - The Basics
To move over to sending emails by Sendgrid, you have to go through a potentially confusing setup process which has the possibility of using either Legacy or Transactional templates - hence this setup guide to help you on the way. Note that your Bubble app has to be on a custom domain before you can do all of this.
The first installation stage is the same for either…
- Head over to sendgrid.com and set up an account.
- Go to Settings -> API Keys, Create an API Key, and copy it.
- In Bubble, go to Settings -> Domain/Email, and paste the key into the Sendgrid API Key field.
- Click the Connect button next to this field to send Bubble off to check it can talk to Sendgrid okay.
So far so good.
Setting Up Sendgrid - Legacy Templates
The easiest way to set up Sendgrid is with a Legacy Template. So back in Sendgrid:
- Go to Templates -> Legacy.
- [Create Template]
- Give it a name like “Bubble Send Email Template”. Click [Save]
- You now get an ID code listed.
- Click on [Add Version]. A new window comes sliding out from the side. Select Design Editor and [Continue].
- You now come into a whole other template design world. Luckily you don’t need to do much in here!
- On the left hand side, Enter into the Template Name field a name like “Bubble Send Email Template v1”.
- Click [Save Template] and then the <- back button.
- You should now be back on the Legacy Transactional Templates page where your template is listed, along with the ID key. Copy the ID key.
Back in Bubble…
- In Settings -> Domain and Email, paste the template id key into the Template ID (optional) field.
Bingo! You should be good to go. Test out sending a password reset email and an email via the action Emails -> Send Email and check everything is working okay.
You will find that the Send Email action now has an option “Do not apply a Sendgrid Template”. I have found whether that is ticked or not, an email is sent. It is possible you can actually send emails without going through the legacy template setup process, but I never got to check that out… and certainly now you have a template, you have some control to change the details of how it looks.
Why Use A Sendgrid Plugin?
So if you can send emails okay as described, why would you want to use a plugin to access Sendgrid? The main reasons for me are:
- As my app is multi-user, so my users can send emails that appear to have come from them. The Send Email action in Bubble allows can send emails with a specific “reply-to address” and “email from name”, but it always leave the “email from address” the same, which looks a bit odd.
- So I can access details of whether the email was sent back in Bubble, rather than my users needing to go into Sendgrid to find this out.
A plugin will work in parallel with what you have already set up - so your legacy template will work with your “native” email sending, and the plugin with actions you invoke which call it up.
At the time of writing, there is just one Sendgrid plugin for sending emails, which is the “Send Emails With Sendgrid” one created by @copilot.
Using The Send Emails With Sendgrid Plugin
Once installed, the plugin gives you two new actions in the Plugins menu. We will work with the “Sendgrid Send Email” action:
MORE DETAILS TO FOLLOW! 
