How to Integrate FlutterFlow with Mailchimp

In your Firebase project, create a Cloud Function named addToMailchimp. Install the dependency: npm install @mailchimp/mailchimp_marketing in your functions directory. The function receives email, firstName, lastName, and optional tags array from FlutterFlow. It constructs the subscriber hash by MD5-hashing the lowercase email (required by Mailchimp for upserts). It calls mailchimp.lists.setListMember (a PUT that creates OR updates) with status: 'subscribed', merge_fields: {FNAME, LNAME}, and tags. Set MAILCHIMP_API_KEY and MAILCHIMP_LIST_ID as environment variables in your Cloud Function (in Firebase Console → Functions → your function → Edit → Environment variables — never hardcode them). Return {success: true, id: subscriber.id} to FlutterFlow.

1const functions = require('firebase-functions');
2const mailchimp = require('@mailchimp/mailchimp_marketing');
3const crypto = require('crypto');
4
5mailchimp.setConfig({
6  apiKey: process.env.MAILCHIMP_API_KEY,
7  server: process.env.MAILCHIMP_SERVER_PREFIX // e.g. 'us21'
8});
9
10exports.addToMailchimp = functions.https.onCall(async (data, context) => {
11  const { email, firstName, lastName, tags = [] } = data;
12  if (!email) throw new functions.https.HttpsError('invalid-argument', 'Email required');
13  
14  const listId = process.env.MAILCHIMP_LIST_ID;
15  // Mailchimp subscriber hash = MD5 of lowercase email
16  const subscriberHash = crypto
17    .createHash('md5')
18    .update(email.toLowerCase())
19    .digest('hex');
20  
21  try {
22    const response = await mailchimp.lists.setListMember(listId, subscriberHash, {
23      email_address: email.toLowerCase(),
24      status_if_new: 'subscribed',
25      merge_fields: {
26        FNAME: firstName || '',
27        LNAME: lastName || ''
28      }
29    });
30    
31    // Add tags separately if provided
32    if (tags.length > 0) {
33      await mailchimp.lists.updateListMemberTags(listId, subscriberHash, {
34        tags: tags.map(tag => ({ name: tag, status: 'active' }))
35      });
36    }
37    
38    return { success: true, id: response.id };
39  } catch (err) {
40    throw new functions.https.HttpsError('internal', err.message);
41  }
42});

In FlutterFlow, open the API Manager (plug icon in the left sidebar). Click Add API Group. Name it MailchimpFunctions. Set the Base URL to your Cloud Function base URL: https://us-central1-{your-project-id}.cloudfunctions.net. Under Headers, add Content-Type: application/json. Add an API Call named addSubscriber. Set the method to POST and path to /addToMailchimp. Under the Request Body tab, add variables: email (String), firstName (String), lastName (String), tags (List). The body JSON should look like: {"data": {"email": [email], "firstName": [firstName], "lastName": [lastName], "tags": [tags]}}. Note: Firebase callable functions require the body wrapped in a data key. Click Test and verify you get {result: {success: true}} back with a test email address.

Create a subscribe form on your signup page or a dedicated newsletter widget. Add a TextField for email (hint: 'Your email address'), a TextField for first name, and a Button labeled 'Subscribe'. In the Button's Action Flow: (1) validate that the email TextField is not empty — show a Snackbar 'Please enter your email' if empty. (2) API Call → MailchimpFunctions → addSubscriber, passing the email and name TextFields as the variable values. (3) If the response status is 200 and success is true: update a Page State variable subscribeSuccess to true and show a Container with 'You are subscribed!' message. (4) If the response returns an error: show a Snackbar with the error message. Hide the form and show a success message using the subscribeSuccess Page State variable with conditional visibility.

To tag a subscriber when they complete a purchase or upgrade their plan, add an API Call to the same MailchimpFunctions group named updateSubscriberTags. This calls the same addToMailchimp Cloud Function but passes a tags array. For example, when a user completes a purchase, the Action Flow after the payment confirmation calls: API Call → updateSubscriberTags with email: currentUser.email and tags: ['customer', 'paid-plan']. The Cloud Function's setListMember upserts the contact and updateListMemberTags adds the tags. If the contact does not exist yet in Mailchimp, it will be created. Use Mailchimp tags to segment your email campaigns: send onboarding tips only to 'free-plan' tagged users, promotional offers only to 'customer' tagged users.