אחיה כהן

Posted on Mar 17 • Edited on Mar 31

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

#ai #opensource #automation #discuss

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/<a href="https://airtable.partnerlinks.io/achiya-automation">Airtable</a>)
                                         └─── 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

What This Actually Gets You

The real value here isn't some magic resolution percentage — it's the instant response. A customer messages at midnight and gets a helpful answer in 2 seconds instead of waiting until 9am. That changes everything for customer experience.

For routine questions (hours, pricing, "where are you located?"), the AI handles them without anyone lifting a finger. For complex issues, it collects context and routes to the right person — so when a human does step in, they already know what the customer needs.

The API cost is genuinely cheap — OpenAI's GPT-4o pricing works out to a fraction of a cent per message. The real cost is your time building and tuning the system.

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.

Over to You

At what daily message volume did you realize manual support was unsustainable? From what I've heard from other developers, the breaking point is usually somewhere around 40-50 messages/day — that's where response time starts creeping above 30 minutes and things slip through the cracks.

Two things I'm actively testing and would love input on:

GPT-4o vs Claude for Hebrew customer service — GPT handles Hebrew well but occasionally hallucinates product details. Anyone tried Claude's Hebrew capabilities in production?
Cost optimization — at high volume, API costs can add up. Has anyone implemented response caching or cheaper models for simple FAQ-type queries?

Drop your experience below — volume, model choice, what worked. Let's build a real benchmark. 👇

DEV Community