How to Build a WhatsApp Chatbot with Twilio, OpenAI and Airtable Analytics: Complete Guide

Creating a fully functioning WhatsApp chatbot that integrates with OpenAI and logs all conversation data into Airtable while also embedding it seamlessly into your website requires a coordinated setup of messaging APIs, frontend/backend logic, and proper data management.

This guide gives you an A-to-Z walkthrough:

Overview: What You’ll Build

• A WhatsApp chatbot using Twilio or 360dialog
• A Node.js backend with a webhook that processes WhatsApp messages
• A connection to the OpenAI API to generate dynamic replies
• Logging all interactions in Airtable for reporting & insights
• A front-facing website widget that triggers a WhatsApp chat

1. Set Up WhatsApp API Access

Option A: Use Twilio Sandbox (For Testing)

1. Sign up at twilio.com
2. Activate the WhatsApp sandbox and link your phone
3. Note the sandbox number and the webhook URL placeholder

Option B: Use 360dialog (For Production)

1. Sign up at 360dialog.com
2. Connect your WhatsApp Business Account (WABA)
3. Generate an API key and webhook URL for your server

2. Set Up Your Node.js Server (Webhook Backend)

Create a small Express.js app that listens to WhatsApp messages and responds using OpenAI.

• Install dependencies: express, body-parser, axios, dotenv
• Add routes: /webhook to receive incoming messages
• Authenticate to OpenAI API
• Log messages to Airtable API

// index.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const webhook = require('./api/whatsapp-webhook');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use('/api/whatsapp-webhook', webhook);

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// /api/whatsapp-webhook.js
const express = require('express');
const axios = require('axios');
const router = express.Router();
require('dotenv').config();

router.post('/', async (req, res) => {
  const message = req.body.Body;
  const userNumber = req.body.From;

  // Get reply from OpenAI
  const openaiRes = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      model: 'gpt-4',
      messages: [{ role: 'user', content: message }]
    },
    {
      headers: {
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`
      }
    }
  );

  const reply = openaiRes.data.choices[0].message.content;

  // Store in Airtable
  await axios.post(
    'https://api.airtable.com/v0/YOUR_BASE_ID/Conversations',
    {
      fields: {
        Phone: userNumber,
        Message: message,
        Reply: reply,
        Timestamp: new Date().toISOString()
      }
    },
    {
      headers: {
        Authorization: `Bearer ${process.env.AIRTABLE_API_KEY}`,
        'Content-Type': 'application/json'
      }
    }
  );

  // Respond to Twilio
  res.set('Content-Type', 'text/xml');
  res.send(
    `<?xml version="1.0" encoding="UTF-8"?><Response><Message>${reply}</Message></Response>`
  );
});

module.exports = router;

Deploy this to a service like Render, Railway, or Vercel.

3. Connect WhatsApp Provider to Your Backend

• In Twilio: set your webhook URL under WhatsApp sandbox configuration
• In 360dialog: set the webhook under WhatsApp API settings

Now all messages sent to your WhatsApp number will POST to your webhook.

4. Connect to OpenAI

In your webhook handler, send user messages to OpenAI using chat/completions. Handle:

• Input validation
• Contextual prompts (optional)
• Streaming or standard response handling

You can personalize replies per user using metadata from Airtable or session tracking.

5. Store Data in Airtable

Create a base with a table Conversations. Add fields:

• Phone
• Message
• Reply
• Timestamp
• Topic (optional)

Use Airtable’s REST API to POST conversation data after each exchange.

await axios.post(
  'https://api.airtable.com/v0/YOUR_BASE_ID/Conversations',
  {
    fields: {
      Phone: userNumber,
      Message: message,
      Reply: reply,
      Timestamp: new Date().toISOString()
    }
  },
  {
    headers: {
      Authorization: `Bearer ${process.env.AIRTABLE_API_KEY}`,
      'Content-Type': 'application/json'
    }
  }
);

6. Add WhatsApp Chat Widget to Your Website

Use a WhatsApp floating widget or direct wa.me links:

Option A: HTML Widget

Use a service like GetButton.io or write your own widget that opens:

https://wa.me/1234567890?text=Hi

<a href="https://wa.me/31612345678?text=Hi%20there!" target="_blank" rel="noopener">
  <button style="background-color:#25D366;color:white;padding:10px 15px;border:none;border-radius:5px;">
    Chat with us on WhatsApp
  </button>
</a>

Style it as a floating button or embed it inline.

Option B: Custom Vue or React Component

Build a component that opens WhatsApp Web or App when clicked. Track events for analytics (e.g., Google Tag Manager).

7. Build Airtable Dashboard

Use Airtable Interfaces to:

• Filter conversations per user
• See messages per day/week
• Detect most common questions
• Monitor OpenAI response quality

Optionally export to Google Sheets or connect to Looker Studio.

8. Add Intelligence: Context, Memory, and Triggers

Use Redis or PostgreSQL to track message history per session. Enhance AI logic with:

• Intent recognition (OpenAI or custom model)
• Trigger-specific workflows (e.g., booking, pricing)
• Scheduled follow-ups via WhatsApp Business templates

9. Deployment and Scaling

• Deploy to a cloud platform (Vercel, AWS Lambda, or Docker container)
• Set up error logging (e.g., Logtail or Sentry)
• Monitor API usage from OpenAI and Twilio

10. Compliance & Best Practices

• GDPR compliance: inform users, ask consent, respect data retention
• Respect WhatsApp rules (no unsolicited outreach)
• Use verified templates for outbound messages

Final Thoughts

By combining WhatsApp, OpenAI, and Airtable, you can build a powerful, scalable, and intelligent chatbot system fully embedded into your website and backed by data.

This isn’t just a chatbot. It’s a customer insight engine.

👉 Need help deploying this for your business? Contact Scalevise to get started fast.