Visit our Website

SendGrid API Connection

This guide will walk you through setting up your SendGrid account and integrating it with your Bubble app to ensure the best possible email deliverability while using SendGrid.

Important Notes

Your Bubble app must be on a paid plan or managed by Scaling Process (as a Bubble Agency) to proceed with all steps outlined here.

Following these steps ensures that your emails are less likely to end up in spam and more likely to reach your users' inboxes.

Step 1: Create a SendGrid Account

If you haven’t already, start by creating a SendGrid account:

  1. Go to SendGrid and sign up for an account or log in to your existing account.

  2. Follow the on-screen instructions to complete the setup process.

Free SendGrid plan if you are developing your own app:

You can stay on the free plan on SendGrid, but bear in mind that your Bubble app will only be able to deliver 100 emails per day.

Even if you plan your app not to send more than 100 emails per day when launched, we strongly recommend you to update your SendGrid plan, at least for your testing not be limited while developing.

If Scaling Process developers are working on your app:

We need to be able to test transactional email sending while developing your app, so please head up to Account Details > Your Products on your SendGrid account an sign up for an "Email API" plan - at least the "Essentials 50K" plan, which is priced $19.95/month in the moment we're writing this article.

Step 2: Authenticate the Sender

Sender authentication is critical for improving your email deliverability. You need to authenticate both your domain and a single sender.

2.1 Go to Settings > Sender Authentication

  1. After logging in, navigate to the Settings section in the SendGrid dashboard.

  2. Select Sender Authentication from the menu.

2.2 Authenticate Domain

  1. Click on Authenticate Your Domain.

  2. Choose your DNS host and follow the provided instructions to update your DNS records.

    • This process usually involves adding several CNAME records to your domain’s DNS settings.

  3. Once the records are added, return to SendGrid and click Verify.

If you hired Scaling Process services and have questions about this step, please contact your Product Manager at Scaling Process and ask for help.

2.3 Verify a Single Sender

  1. Still under Sender Authentication, select Single Sender Verification.

  2. Enter the email address you want to use as your sender (e.g., [email protected]).

  3. SendGrid will send a verification email to this address. Click the verification link in the email to complete the process.

the Single Sender email address should be a valid email address (or group or alias) and you should be able to receive messages through it.

Ideally, this should be your support email for clients to be able to contact it.

Step 3: Generate an API Key

An API key is required to connect your SendGrid account with your Bubble app.

  1. Go to the API Keys section under Settings in SendGrid.

  2. Click Create API Key.

  3. Give your API key a name (e.g., “Bubble”).

  4. Choose Full Access and click Create & View.

  5. Copy the generated API key. You’ll need this in the following steps.

Attention Your API key is only visible once. Make sure to copy it to follow the next steps. If you don't copy it now, you will have create a new one.

Step 4: Integrate SendGrid with Your Bubble App

If you are managing your Bubble app yourself and not through Scaling Process, you’ll need to manually add the API key.

4.1 Add the API Key to the Domain / Email Section

  1. Open your Bubble app in the editor.

  2. Go to Settings > Domain / Email.

  3. Paste the SendGrid API key in the API Key field under the Email settings section.

  4. Save the changes.

4.2 Add the API Key to the SendGrid Plugin (If Applicable)

If the SendGrid plugin is being used in the template you bought, for more advanced email functionalities, you will have to also add your API key to it.

  1. Go to the plugin settings in your Bubble editor.

  2. Select the SendGrid plugin

  3. Paste the SendGrid API key into all API Key/Authorization fields.

Conclusion

By following these steps, you’ll have successfully set up and integrated SendGrid with your Bubble app, ensuring optimal email deliverability.If you’ve hired Scaling Process to manage your app, we’ll handle steps from 4 and beyond for you. However, if you’re implementing this yourself, this guide should cover everything you need to get started.

For further assistance, please reach out to our support team or consult the full SendGrid documentation.

Last updated