Mailchimp

Before opening Bubble, collect the two pieces of information you need from Mailchimp: your API key and your Audience ID. Log in to Mailchimp and navigate to Account → Extras → API Keys. Click 'Create A Key' and give it a name like 'Bubble Integration'. Copy the generated key — it looks like `4a2f8c...xxxxxx-us14`. The data center suffix is everything after the last dash: in this example, `us14`. Write down this suffix separately. You'll use it to build your API base URL: `https://us14.api.mailchimp.com/3.0` (replace `us14` with your actual suffix). This is not a setting you enter once globally — it must be in the base URL field of your API Connector configuration. Next, get your Audience ID. Go to Audience → All contacts → Settings → Audience name and defaults. Scroll down to find the 'Audience ID' field (also called List ID in older Mailchimp docs). Copy it — it looks like `abc12345`. You'll need this in every API call that targets subscribers. Store both values somewhere handy (a notes file, not a Bubble text element). The API key should never appear in your Bubble app's visible content.

Open your Bubble editor and go to Plugins → Add plugins. Search for 'API Connector' and install it (by Bubble, free). In the API Connector, click 'Add another API'. Name it 'Mailchimp'. In the Base URL field, enter your data-center-prefixed URL: `https://us14.api.mailchimp.com/3.0` — replacing `us14` with your actual data center code. This is the most important field in the entire configuration. If you enter `https://api.mailchimp.com/3.0` here (without the data center prefix), every API call will return a 404 error. For Authentication, click the dropdown and select 'HTTP Basic Auth'. Two fields appear: Username and Password. - Username: enter `anystring` (this is literal — any non-empty string works; Mailchimp does not validate the username, only the password) - Password: enter your full Mailchimp API key (the entire string including the data center suffix at the end) - Check the 'Private' checkbox next to the Password field — this keeps your API key server-side Do not add the Content-Type header as a shared header here — you'll add it at the individual call level where needed for POST and PUT calls. Click 'Save'.

1{
2  "base_url": "https://us14.api.mailchimp.com/3.0",
3  "authentication": {
4    "type": "HTTP Basic Auth",
5    "username": "anystring",
6    "password": "<private: your_mailchimp_api_key>"
7  }
8}

Click 'Add a new call' under your Mailchimp API. Name it 'Add or Update Subscriber'. Set method to PUT. Set the path to `/lists/<dynamic: list_id>/members/<dynamic: subscriber_hash>`. The `subscriber_hash` is the MD5 hash of the subscriber's lowercase email address — this is how Mailchimp identifies subscribers in the PUT endpoint. Here is the important architectural decision: Bubble does not have a native MD5 function. You have two options: **Option A (Recommended for simplicity): Use POST instead of PUT.** Create a POST call to `/lists/<dynamic: list_id>/members`. POST creates a new subscriber but returns a 400 'Member Exists' error if the email is already in the list. For a simple opt-in form where you only add new subscribers, catch and ignore this 400 error using Bubble's 'Only when' condition or by not showing an error on 400 responses. **Option B: Use PUT with MD5 hash.** You need to compute the MD5 hash of the lowercase email before calling the API. One approach: use a third-party MD5 API call (there are free public MD5 hash endpoints) as a prior step in the workflow. Another: install the Toolbox plugin (by Zeroqode) which provides a 'Run JavaScript' action — you can use JavaScript's built-in crypto.subtle API to compute the hash. PUT is more powerful — it creates if not exists and updates if exists. For most beginners, Option A (POST with 400 error handling) is the right starting point. Add the PUT pattern later if you need to update existing subscribers. In either case, set Body type to JSON. The request body is shown in the code block. Add `Content-Type: application/json` as a call-level header. Change 'Use as' to 'Action'. Click 'Initialize call'. Enter a test email and your Audience ID as the list_id. For Option A (POST), if the email already exists you'll get a 400 which blocks initialization — use a fresh test email you've never added. Confirm a 200 response and the subscriber appears in your Mailchimp audience.

1{
2  "POST method body (new subscribers only)": {
3    "email_address": "<dynamic: email>",
4    "status": "subscribed",
5    "merge_fields": {
6      "FNAME": "<dynamic: first_name>",
7      "LNAME": "<dynamic: last_name>"
8    },
9    "tags": ["<dynamic: tag_name>"]
10  },
11  "PUT method body (create or update)": {
12    "email_address": "<dynamic: email>",
13    "status": "subscribed",
14    "status_if_new": "subscribed",
15    "merge_fields": {
16      "FNAME": "<dynamic: first_name>",
17      "LNAME": "<dynamic: last_name>"
18    }
19  }
20}

Now connect the API call to your Bubble landing page form. Navigate to the Workflow tab. Click on the form submit button element to create a workflow event, or use 'When Sign Up button is clicked'. Add a step in the workflow. Select 'Plugins → Mailchimp → Add or Update Subscriber'. Bubble shows input fields for each dynamic parameter you defined: - `list_id`: enter your Audience ID directly as a static value (e.g., `abc12345`) — this is the same for every call - `email`: map to 'Input Email's value' (or whatever your email input element is named) - `first_name`: map to 'Input First Name's value' - `last_name`: map to 'Input Last Name's value' - `tag_name`: enter a static value like `landing-page-signup` or leave blank if not using tags Add a second workflow step to give the user feedback: change the Submit button text to 'Subscribed! ✓' using 'Element Actions → Set state' or navigate to a confirmation page. Add an 'Only when' condition on the API call step if you want to validate the email input first: 'Only when Email input's value contains @'. This prevents obviously invalid emails from hitting the Mailchimp API. RapidDev's team has implemented Mailchimp subscriber sync for many Bubble landing page projects — if you need more complex segmentation logic (different audiences per landing page, tag-based automation triggers), a free scoping call is available at rapidevelopers.com/contact.

Now add a read call so you can display Mailchimp data back in Bubble — useful for an admin dashboard or a subscriber count widget on your public page. Add a new call under Mailchimp. Name it 'Get Audience Stats'. Method = GET. Path = `/lists/<dynamic: list_id>`. Use as = Data. No body needed. Initialize the call with your Audience ID. Bubble detects the response fields including `stats > member_count`, `stats > open_rate`, `stats > click_rate`, and `name` (the audience name). On your admin page, add text elements mapped to: - Subscriber Count: `Current call's stats member_count` (shown as a number) - Open Rate: `Current call's stats open_rate * 100` formatted with 2 decimal places and a % suffix - Click Rate: `Current call's stats click_rate * 100` formatted similarly Note: Mailchimp returns open_rate and click_rate as decimals (0.245 = 24.5%). Always multiply by 100 before displaying as a percentage. The raw decimal value looks like terrible performance if not converted. For campaign-level stats, add a second GET call: `/campaigns?list_id=<dynamic>&count=1&sort_field=send_time&sort_dir=DESC`. This returns your most recent campaign with its report_summary data (opens, clicks, unsubscribes). Initialize and map to your admin page.

1{
2  "method": "GET",
3  "url": "https://us14.api.mailchimp.com/3.0/lists/<dynamic: list_id>",
4  "authentication": "HTTP Basic Auth (anystring / <private: api_key>)",
5  "example_response_stats": {
6    "stats": {
7      "member_count": 1247,
8      "open_rate": 0.2458,
9      "click_rate": 0.0812,
10      "campaign_count": 34
11    },
12    "name": "My Newsletter Audience"
13  },
14  "bubble_formula_open_rate": "Current call's stats open_rate * 100"
15}