Whatsapp Business API

Log in to Meta Business Manager at business.facebook.com. If you don't have a WhatsApp Business Account (WABA), go to Business Settings → Accounts → WhatsApp Accounts and add one. You'll need to verify a phone number — this can be a real business number or a temporary test number from Meta's developer sandbox. Once your WABA is set up, go to Meta Developers (developers.facebook.com), find your app, and navigate to WhatsApp → API Setup. Here you'll see your Test Phone Number (for development) and the Phone Number ID — copy it. For production, you'll see your verified business phone number's ID instead. To get a permanent access token: go to Business Settings → System Users → Create a System User, assign it a role (Admin), and then generate a token with the `whatsapp_business_messaging` and `whatsapp_business_management` permissions. Copy this token — this is the long-lived credential that goes into your Cloud Function's environment config. For testing purposes, Meta also provides a temporary 24-hour access token in the API Setup page — don't use this for production. Your test sandbox pre-approves a WhatsApp number to send to: add up to 5 test phone numbers in the 'To' section of the API Setup sandbox.

WhatsApp's policy restricts business-initiated messages to pre-approved templates outside the 24-hour customer service window. Go to Meta Business Manager → Accounts → WhatsApp Accounts → your account → Manage → Message Templates. Click Create Template. Choose a category (Marketing, Utility, or Authentication), select a language, and give it a name (lowercase, underscores only, e.g., `order_confirmation`). Build the template body using double curly braces for variables: 'Your order #{{1}} has been confirmed. Delivery expected: {{2}}.' Add a header (optional) and footer (optional). Submit for review. Meta's review typically takes 24-72 hours for standard templates. During development, use the pre-approved 'hello_world' template that is available in every new WhatsApp Business Account — it sends 'Hello World! This is an example message from Fable.' with no variable substitution. Once approved, your custom template appears with status 'Approved' and you can send it. The template name and language code you'll use in the API body are shown on this page — copy them.

In the Firebase console for your project, navigate to Functions and click Get Started (or write the function in your local project and deploy via CLI). The function below accepts a JSON body with `to` (phone number WITHOUT leading +, per WhatsApp Cloud API convention), `templateName`, `languageCode`, and an array of `components` for template variable substitution. It stores the System User access token and Phone Number ID as environment configuration variables — never hard-coded. The function calls the WhatsApp Cloud API at `https://graph.facebook.com/v19.0/{PHONE_NUMBER_ID}/messages` with a Bearer Authorization header. CORS headers are included for FlutterFlow web builds. An important WhatsApp-specific convention: the `to` phone number uses E.164 format BUT without the leading + sign (e.g., `14155551234` not `+14155551234`). This differs from Twilio's convention. Sending with a leading `+` causes delivery failures. After deployment, set the environment config with the Firebase CLI commands shown in the tip, then copy the deployed function URL.

1// Firebase Cloud Function: functions/index.js
2const functions = require('firebase-functions');
3const https = require('https');
4
5exports.sendWhatsApp = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  res.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
8  res.set('Access-Control-Allow-Headers', 'Content-Type');
9
10  if (req.method === 'OPTIONS') return res.status(204).send('');
11
12  const ACCESS_TOKEN = functions.config().whatsapp.token;
13  const PHONE_NUMBER_ID = functions.config().whatsapp.phone_number_id;
14
15  const { to, templateName, languageCode, components } = req.body;
16
17  if (!to || !templateName || !languageCode) {
18    return res.status(400).json({ error: 'to, templateName, and languageCode are required' });
19  }
20
21  const payload = JSON.stringify({
22    messaging_product: 'whatsapp',
23    to: to,  // E.164 WITHOUT leading +
24    type: 'template',
25    template: {
26      name: templateName,
27      language: { code: languageCode },
28      components: components || []
29    }
30  });
31
32  const options = {
33    hostname: 'graph.facebook.com',
34    path: `/v19.0/${PHONE_NUMBER_ID}/messages`,
35    method: 'POST',
36    headers: {
37      'Authorization': `Bearer ${ACCESS_TOKEN}`,
38      'Content-Type': 'application/json',
39      'Content-Length': Buffer.byteLength(payload)
40    }
41  };
42
43  return new Promise((resolve) => {
44    const request = https.request(options, (response) => {
45      let data = '';
46      response.on('data', chunk => data += chunk);
47      response.on('end', () => {
48        try {
49          resolve(res.status(response.statusCode).json(JSON.parse(data)));
50        } catch (e) {
51          resolve(res.status(200).json({ raw: data }));
52        }
53      });
54    });
55    request.on('error', e => resolve(res.status(500).json({ error: e.message })));
56    request.write(payload);
57    request.end();
58  });
59});

