Dmitry Vinnik

By Dmitry Vinnik

Originally posted here.

WhatsApp is one of the world's most popular mobile messenger apps, with nearly two billion monthly active users. Businesses can leverage the WhatsApp Business Platform to communicate closely with their audiences, help boost sales, and transform the customer experience.

This article describes how the Cloud API, hosted by Meta, Meta's integration of the WhatsApp Business Platform, can be used in a Node.js application to provide the capability to send and manage WhatsApp messages sent and received via the Cloud API.

Let's dive in and explore how to create a Node.js web app powered with WhatsApp messaging from scratch to send a simple text-based message and then using message templates for more detailed messages. If you'd like a preview of where you'll end up, you can download the complete application code.

Prerequisites

To send and receive messages using a test phone number, follow the Set up Developer Assets and Platform Access tutorial, making sure you complete the steps below.

First, you'll need to download and install Node.js and npm on your machine, if you don't have it installed already.

Next, Register for a free account as a developer with Meta for Developers.

Enable two-factor authentication for your account.

Create a Meta App. The App ID and the App Secret will be used later in this tutorial.

Connect your Meta App with the WhatsApp product.

Then, associate your app with a Business Manager account.

On the App Dashboard, open the WhatsApp > Get Started menu and configure a recipient phone number. Your app will need it as a recipient for the WhatsApp messages. This number will be used later on.

Create a system user for your Business Account. For a more detailed walkthrough, see our Business Manager documentation.

On the System Users page, generate a new token for your new system user. Assign your app all the available permissions. This token will be used later in this article.

On the System Users page, configure the assets to your System User, assigning your app with full control. Don't forget to click the Save Changes button.

The App We're Building

This small sample application will work as an online movie ticket purchase and booking service. The application will use the API to provide the user with an engaging and more personalized experience than email communication. When the users log in, they're greeted by a WhatsApp message. Then, when they buy a movie ticket, they receive a message confirming the purchase.

Creating a Minimal App with Node.js and Express

To get started, you need to get a new Node.js project up and running. We'll use EJS as a lightweight JavaScript templating engine and Express, the minimalist web framework for Node.js.

Open terminal/command prompt and create a folder for your project to live in. Then execute the npm init command from the root of your project folder to initialize your project to use npm packages:

npm init

Create a starter application using express-generator:

npx express-generator -v ejs

Next, run the following command to install the packages and resolve their dependencies:

npm install

Finally, execute the following command to start the server and host your app locally:

npm start

Now visit http://localhost:3000, and you'll see the homepage of your Node + Express starter application:

Creating the Sample Login Page

To start your movie ticket application, you'll create a sample login form that will work as your homepage. You'll need to call the render function of the Response object to render a view from a separate HTML file.

Open the routes\index.js file and replace its code with the following contents:

var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Login' }); }); module.exports = router;

Next, open the views\index.ejs file and add the HTML content below. Here, you're creating a sample form login that comes with a stand-in login and password, so that you don't need to provide those to use the application.

For your web app front end, use Bootstrap. This popular library will help you build a consistent, lightweight UI that comes with responsive styling, allowing you to easily run your app across devices with simplified CSS rules.

Then, restart the app again to see the new login page, by using CTRL+C and the command:

npm start

Sending Text Messages with Node.js and WhatsApp Business

Your Node.js application will need to use specific data from your Meta developer account created in the beginning of this article. For the convenience of having all of your configuration in one place, and not scattered throughout code during development, place it in a file.

Create a .env file at the project root with the following configurations:

APPID=<<YOUR-WHATSAPP-BUSINESS-APPID>> APPSECRET=<<YOUR-WHATSAPP-BUSINESS-APPSECRET>> RECIPIENTWAID=<> VERSION=v13.0 PHONENUMBERID=<> ACCESSTOKEN=<>

Note: Replace each of the above settings with data from your WhatsApp Business account Dashboard.

Your login form action tells the app to POST to the /welcome route. So, you'll need a new router to:

• Handle the "welcome" HTTP POST request.
• Obtain the configuration needed for the welcome message.
• Send a welcome message via the API.
• Redirect the app to the homepage once the message is sent

Next, create a new routes\welcome.js file with the following code:

