DEV Community

Cover image for Build a 24/7 Facebook Messenger AI Chatbot With n8n (Full Setup — No Code)
Grewup
Grewup

Posted on

Build a 24/7 Facebook Messenger AI Chatbot With n8n (Full Setup — No Code)

#ai #javascript #tutorial

What this builds

A Facebook Messenger chatbot that responds to every incoming message automatically, 24/7, using an AI agent connected to your Facebook Business Page via n8n. Customers message your page — they receive an intelligent, context-aware reply within 30 seconds, whether you are online or not.

Workflow JSON download: Available on the blog

Architecture

`Facebook Messenger message received
        ↓
n8n Webhook (GET + POST — allow multiple HTTP methods)
        ↓
IF node — hub.mode = "subscribe" AND hub.verify_token = [your token]
  ├── TRUE → Respond to Webhook with hub.challenge (verification)
  └── FALSE → Extract message from POST body
        ↓
AI Agent node (OpenRouter)
  — reads sender ID + message text
  — generates contextual reply
        ↓
HTTP Request → Facebook Graph API
  POST /me/messages → send reply to sender`
Enter fullscreen mode Exit fullscreen mode

Step 1 — Create your Facebook Developer App

Go to developers.facebook.com and create an account if you do not have one.
Click My Apps → Create App.

App configuration:

`App type:    Business
App name:    [Your Business] AI Assistant
Portfolio:   Select yours, or "No business portfolio selected"`
Enter fullscreen mode Exit fullscreen mode

Important: Do not overthink the naming. You can modify everything later.

Step 2 — Switch app to Live mode (most tutorials skip this)

Your app starts in Development mode — only you can test it. Real customers cannot interact with it until you switch to Live.
Before switching, you need a Privacy Policy URL. Facebook verifies this automatically.
Fastest method: go to termsfeed.com → generate a free privacy policy → copy the URL.
In your app settings:

Find "Privacy Policy URL" field → paste your URL
Toggle the mode switch at the top from Development to Live

Without this step, your chatbot will only work when you are testing it yourself. All live customer interactions will fail silently.

Step 3 — Create the n8n webhook

Open your n8n dashboard → New Workflow → add a Webhook trigger node.
Critical settings in the webhook configuration:

`Allow Multiple HTTP Methods: ON  ← most people miss this
HTTP Method:                 GET and POST both selected
Respond:                     Using 'Respond to Webhook' Node`
Enter fullscreen mode Exit fullscreen mode

The "Allow Multiple HTTP Methods" toggle is the setting that allows Facebook's verification handshake (GET request) and actual message delivery (POST request) to both hit the same webhook endpoint. Without this, you need two separate webhooks — and the verification fails.
Copy the Production URL from the webhook node. This is what you paste into Facebook next.

Step 4 — Add Messenger to your Facebook App

Back in your Facebook Developer dashboard:

Find the Products section → click Add Product
Find Messenger → click Set up

Inside the Messenger configuration:
Webhook settings:

`Callback URL:   [paste your n8n Production URL]
Verify Token:   AI-chatbot  (or any string you choose — you will need this exactly in Step 5)`
Enter fullscreen mode Exit fullscreen mode

Click Verify and Save. Facebook sends a GET request to your webhook to confirm it is reachable.
Subscribe to message events:

`messages:        ON
message_reads:   ON`
Enter fullscreen mode Exit fullscreen mode

Generate a Page Access Token:

Select your Business Page from the dropdown
Click Generate Token
Copy the token immediately — it only displays once
Store it securely — you need it in Step 7 to send messages back

Subscribe your page to the webhook by clicking Add Subscriptions next to your page name.

Step 5 — The verification handshake (where 90% of people get stuck)

Facebook verifies your webhook by sending a GET request with three query parameters:

`hub.mode          = "subscribe"
hub.verify_token  = [the token you set in Facebook]
hub.challenge     = [a random string Facebook wants echoed back]`
Enter fullscreen mode Exit fullscreen mode

Your n8n workflow must respond with the exact value of hub.challenge. If it does not, Facebook rejects the webhook and nothing works.
Add an IF node after the webhook:

`Condition 1: {{ $json.query['hub.mode'] }}         equals  subscribe
Condition 2: {{ $json.query['hub.verify_token'] }}  equals  AI-chatbot
Both conditions must be TRUE`
Enter fullscreen mode Exit fullscreen mode

On the TRUE branch — add a "Respond to Webhook" node:

`Respond with:  Text
Response body: [switch from Fixed to Expression]
Expression:    {{ $json.query['hub.challenge'] }}`
Enter fullscreen mode Exit fullscreen mode

