Campaign Monitor

Log into Campaign Monitor and navigate to your account name (top-right) → 'Account Settings' → 'API Keys'. Click 'Generate API Key' if you do not have one, then copy the key. This key is account-wide and must be stored securely in your backend — never in FlutterFlow. To find your client ID, you have two options. First, check the URL when you are viewing a specific client in the Campaign Monitor interface — the client ID appears in the URL path. Alternatively, make a direct API call: `GET https://api.createsend.com/api/v3.3/clients.json` with Basic Auth (your API key as username, the word `x` as the password) — this returns all your client sub-accounts with their IDs. To find your list ID, navigate to the client in Campaign Monitor → Lists & Subscribers → click the list you want → look at Settings or the URL for the list ID. You can also call `GET /api/v3.3/clients/{clientID}/lists.json` with Basic Auth to get all lists for a client. Note both the client ID and list ID you want to write subscribers to. These will be stored as environment variables in your backend so you can reference them without hardcoding them into your Cloud Function source code.

Create a Firebase Cloud Function (or Supabase Edge Function) that holds your Campaign Monitor API key and computes the Basic Auth header for every request. Basic Auth requires a header of the form `Authorization: Basic <base64(username:password)>`. For Campaign Monitor, this is `Authorization: Basic <base64(API_KEY:x)>` — where `x` (or any non-empty string) is the dummy password. In Node.js, you can compute this with `Buffer.from(API_KEY + ':x').toString('base64')`. Never hard-code the key in source code — store it using `firebase functions:config:set campaignmonitor.key=YOUR_KEY` and read it with `functions.config().campaignmonitor.key` at runtime. Expose at least two endpoints from your function: one for adding a subscriber (`POST /addSubscriber`) and one for reading campaign stats (`GET /getCampaigns`). For the subscriber endpoint, accept `{ email, name }` from FlutterFlow, then POST to `https://api.createsend.com/api/v3.3/subscribers/{listID}.json` with the body Campaign Monitor expects. For campaign stats, call `GET /api/v3.3/clients/{clientID}/campaigns.json`, then for each campaign ID call the summary endpoint to get open/click rates. Return clean JSON to FlutterFlow. Make sure every Cloud Function response includes the CORS header `Access-Control-Allow-Origin: *` and handles OPTIONS preflight requests, so FlutterFlow's web Test Mode can reach it.

1// Firebase Cloud Function — Campaign Monitor proxy (index.js)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5const CM_KEY = functions.config().campaignmonitor.key;
6const CM_LIST_ID = functions.config().campaignmonitor.list_id;
7const CM_CLIENT_ID = functions.config().campaignmonitor.client_id;
8const CM_BASE = 'https://api.createsend.com/api/v3.3';
9
10// Campaign Monitor uses Basic Auth: API key as username, dummy string as password
11const auth = 'Basic ' + Buffer.from(CM_KEY + ':x').toString('base64');
12const headers = { 'Authorization': auth, 'Content-Type': 'application/json' };
13
14// Endpoint: add subscriber
15exports.addSubscriber = functions.https.onRequest(async (req, res) => {
16  res.set('Access-Control-Allow-Origin', '*');
17  if (req.method === 'OPTIONS') return res.status(204).send('');
18
19  const { email, name } = req.body;
20  if (!email) return res.status(400).json({ error: 'email required' });
21
22  const body = JSON.stringify({
23    EmailAddress: email,
24    Name: name || '',
25    Resubscribe: true,
26    ConsentToTrack: 'Yes'
27  });
28
29  const r = await fetch(`${CM_BASE}/subscribers/${CM_LIST_ID}.json`, {
30    method: 'POST',
31    headers,
32    body
33  });
34
35  // 200/201 = success, 400 = already subscribed (treat as success)
36  if (r.status === 200 || r.status === 201 || r.status === 400) {
37    return res.json({ success: true });
38  }
39  const data = await r.json();
40  res.status(r.status).json(data);
41});
42
43// Endpoint: get campaigns list
44exports.getCampaigns = functions.https.onRequest(async (req, res) => {
45  res.set('Access-Control-Allow-Origin', '*');
46  if (req.method === 'OPTIONS') return res.status(204).send('');
47
48  const r = await fetch(`${CM_BASE}/clients/${CM_CLIENT_ID}/campaigns.json`, { headers });
49  const data = await r.json();
50  res.json(data || []);
51});
52