var express = require('express'); var router = express.Router(); var bodyParser = require('body-parser'); require('dotenv').config() const { sendMessage, getTextMessageInput } = require("../messageHelper"); router.use(bodyParser.json()); router.post('/', function(req, res, next) { var data = getTextMessageInput(process.env.RECIPIENT_WAID, 'Welcome to the Movie Ticket Demo App for Node.js!'); sendMessage(data) .then(function (response) { res.redirect('/); res.sendStatus(200); return; }) .catch(function (error) { console.log(error); console.log(error.response.data); res.sendStatus(500); return; }); }); module.exports = router;

Next, you'll need the function to encapsulate the code that sends basic text messages via the API. Create a new messageHelper.js file at the project root with the following code:

var axios = require('axios'); function sendMessage(data) { var config = { method: 'post', url: https://graph.facebook.com/${process.env.VERSION}/${process.env.PHONE_NUMBER_ID}/messages, headers: { 'Authorization': Bearer ${process.env.ACCESS_TOKEN}, 'Content-Type': 'application/json' }, data: data }; return axios(config) } function getTextMessageInput(recipient, text) { return JSON.stringify({ "messagingproduct": "whatsapp", "previewurl": false, "recipient_type": "individual", "to": recipient, "type": "text", "text": { "body": text } }); } module.exports = { sendMessage: sendMessage, getTextMessageInput: getTextMessageInput };

The code above makes an HTTP POST request to the /messages endpoint on the Meta Graph API at graph.facebook.com, passing:

• The Cloud API version you're working with
• The test phone number that will receive the message (you've already configured that)
• The access token you generated for your System User

Also, note that the getTextMessageInput function returns a specific data structure required for sending basic text messages.

Moving on, open the app.js file and create a router variable for the /welcome route:

var welcomeRouter = require('./routes/welcome');

Then enable the app to use the new welcomeRouter variable:

app.use('/welcome', welcomeRouter);

Finally, restart the app again to see the new login page, by using CTRL+C and the command:

> npm start

When the login screen loads, click the Login button. You'll see the WhatsApp notification popping up on your screen:

Click the notification that appears to open WhatsApp and view the basic text message sent by the Node.js application:

So far, you've sent simple messages using WhatsApp. Next, you'll send more complex messages using templates.

Creating the Movie Ticket Catalog Page

The next step is to create a catalog of available movies and their details so that online customers can buy tickets. This data will be stored in a separate file.

You now need a new route for users to access the movie catalog page.

Create a new file at \routes\catalog.js with the following content to render the catalog page with the movies data:

var express = require('express'); const { movies } = require("../public/javascripts/movies"); var router = express.Router(); /* GET home page. */ router.post('/', function(req, res, next) { res.render('catalog', { title: 'Movie Ticket Demo for Node.js', movies: movies }); }); router.get('/', function(req, res, next) { res.render('catalog', { title: 'Movie Ticket Demo for Node.js', movies: movies }); }); module.exports = router;

Now create a new file at \views\catalog.ejs with the following content, which renders the movie data using the EJS template syntax.

Now you have to make the welcome endpoint redirect to the catalog page once the welcome message is sent to the user. Open the routes\welcome.js file and modify the redirect to the /catalog route :

sendMessage(data) .then(function (response) { res.redirect('/catalog');

Next, open the app.js file and create a router variable for the \catalog route:

var catalogRouter = require('./routes/catalog');

Then enable the app to use the new catalogRouter variable:

app.use('/catalog', catalogRouter);

Finally, restart the app again to see the new login page, by using CTRL+C and the command:

> npm start

Now click the Login button. This will send your WhatsApp number a welcome message and redirect you to the catalog view:

Note that there's a button to buy the ticket for each movie displayed on the screen above. Next, you need to configure the application to process the ticket purchase.

Sending Templated Messages with Node.js and WhatsApp Business

A message template is required to start a business-initiated conversation. These conversations can be customer care messages or appointment reminders, payment or shipping updates, alerts, and more.

Create new router code at routes\buyTicket.js:

var express = require('express'); var router = express.Router(); var bodyParser = require('body-parser'); require('dotenv').config() var { movies } = require('../public/javascripts/movies'); const { sendMessage, getTemplatedMessageInput } = require("../messageHelper"); router.use(bodyParser.json()); router.post('/', function(req, res, next) { var movie = movies.filter((v,i) => v.id == req.body.id)[0]; var data = getTemplatedMessageInput(process.env.RECIPIENT_WAID, movie, req.body.seats); sendMessage(data) .then(function (response) { res.redirect('/catalog'); res.sendStatus(200); return; }) .catch(function (error) { console.log(error); res.sendStatus(500); return; }); }); module.exports = router;

The following code to send the ticket purchase message is similar to what you did for the welcome message. Open the messageHelper.js file and add the getTemplatedMessageInput function.

Note that we are using the samplemovieticket_confirmation template above, where you provided the movie thumbnail, the movie title, the date/time, the location, and the number of the seats. You can experiment with other available templates or create new ones, by visiting the Message Templates page.

Now open the app.js file and create a router variable for the buyTicket route:

var buyTicketRouter = require('./routes/buyTicket);

Then make the app use the new welcomeRouter:

app.use('/buyTicket', buyTicketRouter');

Finally, restart the app again to see the new login page, by using CTRL+C and the command:

> npm start

From the ticket screen, select three seats under a movie card:

Then click the Buy button. This will cause your app to send a template message to your test phone number via

WhatsApp:

Now, open WhatsApp to see the template message.

That's it!

As you can see, sending messages from Node.js code is straightforward. However, here are some tips and best practices for integrating WhatsApp into applications:

• Even if you're automating your app messages, make sure that communication with customers doesn't feel robotic. People expect a more personal experience, so try sending personalized messages.
• Explore a more relaxed and informal tone.
• Keep your text messages clear and to the point.
• When using templates, provide rich context information by using links to documents, videos, or images such as those above, where we depicted the movies related to the tickets.

Conclusion

This article demonstrated how to add messaging capability to a Node.js app by integrating it with a WhatsApp Business account.

First, you created a simple Node.js application from scratch. Then, you added a sample login page and configured the application to send basic welcome messages to users via the API. Finally, you added a catalog page and configured it to send template messages with movie ticket details to customers.

But this is only the tip of the iceberg. You can explore our documentation to see how you can get the most out of the Cloud API.