This echoes the challenge string back to Facebook, completing verification. Until this works, nothing else in the workflow can run.
Test it: Save the workflow, click Execute Workflow, then go back to Facebook and click Verify and Save on the webhook configuration. If verification fails, check that your IF conditions exactly match the parameters Facebook sends.

Step 6 — Extract the message from POST requests

When a customer sends a message, Facebook sends a POST request to your webhook with a JSON body. The message is nested inside:

`// Facebook Messenger webhook POST body structure
{
  "entry": [{
    "messaging": [{
      "sender": { "id": "SENDER_PAGE_SCOPED_ID" },
      "recipient": { "id": "YOUR_PAGE_ID" },
      "timestamp": 1234567890,
      "message": {
        "mid": "message_id",
        "text": "Hello, is this available?"
      }
    }]
  }]
}`
Enter fullscreen mode Exit fullscreen mode

On the FALSE branch of your IF node (POST requests that are not verification), add a Set Fields node to extract what you need:

sender_id:    {{ $json.body.entry[0].messaging[0].sender.id }}
message_text: {{ $json.body.entry[0].messaging[0].message.text }}
Enter fullscreen mode Exit fullscreen mode

These two fields feed into the AI agent.

Step 7 — AI Agent node

Add an AI Agent node. Connect OpenRouter credentials.

`Input:        {{ $json.message_text }}`
Enter fullscreen mode Exit fullscreen mode

System prompt — paste this:

`You are a helpful customer service assistant for [Your Business Name].

You respond to Facebook Messenger messages from potential customers 
and existing clients.

Your tone: friendly, professional, helpful. Never robotic.

Key information about our business:
[Add: what you sell, your pricing if public, your hours, 
your location, your main services — whatever customers typically ask about]

If you cannot answer a specific question, tell the customer:
"I'll make sure [Name] gets back to you on this personally — 
usually within a few hours during business hours."

Never make up information you are not sure about.
Keep replies concise — 2-4 sentences maximum.`
Enter fullscreen mode Exit fullscreen mode

Customise the system prompt for your specific business. The more specific the business information, the more useful the responses. Add your FAQs, your pricing tier (if public), your response time commitments, and any questions you regularly receive.

Step 8 — Send the reply via Facebook Graph API

`

`json
Add an HTTP Request node.

Method: POST
URL: https://graph.facebook.com/v18.0/me/messages
Headers:
Authorization: Bearer [YOUR_PAGE_ACCESS_TOKEN]
Content-Type: application/json

Body (JSON):
{
"recipient": {
"id": "{{ $('Set Fields').first().json.sender_id }}"
},
"message": {
"text": "{{ $json.output }}"
}
}

`
`

Replace [YOUR_PAGE_ACCESS_TOKEN] with the token you generated in Step 4.
The sender_id targets the reply to the specific person who sent the message. The $json.output contains the AI agent's response.

Step 9 — Activate and test

Toggle the workflow Active (top right — turns blue).
Open your Facebook Business Page. Send a message to your own page from a personal Facebook account. Wait 15–30 seconds. You should receive an AI-generated reply.
If no reply arrives, check the Executions tab in n8n. Each execution log shows exactly which node completed and where the flow stopped.

What breaks

Facebook verification fails repeatedly: Your IF node conditions are not matching Facebook's query parameters exactly. The parameters are case-sensitive: hub.mode and hub.verify_token with dots, not underscores. Also check that your Respond to Webhook node is on the TRUE branch, not the FALSE branch.

Messages arrive but no reply is sent: The Page Access Token has expired or is invalid. Facebook page tokens can expire — regenerate it from the Facebook Developer dashboard and update the HTTP Request node. Also confirm the token has pages_messaging permission.

AI Agent responds but Graph API returns 403: Your app does not have the pages_messaging permission enabled. Go to App Settings → Permissions and Features → search pages_messaging → Request permission.
Workflow triggers on your own page posts, not just messages: You subscribed to more events than needed. In Facebook Messenger webhook settings, ensure only messages and message_reads are enabled. Disable feed, comments, and other event types.

n8n receives POST but entry[0].messaging is undefined: Facebook occasionally sends other webhook event types (delivery receipts, echo messages). Add a second IF condition before the AI agent: check that $json.body.entry[0].messaging[0].message.text exists and is not null.

Running cost

OpenRouter with GPT-4 mini: approximately $0.001 per message response. 1,000 customer messages per month costs about $1.00 in API credits.
n8n: free self-hosted or free cloud trial.
Facebook API: free.

The entire chatbot infrastructure costs under $7/month for most small businesses — significantly less than a single missed client.
Workflow JSON at elevoras.com. Import directly into n8n and update the Page Access Token and verify token to your own values.

Building a variation with memory (tracking conversation history per user)? Drop it in the comments — that is the natural next step and happy to share the memory node setup.

Top comments (0)