Sendinblue

Log into your Brevo account at app.brevo.com. Navigate to the top-right menu → Settings → API Keys (or go to app.brevo.com/settings/keys/api). Click 'Generate a new API key'. Enter a name like 'Bubble Integration' → click 'Generate'. Copy the API key — it starts with `xkeysib-` and is shown only once. Store it in a secure place (you can always generate a new one if lost, but you cannot view it again after closing the dialog). Important: Brevo's API uses a non-standard header name. The key goes in a header named exactly `api-key` (all lowercase, hyphen between 'api' and 'key'). This is not `Authorization: Bearer`, not `X-API-Key`, not `apikey`. The exact header name matters — any variation returns a 401 Unauthorized with a message that just says 'authentication failed' without identifying the header name as the problem. Before configuring Bubble, also verify your sender email. In Brevo → Settings → Senders & IP → Senders, click 'Add a new Sender'. Enter the name and email address you want transactional emails to appear from. Brevo sends a verification email to this address — click the confirmation link. Unverified sender addresses cause the transactional email API to return a 400 error: 'sender email is invalid'. This is a Brevo account setup requirement, not a Bubble issue.

1// Brevo API key format
2// Key name in Brevo: 'Bubble Integration'
3// Key value: xkeysib-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxx
4
5// Correct Brevo API header:
6// Header name:  api-key
7// Header value: xkeysib-... (your full key)
8
9// WRONG headers (all return 401):
10// Authorization: Bearer xkeysib-...
11// X-API-Key: xkeysib-...
12// apikey: xkeysib-...
13// Api-Key: xkeysib-...  (capitalization matters — must be lowercase 'api-key')

