Skip to content
Related Articles

Related Articles

Create Newsletter app using MailChimp and NodeJS

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Jun, 2022

Nowadays, every business uses email marketing to promote their business and send regular updates to their users via email. Maybe, you are also subscribers of some websites such as GeeksforGeeks and many more. It’s simple if you subscribe, you will get regular email from their side, and if you unsubscribe, you will stop receiving emails. 

Have you thought about how they can send emails to subscribed users with a single click? MailChimp is the best tool for email marketing. Also, it allows you to create different lists to manage your audiences and send bulk emails. However, only sending emails is not adequate. It should have some attractive templates and text that MailChimp provides, and you pick default templates for your email directly. 

In this tutorial, we will create a simple newsletter app using MailChimp and NodeJS. We will learn to build an audience list and store the users to MailChimp via NodeJS When users subscribe to our app. 

Pre-requisite: 

Create MailChimp Free Account:

Now, users need to follow the below steps to create MailChimp free account and get an API key. 

Step 1: Go to MailChimp.com and signup for free. Also, set up the profile of your account.

Step 2:  Now, to get the API key, From the bottom left of your screen, Go to the Profile >> Extras >> API Key >> Create API Key. Furthermore, it would help if you store your API key. We will use it later in our NodeJS app.

 

Step 3: Next, we need to create an audience list. Go to https://us14.admin.mailchimp.com/lists/, and click on the Create Audience. Fill in the required details and see your audience on the audience dashboard.

 

Step 4: Now, we need to get the audience list id. Go to the audience settings -> list id. Store the list id to use it in the NodeJs app.

 

Now, we are ready to create the NodeJS app.

Create NodeJS APP:

To create the new NodeJS App, go to your project directory from the terminal and enter the below command to it.

npm init -y

Next, enter the below command in the same directory to install the required npm packages.

npm i body-parser express https nodemon

Project Structure: Your project directory should look like the below image.

 

Example: This example will demonstrate the creation Newsletter app using MailChimp and NodeJS

In this file, we will add the basic code of the express app to send the data to your MailChimp via API key.

App.js

// import required packages
const express= require("express");
const https= require("https");
const bodyparser= require("body-parser");

const app= express();
app.use(express.static("public"));

app.use(bodyparser.urlencoded({extended:true}));

// On the home route, send signup html template
app.get("/",function(req,res){
  res.sendFile(__dirname+"/signup.html");
});

// Manage post request on home route and
// Send data to the MailChimp account via API 
app.post("/",function(req,res){
  var firstName=req.body.Fname;
  var email=req.body.Email;
  var password=req.body.password;

  var data={
    members:[{
      email_address: email,
      status: "subscribed",
      merge_fields:{
        FNAME: firstName,
        LNAME: password
      }
    }]
  }

// Converting string data to JSON data
const jsonData= JSON.stringify(data);
const url="https://us14.api.mailchimp.com/3.0/lists/f4f5ad20f7";
const options={
  method:"POST",
  auth:"201951173:acfa4fffd113041454c6d953a71fa3e5-us14"
}

// On success send users to success, otherwise on failure template 
const request=https.request(url,options,function(response){
  if(response.statusCode===200){
    res.sendFile(__dirname+"/success.html");
  }else{
    res.sendFile(__dirname+"/failure.html");
  }
  response.on("data",function(data){
    console.log(JSON.parse(data));
  });
});
  request.write(jsonData);
  request.end();
});

// Failure route
app.post("/failure",function(req,res){
   res.redirect("/");
})

app.listen(8000,function(){
  console.log("server is running on port 8000.");
})

Now, create a new file named signup.html file. 

In this file, we will add a simple form to get the user’s data and send it to the app.js file.

SignUp.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

    <title>Newslatter-Signup</title>

    <link rel="canonical" href=
"https://getbootstrap.com/docs/4.0/examples/sign-in/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
          crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet">
  </head>

  <body class="text-center">
    <!--form to get users data-->
    <form action="/" class="form-signin" method="post">
      <h1 class="h3 mb-3 font-weight-normal">signup to my website</h1>

      <input type="email" name="Email" id="inputEmail" 
             class="form-control" placeholder="Email address" 
             required autofocus>
      <input type="text" name="Fname" id="inputname" 
             class="form-control" placeholder="Name" 
             required>
      <input type="password" name="password" id="inputPassword" 
             class="form-control" placeholder="Password" 
             required>
      
      <!--On submit we are handling form data into app.js file-->
      <button class="btn btn-lg btn-primary btn-block" 
              type="submit">Sign up</button>
    </form>
  </body>
</html>

Next, create a new file success.html and add the given code.

When a user subscribes to our newsletter app successfully, the user will redirect to the success route.

Success.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>successfully</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 
          integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
          crossorigin="anonymous">
  </head>
  <body>
    <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Awesom</h1>
    <p class="lead">You are successful to signup in newslatter website, 
      please look forward.</p>

  </div>
</div>
  </body>
</html>

When a user gets an error while subscribing to our newsletter app, the user will redirect to the failure route.

Failure.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>Failure</title>
    <link rel="stylesheet" href=
 "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" 
          integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
          crossorigin="anonymous">
</head>

<body>
   <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Uh oh!</h1>
      <p class="lead">Contact the developer</p>

      <form class="" action="/failure" method="post">
        <button class="btn btn-lg " type="submit" 
                name="button">Try again</button>
      </form>
    </div>
   </div>
</body>
  
</html>

Now, we need to add basic styles to our app. In the public folder, you have a style.css file. Add the below code to the style.css file.

We will add the basic styling for our HTML templates in this file.

Style.css

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: lightgrey;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Step to run the application: To run the project on your terminal, go to the project directory and enter the below command.

nodemon app.js

Output: You will see that the app is running successfully on localhost:8000.

 

Also, in MailChimp, you can go to the Audience >> All contacts, and you will see the list of all added contacts.

 


My Personal Notes arrow_drop_up
Previous
Next
Recommended Articles
Page :
Article Contributed By :
Vote for difficulty

Start Your Coding Journey Now!