FlutterFlow and Mailchimp integration: Step-by-Step Guide 2024

   

• Sign In/Sign Up: Visit Mailchimp and either log in to your existing account or set up a new one.
• Create an Audience: Ensure you have an audience (also known as a list) set up in Mailchimp where you want to collect subscriber information.

   

• Open Account: Navigate to your Mailchimp account.
• Account Settings: Click on your profile in the bottom left and go to Account.
• Extras > API keys: In the account settings page, click on Extras and then API keys.
• Create A Key: Scroll down to Your API keys and click on Create A Key. Copy this key as you'll need it later.

   

FlutterFlow currently doesn't support direct integration with Mailchimp. Therefore, you need a backend service to handle API requests.

Option A: Using Firebase Cloud Functions

• Set up Firebase: Make sure your FlutterFlow project is already connected to Firebase.
• Install Firebase CLI: On your local machine, install the Firebase CLI if you haven't already.
• Initialize Cloud Functions: Open your terminal and initialize Firebase Cloud Functions in your project directory:

  bash
    firebase init functions
  

• Install Dependencies: Navigate to the functions directory and install necessary npm packages:

  bash
    cd functions
    npm install axios
  

• Create Function: Open index.js or index.ts file in the functions directory and add the following code to create a function that communicates with Mailchimp:

  javascript
    const functions = require('firebase-functions');
    const axios = require('axios');
    exports.subscribeToMailchimp = functions.https.onRequest(async (req, res) => {
      const email = req.body.email;
      const apiKey = 'YOUR_MAILCHIMP_API\_KEY';
      const listId = 'YOUR_MAILCHIMP_LIST\_ID';
      const server = 'YOUR_MAILCHIMP_SERVER\_PREFIX';
      const url = `https://${server}.api.mailchimp.com/3.0/lists/${listId}/members/`;
      const data = {
        email\_address: email,
        status: 'subscribed'
      };
      const options = {
        headers: {
          'Authorization': `apikey ${apiKey}`,
          'Content-Type': 'application/json'
        }
      };
      try {
        const response = await axios.post(url, data, options);
        res.status(200).send(response.data);
      } catch (error) {
        res.status(500).send(error.response.data);
      }
    });
  

• Deploy Functions: Deploy your function to Firebase:

  bash
    firebase deploy --only functions
  

Option B: Using External APIs

Alternatively, use a third-party service like Zapier or Integromat to connect FlutterFlow with Mailchimp through webhooks.

   

• API Setup in FlutterFlow:
  • Go to Settings in your FlutterFlow project.
  • Navigate to API Calls section.
  • Click on + Add API Call.
  • Set the Request URL to the URL of your deployed Firebase Cloud Function or webhook URL.
  • Choose POST for the request type.
  • Add parameters for the email address as an application/json content type.
• Define API Call in FlutterFlow:
  • In the API Calls page, add necessary parameters.
  • Map response fields (if necessary).

   

• Design Your Form:
  • Drag and drop a form and input fields for user data (like email) onto your screen.
  • Add a button to submit the form.
• Set Up On-Click Actions:
  • Select the submit button.
  • Go to properties panel and click on Actions.
  • Set up an action to call the API you configured earlier for the subscription.
  • Map the form input values to the API parameters.

   

• Run Your App: Start your FlutterFlow app and navigate to the subscription form you created.
• Submit Form: Enter a test email and submit the form.
• Verify Subscription: Check your Mailchimp audience to see if the email was successfully added.

 

This detailed guide should help you effectively integrate your FlutterFlow application with Mailchimp to manage your email subscribers.