In your FlutterFlow project, click 'API Calls' in the left navigation bar. Click '+ Add' and choose 'Create API Group'. Name it 'Campaign Monitor' and set the base URL to your Firebase Cloud Functions deployment root URL (e.g., `https://us-central1-your-project.cloudfunctions.net`). No Authorization header is needed — your backend proxy handles it. Click 'Save' to create the group. Add the first API Call: click '+ Add API Call', name it 'Add Subscriber', set method to POST, and endpoint to `/addSubscriber`. Go to the 'Variables' tab and add two variables: `subscriber_email` (String) and `subscriber_name` (String). In the 'Body' tab, set the body type to JSON and write: `{ "email": "{{subscriber_email}}", "name": "{{subscriber_name}}" }`. Switch to 'Response & Test', enter a real email address in the variables, click 'Test', and verify the subscriber appears in your Campaign Monitor list. Generate JSON Paths from the response. Add a second API Call named 'Get Campaigns', set method to GET, endpoint to `/getCampaigns`. Test it and generate JSON Paths — you should see paths like `$[0].Name`, `$[0].SentDate`, `$[0].UniqueOpens` appear after FlutterFlow parses the response. These paths are what you will bind to a List or Chart widget.

1// FlutterFlow API Call config reference
2{
3  "group_name": "Campaign Monitor",
4  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net",
5  "api_calls": [
6    {
7      "name": "Add Subscriber",
8      "method": "POST",
9      "endpoint": "/addSubscriber",
10      "body": { "email": "{{subscriber_email}}", "name": "{{subscriber_name}}" },
11      "variables": [
12        { "name": "subscriber_email", "type": "String" },
13        { "name": "subscriber_name", "type": "String" }
14      ]
15    },
16    {
17      "name": "Get Campaigns",
18      "method": "GET",
19      "endpoint": "/getCampaigns"
20    }
21  ]
22}
23

Navigate to the screen in your FlutterFlow project that has your newsletter sign-up form. If it does not exist yet, add a Column containing a TextField for email (set the keyboard type to 'Email Address'), an optional TextField for the subscriber's name, and a Button labeled 'Subscribe'. Select the Subscribe button and open its Actions panel (the lightning bolt icon on the right side). Click '+ Add Action' → 'Backend/Database' → 'API Call'. Choose the 'Campaign Monitor' group and the 'Add Subscriber' call. For the `subscriber_email` variable, click the binding option and select 'Widget State → [your email TextField's controller]'. For `subscriber_name`, bind it to the name TextField, or leave it as an empty string literal if you only want email. After the API Call action, add a 'Show Snack Bar' action with a success message like 'You are subscribed!'. To handle errors gracefully, add a conditional action after the API Call that checks the API response status — if the status indicates an error, show a different snack bar message like 'Something went wrong, please try again'. For the case where a subscriber is already on the list, your Cloud Function treats a 400 response as success (because Campaign Monitor returns 400 for 'Email address is already a subscriber') and returns `{ success: true }`. This means FlutterFlow will show the same success message for new and existing subscribers — a good UX choice that avoids awkward 'already subscribed' error messages.

If you want to display campaign performance analytics in your app (open rates, click rates, send counts), create a new screen in FlutterFlow. Add a ListView and configure its backend query: 'API Call → Campaign Monitor → Get Campaigns'. Inside each list item, add Text widgets bound to the campaign name (`$[0].Name`), send date (`$[0].SentDate`), and a numeric stat like unique open rate. For a visual chart, add a FlutterFlow Bar Chart or Pie Chart widget and configure its data series manually by creating a Custom Function or App State variable that extracts open/click rate values from the API response for each campaign. This requires a bit more setup but creates a compelling analytics view that your team can check on mobile without logging into Campaign Monitor. Before publishing, test the full flow on a real device or in FlutterFlow's Local Run: open the sign-up screen, enter an email, tap Subscribe, and verify the subscriber appears in Campaign Monitor. Then open the campaigns screen and confirm real campaign data loads. If you are using FlutterFlow's web Test Mode, confirm your Cloud Function has the CORS header set correctly — the common symptom of a missing CORS header in web preview is that the ListView shows 'No data' even though the API Call tests correctly in the Test tab. If you want help setting up the backend proxy or the multi-client ID workflow, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.