In Bubble, click the Plugins tab → 'API Connector' (install if not already present: Plugins tab → Add plugins → 'API Connector' by Bubble). Click 'Add another API'. Name it 'Brevo'. In the Shared headers section, click '+ Add a shared header'. Enter: - Header name: `api-key` — type this exactly: lowercase 'api', hyphen, lowercase 'key'. Do not capitalize any letters. - Header value: your Brevo API key (the xkeysib-... string you generated in step 1) - Enable the **Private** checkbox: this is critical. Private ensures Bubble never sends this header value to the user's browser — it's applied server-side on every request. Leave the Authentication dropdown set to 'None'. Brevo's authentication is handled entirely by the `api-key` header; Bubble's built-in auth mechanisms are not needed. Set the base URL to: `https://api.brevo.com/v3` The shared header approach means both the transactional email call and the contact management call (which you'll add next) automatically include the `api-key` header without you needing to add it individually to each call. One Private header covers the entire Brevo integration.

1// API Connector: Brevo
2{
3  "api_name": "Brevo",
4  "base_url": "https://api.brevo.com/v3",
5  "authentication": "none",
6  "shared_headers": [
7    {
8      "name": "api-key",
9      "value": "xkeysib-YOUR_API_KEY",
10      "private": true
11    }
12  ]
13}

Inside the Brevo API configuration, click 'Add a call'. Name it 'Send Email'. Set method to POST, path to `/smtp/email`. Switch the Body format to JSON. Add the following body fields: `sender` — type: object with sub-fields: `name` (text, e.g., 'Your App Name') and `email` (text, e.g., 'noreply@yourapp.com'). The sender email must be the verified address from step 1. `to` — type: list of objects, each with `email` (text) and `name` (text). In Bubble's API Connector, lists of objects require careful configuration — set the 'to' parameter as a JSON array with a single object containing the dynamic email and name fields. `subject` — text, can be dynamic. `htmlContent` — text, can be dynamic. This is the full HTML email body. Alternatively, if you're using Brevo email templates, use `templateId` (integer) instead of `htmlContent` and pass `params` for template variable substitution. Click 'Initialize call'. Enter a real email address as the recipient (your own address for testing). Click Initialize. If you see HTTP 201 Created in the response, the configuration is correct. Check your email inbox — you should receive the test email. Alternative template-based approach: instead of htmlContent, use `templateId` (the integer ID from Brevo's Email Templates section) and `params` (an object with key-value pairs matching your template variables). Template-based emails are easier to maintain and allow non-developers to update email design in Brevo without changing Bubble workflows.

1// Brevo POST /smtp/email — call configuration
2{
3  "method": "POST",
4  "path": "/smtp/email",
5  "body": {
6    "sender": {
7      "name": "Your App Name",
8      "email": "noreply@yourapp.com"
9    },
10    "to": [
11      {
12        "email": "<dynamic: recipient email>",
13        "name": "<dynamic: recipient name>"
14      }
15    ],
16    "subject": "<dynamic: email subject>",
17    "htmlContent": "<dynamic: full HTML email body>"
18  }
19}
20
21// Template-based alternative (uses Brevo template editor):
22{
23  "sender": { "name": "Your App Name", "email": "noreply@yourapp.com" },
24  "to": [{ "email": "<dynamic>", "name": "<dynamic>" }],
25  "templateId": 42,
26  "params": {
27    "FIRSTNAME": "<dynamic: user first name>",
28    "ORDER_ID": "<dynamic: order ID>"
29  }
30}

Inside the Brevo API configuration, click 'Add a call'. Name it 'Add Contact'. Set method to POST, path to `/contacts`. Switch the Body format to JSON. Add these body fields: `email` — text, dynamic (the contact's email address). `attributes` — object with contact attribute keys matching Brevo's attribute names. Standard attributes are `FIRSTNAME` and `LASTNAME` (uppercase, as defined in Brevo → Contacts → Contact attributes). Add any custom attributes your Brevo account has defined. `listIds` — array of integers. Brevo list IDs are integers (e.g., `[5]` not `["5"]`). Find your list ID in Brevo → Contacts → Lists — the number in the URL when viewing a list (e.g., app.brevo.com/contact/list/id/5 → list ID is 5). Hardcode the specific list ID(s) for this call. `updateEnabled` — boolean, value: `true`. This is important: when set to true, if a contact with that email already exists in Brevo, the API updates their attributes rather than returning a conflict error. Without updateEnabled: true, re-submitting the same email returns a 400 error ('Contact already exists'), which would break your Bubble workflow on repeated signups or form submissions. Click 'Initialize call'. Enter a test email address and click Initialize. Successful response is HTTP 201 Created (new contact) or HTTP 204 No Content (existing contact updated). Check Brevo → Contacts to confirm the test contact appears with the correct attributes and list assignment.

1// Brevo POST /contacts — call configuration
2{
3  "method": "POST",
4  "path": "/contacts",
5  "body": {
6    "email": "<dynamic: contact email>",
7    "attributes": {
8      "FIRSTNAME": "<dynamic: first name>",
9      "LASTNAME": "<dynamic: last name>"
10    },
11    "listIds": [5],
12    "updateEnabled": true
13  }
14}
15
16// Note: listIds must be an integer array, not strings
17// [5] = correct
18// ["5"] = incorrect (returns 400)
19// List IDs visible in Brevo URL: app.brevo.com/contact/list/id/5

With both API calls configured, you can now use them in Bubble workflows. The most common pattern is chaining them on user signup. Go to your signup page or the page where users create accounts. In the workflow triggered by the signup button (or wherever your user creation workflow lives), add these actions after the user creation step: Action: 'Plugins → Brevo → Add Contact' - email: Current User's email - attributes.FIRSTNAME: Input_FirstName's value (or Current User's first name field) - attributes.LASTNAME: Input_LastName's value Action: 'Plugins → Brevo → Send Email' - to[0].email: Current User's email - to[0].name: Current User's first name - subject: 'Welcome to [Your App Name]!' - htmlContent: Build your welcome email HTML string using Bubble's dynamic text expressions (or use a Brevo templateId) Bubble API Connector actions run server-side sequentially. Both calls use the same Private `api-key` shared header automatically. Total time for both calls is typically under 2 seconds. Test end-to-end: create a new test user account in your Bubble app. Verify: (1) the test user appears in Brevo → Contacts with the correct attributes and list membership, and (2) a welcome email arrives in the test email inbox. Check Bubble's Logs tab → Workflow logs to see the API call status codes (201 for new contact, 204 for updated contact, both are successes). RapidDev's team has implemented Brevo email workflows in dozens of Bubble apps — from simple welcome sequences to complex multi-step drip campaigns. If you need help with advanced email automation or multi-list segmentation, book a free scoping call at rapidevelopers.com/contact.

1// Bubble workflow: 'User Signup' button clicked
2// Action sequence:
3
4// Action 1: Sign the user up
5// (Bubble built-in: Sign the user up - email, password)
6
7// Action 2: Add to Brevo contact list
8// Plugin: Brevo - Add Contact
9// email = Input_Email's value
10// attributes.FIRSTNAME = Input_FirstName's value
11// attributes.LASTNAME = Input_LastName's value
12// listIds = [5]  (hardcoded in the API call config)
13// updateEnabled = true  (hardcoded in the API call config)
14
15// Action 3: Send welcome email
16// Plugin: Brevo - Send Email
17// to[0].email = Input_Email's value
18// to[0].name = Input_FirstName's value
19// subject = "Welcome to My App!"
20// htmlContent = "<h1>Hi " + Input_FirstName's value + ",</h1><p>Thanks for joining!</p>"