Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Articles

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

  1. 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).
  2. 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.
  3. Testing Environment:

    • Meta Sandbox for WhatsApp testing.
    • Postman for API testing.

2. High-Level Architecture

  1. User enters a phone number and a message in the app.
  2. Backend validates inputs and sends the request to the WhatsApp API.
  3. 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

  1. Run the App:
    • Start the backend:
      node server.js
      .
    • Open the HTML page in your browser.
  2. Send a Message:
    • Enter a valid phone number (with country code).
    • Type a message and click Send.
  3. 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.

 

caa January 25 2025 21 reads 0 comments Print

0 comments

Leave a Comment

Please Login to Post a Comment.
  • No Comments have been Posted.

Sign In
Not a member yet? Click here to register.
Forgot Password?
Users Online Now
Guests Online 3
Members Online 0

Total Members: 14
Newest Member: Frank_nKansas