Project: WhatsApp API Integration
Integrating WhatsApp API into a project is an excellent way to enable communication and interaction with users. Below is a step-by-step guide for a sample project using Meta’s WhatsApp Business API.
Sample Project: WhatsApp API Integration
Goal: Build a simple web app that sends automated WhatsApp messages to users.
1. Prerequisites
-
WhatsApp Business API Account:
- Register at Meta for Developers.
- Set up a WhatsApp Business account and configure your number.
- Obtain an API key (access token).
-
Development Environment:
- Backend: Use Node.js or Python (Flask/Django).
- Frontend: Use HTML/JS or React for the user interface.
- A Webhook URL to handle incoming messages and updates.
-
Testing Environment:
- Meta Sandbox for WhatsApp testing.
- Postman for API testing.
2. High-Level Architecture
- User enters a phone number and a message in the app.
- Backend validates inputs and sends the request to the WhatsApp API.
- The app shows the message delivery status.
3. Backend: Sending WhatsApp Messages
Using Node.js (Express.js)
Install Required Packages:
npm install express body-parser axios
Code:
server.js
const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');
const app = express();
app.use(bodyParser.json());
// Your WhatsApp API credentials
const ACCESS_TOKEN = 'YOUR_ACCESS_TOKEN';
const PHONE_ID = 'YOUR_PHONE_NUMBER_ID';
const API_URL = `https://graph.facebook.com/v17.0/${PHONE_ID}/messages`;
app.post('/send-message', async (req, res) => {
const { phone, message } = req.body;
try {
const response = await axios.post(
API_URL,
{
messaging_product: 'whatsapp',
to: phone,
type: 'text',
text: { body: message },
},
{
headers: {
'Authorization': `Bearer ${ACCESS_TOKEN}`,
'Content-Type': 'application/json',
},
}
);
res.status(200).json({ success: true, response: response.data });
} catch (error) {
res.status(500).json({ success: false, error: error.message });
}
});
app.listen(3000, () => console.log('Server running on port 3000'));
4. Frontend: User Input Form
Basic HTML Form
WhatsApp API Integration
Send a WhatsApp Message
const form = document.getElementById('messageForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const phone = document.getElementById('phone').value;
const message = document.getElementById('message').value;
try {
const response = await fetch('/send-message', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ phone, message }),
});
const result = await response.json();
document.getElementById('status').textContent = result.success
? 'Message sent successfully!'
: 'Failed to send message.';
} catch (error) {
document.getElementById('status').textContent = 'Error: ' + error.message;
}
});
5. Testing the Integration
- Run the App:
- Start the backend:
.node server.js
- Open the HTML page in your browser.
- Start the backend:
- Send a Message:
- Enter a valid phone number (with country code).
- Type a message and click Send.
- Verify Delivery:
- Check the phone number for the WhatsApp message.
- Debug any issues via console logs or API responses.
6. Deploying the Project
- Hosting Options:
- Backend: Heroku, Render, or AWS Lambda.
- Frontend: Netlify, Vercel, or your preferred static hosting provider.
- Webhook Configuration:
- Expose the backend using a tool like ngrok during testing.
- Set the webhook in the Meta Business settings for receiving incoming messages.
7. Expand the Project
- Features:
- Automate replies using webhooks.
- Handle media messages (e.g., images, documents).
- Add user authentication and history logs.
- Monetization:
- Charge businesses for automated messaging services.
No Comments have been Posted.