In your FlutterFlow project, click API Calls in the left navigation panel. Click + Add and choose Create API Group. Name it 'WhatsAppProxy'. Set the Base URL to your Cloud Function's base URL (e.g., `https://us-central1-your-project-id.cloudfunctions.net`). Leave Authentication as None — the Cloud Function handles all Meta authentication server-side. Click + Add API Call inside the group. Name it 'SendTemplate'. Set the method to POST. Set the API URL to `/sendWhatsApp`. In the Body tab, set body type to JSON. Add Variables: `to` (String), `templateName` (String), `languageCode` (String, default `en_US`). For template components (variable substitution), you can hardcode them for simple templates or add a `components` variable as a JSON string. In the Response & Test tab, enter test values: use a phone number from your Meta sandbox test recipients (without the + prefix), `templateName` = `hello_world`, `languageCode` = `en_US`. Click Test API Call — a 200 response with a `messages[0].id` in the response means success. Wire the Send action from a button in your app: bind `to` to the recipient's phone number field, `templateName` to a Dropdown or hardcoded value, and call the action. In the action chain, check for a successful response (JSON Path `$.messages[0].id` is non-empty) and show a 'Message sent via WhatsApp' Snackbar.

To receive inbound WhatsApp messages (user replies, contact initiations), you need a webhook endpoint. FlutterFlow itself cannot be a webhook receiver since it runs on devices. The flow is: Meta sends webhook events to a Cloud Function URL → the function writes messages to Firestore → the FlutterFlow app reads Firestore in real time. Deploy a second Cloud Function (code below) that handles Meta's two-step webhook setup: GET requests for the initial verification challenge (returning `hub.challenge`), and POST requests for actual messages. After deploying, go to Meta Developers → your app → WhatsApp → Configuration → Webhooks. Set the Callback URL to your function's URL and the Verify Token to any secret string you choose (store it in your function's config). Click Verify and Save. Meta sends a GET to your function with the challenge; the function must return `hub.challenge` to confirm ownership. Once verified, subscribe to the `messages` webhook field. Now in FlutterFlow, add a Backend Query to a ListView on the conversations page, binding it to the `whatsapp_messages` Firestore collection ordered by `timestamp` descending. Each document contains `from` (the sender's phone number), `text`, `timestamp`, and `message_id`. Display these in a ChatBubble-style layout to create a WhatsApp inbox view.

1// Firebase Cloud Function: webhook handler
2const admin = require('firebase-admin');
3admin.initializeApp();
4
5exports.whatsappWebhook = functions.https.onRequest(async (req, res) => {
6  // Webhook verification (GET)
7  if (req.method === 'GET') {
8    const VERIFY_TOKEN = functions.config().whatsapp.verify_token;
9    const mode = req.query['hub.mode'];
10    const token = req.query['hub.verify_token'];
11    const challenge = req.query['hub.challenge'];
12
13    if (mode === 'subscribe' && token === VERIFY_TOKEN) {
14      return res.status(200).send(challenge);
15    }
16    return res.status(403).send('Forbidden');
17  }
18
19  // Incoming message (POST)
20  if (req.method === 'POST') {
21    const body = req.body;
22    const entry = body.entry?.[0];
23    const changes = entry?.changes?.[0];
24    const value = changes?.value;
25
26    if (value?.messages) {
27      const message = value.messages[0];
28      const contact = value.contacts?.[0];
29
30      await admin.firestore().collection('whatsapp_messages').add({
31        from: message.from,
32        name: contact?.profile?.name || '',
33        text: message.text?.body || '',
34        type: message.type,
35        message_id: message.id,
36        timestamp: admin.firestore.FieldValue.serverTimestamp()
37      });
38    }
39
40    return res.status(200).send('EVENT_RECEIVED');
41  }
42});