How to Set Up WhatsApp Business API: Complete Step-by-Step Guide 2024

# Install Node.js dependencies
npm install express axios dotenv body-parser

# Or using Python
pip install flask requests python-dotenv

# Or using cURL for testing
curl --version

# .env file
WHATSAPP_TOKEN=your_permanent_token
VERIFY_TOKEN=your_verification_token
PHONE_NUMBER_ID=your_phone_number_id
VERSION=v18.0
WEBHOOK_URL=https://yourdomain.com/webhook

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

// Webhook verification
app.get('/webhook', (req, res) => {
  const verify_token = process.env.VERIFY_TOKEN;
  const mode = req.query['hub.mode'];
  const token = req.query['hub.verify_token'];
  const challenge = req.query['hub.challenge'];

  if (mode && token) {
    if (mode === 'subscribe' && token === verify_token) {
      console.log('Webhook verified successfully!');
      res.status(200).send(challenge);
    } else {
      res.status(403).send('Verification failed');
    }
  }
});

// Handle incoming messages
app.post('/webhook', (req, res) => {
  const body = req.body;

  if (body.object === 'whatsapp_business_account') {
    body.entry.forEach(entry => {
      const changes = entry.changes;
      changes.forEach(change => {
        if (change.field === 'messages') {
          const messages = change.value.messages;
          if (messages) {
            messages.forEach(message => {
              console.log('Received message:', message);
              // Process the message here
              handleIncomingMessage(message);
            });
          }
        }
      });
    });
    res.status(200).send('OK');
  } else {
    res.status(404).send('Not found');
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Webhook server running on port ${PORT}`);
});

const axios = require('axios');

async function sendWhatsAppMessage(to, message) {
  const url = `https://graph.facebook.com/v18.0/${process.env.PHONE_NUMBER_ID}/messages`;
  
  const data = {
    messaging_product: 'whatsapp',
    to: to,
    type: 'text',
    text: {
      body: message
    }
  };

  try {
    const response = await axios.post(url, data, {
      headers: {
        'Authorization': `Bearer ${process.env.WHATSAPP_TOKEN}`,
        'Content-Type': 'application/json'
      }
    });
    
    console.log('Message sent successfully:', response.data);
    return response.data;
  } catch (error) {
    console.error('Error sending message:', error.response?.data || error.message);
    throw error;
  }
}

// Example usage
sendWhatsAppMessage('1234567890', 'Hello from WhatsApp Business API!');

// Send image message
const imageMessage = {
  messaging_product: 'whatsapp',
  to: recipientNumber,
  type: 'image',
  image: {
    link: 'https://example.com/image.jpg',
    caption: 'Image caption'
  }
};

// Send template message
const templateMessage = {
  messaging_product: 'whatsapp',
  to: recipientNumber,
  type: 'template',
  template: {
    name: 'hello_world',
    language: {
      code: 'en_US'
    }
  }
};

// Send interactive button message
const buttonMessage = {
  messaging_product: 'whatsapp',
  to: recipientNumber,
  type: 'interactive',
  interactive: {
    type: 'button',
    body: {
      text: 'Please choose an option:'
    },
    action: {
      buttons: [
        {
          type: 'reply',
          reply: {
            id: 'option_1',
            title: 'Option 1'
          }
        },
        {
          type: 'reply',
          reply: {
            id: 'option_2',
            title: 'Option 2'
          }
        }
      ]
    }
  }
};

function handleIncomingMessage(message) {
  const from = message.from;
  const messageId = message.id;
  const timestamp = message.timestamp;

  // Handle different message types
  if (message.type === 'text') {
    const text = message.text.body;
    console.log(`Text message from ${from}: ${text}`);
    
    // Auto-reply example
    if (text.toLowerCase().includes('hello')) {
      sendWhatsAppMessage(from, 'Hello! How can I help you today?');
    }
  } else if (message.type === 'image') {
    console.log(`Image message from ${from}`);
    const imageId = message.image.id;
    // Process image here
  } else if (message.type === 'interactive') {
    const buttonReply = message.interactive.button_reply;
    console.log(`Button clicked: ${buttonReply.id}`);
    
    // Handle button responses
    switch(buttonReply.id) {
      case 'option_1':
        sendWhatsAppMessage(from, 'You selected Option 1');
        break;
      case 'option_2':
        sendWhatsAppMessage(from, 'You selected Option 2');
        break;
    }
  }
}

# Test webhook with ngrok for local development
ngrok http 3000

# Test API calls with curl
curl -X POST \
  https://graph.facebook.com/v18.0/YOUR_PHONE_NUMBER_ID/messages \
  -H 'Authorization: Bearer YOUR_ACCESS_TOKEN' \
  -H 'Content-Type: application/json' \
  -d '{
    "messaging_product": "whatsapp",
    "to": "1234567890",
    "type": "text",
    "text": {"body": "Test message"}
  }'