אחיה כהן

Posted on Mar 17

How to Build a WhatsApp AI Customer Service Bot with n8n (No Code, Free & Open Source)

#ai #opensource #automation #tutorial

Most WhatsApp bot tutorials show you a toy "hello world" chatbot. This guide builds a production-ready AI customer service bot that actually handles real customer conversations — with CRM integration, conversation memory, and human handoff.

Stack: n8n (free, open-source) + WhatsApp Cloud API (free) + OpenAI GPT-4o

Time to build: ~2 hours | Monthly cost: ~$5-15 (just OpenAI API calls)

Architecture Overview

Customer → WhatsApp → Meta Cloud API → Webhook → n8n
                                                    ↓
                                              AI Agent (GPT-4o)
                                                    ↓
                                         ┌─── Knowledge Base
                                         ├─── CRM (Supabase/Airtable)
                                         └─── Human Handoff (Slack/Email)
                                                    ↓
                                              n8n → WhatsApp API → Customer

Step 1: Set Up WhatsApp Cloud API (Free)

Go to developers.facebook.com → Create App → Business type
Add WhatsApp product
Get your Phone Number ID and Access Token from the WhatsApp > API Setup page
Set up a webhook URL (we'll create this in n8n next)

Important: Generate a permanent token via System Users in Business Settings. The temporary token expires in 24 hours.

Step 2: Create the n8n Webhook

In n8n, create a new workflow:

Add a Webhook node → POST method
Copy the webhook URL
Back in Meta Developer Console → WhatsApp > Configuration → Set the webhook URL
Subscribe to messages webhook field
Set the verify token to match your n8n webhook

Tip: n8n's webhook node handles the Meta verification challenge automatically.

Step 3: Parse Incoming Messages

Add a Code node after the webhook to extract the message:

const body = $input.first().json.body;
const entry = body.entry?.[0];
const change = entry?.changes?.[0];
const value = change?.value;

// Skip status updates (only process actual messages)
if (!value.messages) {
  return [{ json: { skip: true } }];
}

const message = value.messages[0];
const contact = value.contacts[0];

return [{
  json: {
    from: message.from,
    name: contact.profile.name,
    text: message.text?.body || '',
    type: message.type,
    messageId: message.id,
    timestamp: message.timestamp,
    phoneNumberId: value.metadata.phone_number_id
  }
}];

Step 4: Build the AI Agent

This is where it gets powerful. Add an AI Agent node with:

System Prompt:

You are a customer service assistant for [Business Name].
You help customers with: pricing, availability, booking appointments, and general questions.

Rules:
- Be friendly but concise (WhatsApp messages should be short)
- If you don't know the answer, say so and offer to connect them with a human
- Never make up information about pricing or availability
- Use the knowledge base tool to look up accurate information
- If the customer seems frustrated, trigger human handoff

Business hours: Sun-Thu 9:00-18:00, Fri 9:00-13:00
Location: [Address]

Tools to connect:

Knowledge Base: A vector store with your FAQ, pricing, service descriptions
CRM Lookup: Check if customer exists, get their history
Book Appointment: Create booking in your calendar system
Human Handoff: Send alert to Slack/email when bot can't handle the request

Step 5: Send Response via WhatsApp API

Add an HTTP Request node:

Method: POST
URL: https://graph.facebook.com/v21.0/{{$json.phoneNumberId}}/messages
Headers: Authorization: Bearer YOUR_TOKEN
Body:

{
  "messaging_product": "whatsapp",
  "to": "{{$json.from}}",
  "type": "text",
  "text": {
    "body": "{{$json.response}}"
  }
}

Step 6: Add Conversation Memory

Without memory, every message is treated independently. Add a Supabase or Redis node to:

On incoming message: Fetch last 10 messages from this phone number
Pass conversation history to the AI Agent as context
After AI responds: Save both the customer message and AI response

This gives your bot context awareness — it remembers what the customer asked 5 messages ago.

Step 7: Handle Edge Cases

Voice messages: Add a branch that sends voice messages to OpenAI Whisper for transcription, then feeds the text to the AI Agent.

Images: If a customer sends a product photo, use GPT-4o Vision to analyze it and respond accordingly.

24-hour window: Meta requires pre-approved templates for messages sent after 24 hours of customer inactivity. Add a check node that routes to template messages when needed.

Rate limiting: Add a 1-second delay between responses to avoid Meta's rate limits.

Production Checklist

[ ] Error handling on every node (don't leave customers hanging)
[ ] Logging all conversations (compliance + improvement)
[ ] Human handoff escalation path
[ ] Message deduplication (Meta sometimes sends webhooks twice)
[ ] Graceful fallback when AI service is down
[ ] Template messages approved for outbound communication
[ ] Phone number verified and display name set

Real-World Results

I've deployed this exact architecture for businesses in Israel handling 200+ conversations/day:

Response time: 2-3 seconds (vs 4-8 hours manual)
Resolution rate: 73% of queries handled without human intervention
Customer satisfaction: Higher — because every message gets an instant response
Cost: ~$0.02 per conversation (GPT-4o API costs)

What's Next

Once your basic bot is running, consider adding:

Proactive messaging: Order status updates, appointment reminders
Analytics dashboard: Track common questions, resolution rates, peak hours
Multi-language support: GPT handles translation automatically
Payment integration: Accept payments directly in WhatsApp

The full n8n workflow template is available on n8n.io community workflows.

If you're building WhatsApp automation, I write regularly about real-world patterns and architectures at achiya-automation.com.

Questions? Drop them in the comments — happy to help debug your setup.

DEV Community