SendGrid

Before touching Bubble, get two things right in your SendGrid account: a properly scoped API key and a verified sender identity. Both must exist before the first API call will work. Log in to SendGrid and go to Settings → API Keys → Create API Key. Give it a name like 'Bubble App'. Under permissions, choose 'Restricted Access'. Enable 'Mail Send' (Full Access) and 'Suppressions' (Full Access). Click Create & View, copy the key (starts with `SG.`), and store it somewhere secure — SendGrid only shows the full key once. Next, verify your sender. Go to Settings → Sender Authentication. The simplest path for a custom domain is 'Authenticate Your Domain' — enter your domain, follow the DNS record instructions your email provider gives you, and click Verify. For faster setup on a non-custom domain, use 'Verify a Single Sender' with an email you own and can click a verification link from. Without verified sender authentication, every API call to /v3/mail/send will return a 403 Forbidden error — and that 403 looks identical to an incorrect API key error, which is why this step confuses beginners.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar. Click 'Add plugins' and search for 'API Connector'. Install the API Connector plugin by Bubble — it's free and installs instantly. After installation, click on 'API Connector' in your Plugins list. Click 'Add another API' and name it 'SendGrid'. In the 'Authentication' dropdown, select 'None or self-handled' — you'll set the key manually in a shared header so you have full control over the Private checkbox. Under 'Shared headers for all calls', click the plus to add a header. Name it `Authorization`. In the value field, enter `Bearer SG.yourfullapikey` (replace with your actual key). Now, critically, check the 'Private' checkbox next to this header. The Private checkbox is what keeps your key server-side — without it, the Authorization header is sent from the browser and anyone opening DevTools on your site can read the key and send emails from your domain. Also add a second shared header: `Content-Type` with value `application/json` (no Private checkbox needed — this is not sensitive). Set the API's base URL to `https://api.sendgrid.com`.

1{
2  "base_url": "https://api.sendgrid.com",
3  "shared_headers": [
4    {
5      "name": "Authorization",
6      "value": "Bearer SG.yourkey",
7      "private": true
8    },
9    {
10      "name": "Content-Type",
11      "value": "application/json",
12      "private": false
13    }
14  ]
15}

Click 'Add a new call' under your SendGrid API. Name this call 'Send Transactional Email'. Set the method to POST and the path to `/v3/mail/send`. Change 'Use as' to 'Action' — because this call changes state (sends an email), not data retrieval. Set the Body type to 'JSON body'. In the body editor, enter the request structure. The cleanest pattern uses a Dynamic Template ID rather than embedding HTML directly in the body — this keeps your Bubble JSON body minimal and lets you control email design in SendGrid's visual editor. The request body should look like the code block below. Replace `d-xxxxxxxxxx` with your actual template ID from SendGrid's Email API → Dynamic Templates section. For the Initialize call step: Bubble requires a real, successful API response to auto-detect the response fields. Click 'Initialize call'. Before clicking, replace all the `<dynamic>` placeholders with real test values: use an email address you own as both from and to, and fill in any variables your template expects. Click 'Save & Initialize'. If you get a 202 response, initialization succeeds and Bubble detects the (empty) response body. If you get 400, your body has a JSON syntax error. If you get 403, your sender isn't verified yet. After initialization, the call appears in your SendGrid API with a green checkmark. All `<dynamic>` placeholders become input parameters you can map from Bubble data.

1{
2  "personalizations": [
3    {
4      "to": [
5        {
6          "email": "<dynamic: recipient_email>"
7        }
8      ],
9      "dynamic_template_data": {
10        "first_name": "<dynamic: first_name>",
11        "order_id": "<dynamic: order_id>"
12      }
13    }
14  ],
15  "from": {
16    "email": "<dynamic: from_email>",
17    "name": "<dynamic: from_name>"
18  },
19  "template_id": "d-xxxxxxxxxx"
20}

Now connect the API call to an event in your Bubble app. Go to the Workflow tab. You can trigger an email send from almost any event: a button click, a sign-up completion, a data change, or a scheduled Backend Workflow. For a sign-up confirmation email: create a workflow on your sign-up page. The trigger is 'When a User signs up' (or 'When Sign Up button is clicked'). Add a new step and choose 'Plugins → SendGrid → Send Transactional Email'. Bubble will show input fields for each `<dynamic>` parameter you defined in the call body: - `recipient_email` → map to 'Result of step 1's email' or 'Current User's email' - `first_name` → map to 'Current User's first name' - `from_email` → enter your verified sender address as a static value (e.g., hello@yourapp.com) - `from_name` → enter your app or brand name as a static value - `order_id` → map to 'Current Order's ID' (or leave empty if not used) For more complex triggers, use a Backend Workflow (Settings → Backend workflows → New API Workflow) and call the SendGrid action as a step. Backend Workflows can be scheduled, triggered by other workflows, or called via API — perfect for post-purchase emails, reminder emails, or batch sending. Note: Backend Workflows require a paid Bubble plan. RapidDev's team has built hundreds of Bubble apps with transactional email integrations like this — if your email flow is more complex (conditional templates, retry logic, batching), a free scoping call at rapidevelopers.com/contact can help you design it right.

A production-grade integration should also surface email health data in your Bubble admin panel. SendGrid's suppression endpoints let you see bounced or spam-reported addresses without leaving Bubble. Back in the API Connector under your SendGrid API, click 'Add a new call'. Name it 'Get Bounces'. Set method to GET, path to `/v3/suppressions/bounces`. Change 'Use as' to 'Data'. Leave the body empty. Click 'Initialize call'. SendGrid will return a JSON array of suppressed addresses. Bubble auto-detects the fields: `email`, `created` (Unix timestamp), and `reason`. On your admin page in Bubble, add a Repeating Group. Set Type to 'External API response' and Data Source to 'Get data from external API → SendGrid - Get Bounces'. Map each text element to `Current cell's email`, `Current cell's reason`, and a formatted date from `Current cell's created` (multiply the Unix timestamp by 1000 in a Bubble expression, then format as Date). This gives a simple suppression list view your team can monitor without SendGrid account access. A 'Remove from bounces' button can call DELETE `/v3/suppressions/bounces/{email}` — create a separate API Connector action call for this.

1{
2  "method": "GET",
3  "url": "https://api.sendgrid.com/v3/suppressions/bounces",
4  "headers": {
5    "Authorization": "Bearer <private>",
6    "Content-Type": "application/json"
7  },
8  "params": {
9    "start_time": "<optional: unix timestamp>",
10    "end_time": "<optional: unix timestamp>",
11    "limit": "100",
12    "offset": "0"
13  }
14}