Lovable and Mailchimp integration: Step-by-Step Guide 2025

 

Setting Up Mailchimp Dependencies

 

• Open your package.json file in the root directory of your Lovable project.
• Locate the "dependencies" section and add the dependency for Mailchimp Marketing as shown below. Lovable will automatically install dependencies from the updated package.json file.

"dependencies": {
  "mailchimp-marketing": "^3.0.74",
  // ... your other dependencies
}
  

• Save the changes.

 

Creating the Mailchimp Service File

 

• In your src folder, create a new file named mailchimpService.ts.
• This file will handle interactions with the Mailchimp API. Paste the following code snippet into the mailchimpService.ts file:

import mailchimp from 'mailchimp-marketing';

mailchimp.setConfig({
  apiKey: 'YOURAPIKEY', // Replace with your actual Mailchimp API key
  server: 'YOURSERVERPREFIX' // Replace with your Mailchimp server prefix (e.g., 'us1')
});
export interface Subscriber {
  email: string;
  firstName?: string;
  lastName?: string;
}
export async function addSubscriber(listId: string, subscriber: Subscriber) {
  try {
    const response = await mailchimp.lists.addListMember(listId, {
      email_address: subscriber.email,
      status: 'subscribed',
      merge_fields: {
        FNAME: subscriber.firstName || '',
        LNAME: subscriber.lastName || ''
      }
    });
    return response;
  } catch (error) {
    throw error;
  }
}
  



• Remember to replace YOURAPIKEY and YOURSERVERPREFIX with your actual Mailchimp credentials.

 

Creating the Subscription Handler

 

• Within the src directory, create a new file named subscriptionHandler.ts.
• This file will be responsible for handling the subscription requests from users. Insert the following code snippet into subscriptionHandler.ts:

import { addSubscriber, Subscriber } from './mailchimpService';

const MAILCHIMPLISTID = 'YOURLISTID'; // Replace with your Mailchimp list ID
export async function subscribeUser(req: any, res: any) {
  const { email, firstName, lastName } = req.body;
  if (!email) {
    res.status(400).send({ error: 'Email is required' });
    return;
  }
  const subscriber: Subscriber = { email, firstName, lastName };
  try {
    const response = await addSubscriber(MAILCHIMPLISTID, subscriber);
    res.status(200).send(response);
  } catch (error) {
    res.status(500).send({ error: 'Subscription failed', details: error });
  }
}
  



• Update YOURLISTID with your Mailchimp audience (list) ID.

 

Integrating the Subscription Endpoint into Your Application

 

• Locate your main server file (e.g., server.ts or app.ts) in the src folder.
• At the top of this file, import the subscription handler with the following code:

import { subscribeUser } from './subscriptionHandler';
  

• Add an endpoint to handle POST requests for subscriptions. If you are using Express.js, insert the code snippet below into your server file:

app.post('/subscribe', subscribeUser);
  

• This endpoint will receive subscription requests from the frontend. Ensure your frontend sends a POST request to /subscribe with a JSON body containing at least the email field.

 

Testing Your Mailchimp Integration

 

• Deploy your changes via Lovable's deployment process.
• Use your frontend form or an API testing tool to send a POST request to /subscribe with valid subscriber data (e.g., email, firstName, and lastName).
• Check the response and application logs to confirm that the subscriber is successfully added to your Mailchimp list.