Webhook WhatsApp digunakan untuk menerima data secara otomatis ketika terdapat event baru pada WhatsApp. Untuk pesan masuk, webhook dapat meneruskan informasi pesan dari WhatsApp ke endpoint pada server sehingga aplikasi dapat memproses pesan tanpa melakukan pengecekan secara berkala.
Pada integrasi WhatsApp API, webhook dapat digunakan untuk menerima pesan pelanggan, menjalankan chatbot, menyimpan percakapan ke database, atau meneruskan pesan ke sistem lain.
Alur dasarnya:
Pesan masuk ke WhatsApp
↓
Device WhatsApp
↓
API Whapi
↓
Webhook
↓
Server / Aplikasi
↓
Proses pesan
`
Apa Itu Webhook WhatsApp?
Webhook WhatsApp adalah endpoint HTTP pada server yang menerima data dari API ketika terjadi event tertentu pada WhatsApp.
Berbeda dengan request API biasa yang dikirim oleh aplikasi ke server API, webhook bekerja dari arah sebaliknya. API mengirim HTTP request ke endpoint yang sudah dikonfigurasi ketika event terjadi.
Contohnya, ketika pelanggan mengirim:
Halo, apakah produk A masih tersedia?
API dapat mengirim data event tersebut ke webhook:
WhatsApp
↓
API Whapi
↓
POST https://example.com/webhook/whatsapp
Server kemudian membaca data tersebut dan menjalankan proses yang diperlukan.
Apa yang Dibutuhkan?
Sebelum membuat webhook, siapkan:
- Device WhatsApp yang sudah terhubung ke Whapi.
- URL webhook yang dapat menerima request dari internet.
- Server atau aplikasi untuk memproses data webhook.
- Endpoint HTTP dengan method
POST. - Logic untuk membaca data pesan yang diterima.
Endpoint webhook harus dapat diakses oleh server Whapi. URL seperti http://localhost:3000/webhook tidak dapat digunakan secara langsung karena hanya dapat diakses dari komputer lokal.
Untuk pengembangan lokal, gunakan server publik sementara atau lingkungan pengujian yang dapat menerima request dari internet.
Buat Endpoint Webhook
Endpoint webhook merupakan URL yang akan menerima request dari Whapi.
Contoh:
https://example.com/webhook/whatsapp
Server harus menyediakan route yang menerima HTTP POST.
Contoh menggunakan Node.js dan Express:
const express = require('express');
const app = express();
app.use(express.json());
app.post('/webhook/whatsapp', (req, res) => {
console.log(req.body);
res.sendStatus(200);
});
app.listen(3000, () => {
console.log('Webhook server berjalan di port 3000');
});
Ketika request masuk ke:
POST /webhook/whatsapp
data webhook dapat dibaca melalui:
req.body
Response 200 OK kemudian dikirim sebagai tanda bahwa request sudah diterima server.
Konfigurasi Webhook di Whapi
Setelah endpoint tersedia, masukkan URL tersebut ke konfigurasi webhook pada Whapi.
URL yang digunakan harus merupakan URL endpoint yang benar-benar menangani request webhook.
Contohnya:
https://example.com/webhook/whatsapp
Pastikan endpoint:
- menggunakan HTTPS pada server production;
- dapat diakses dari internet;
- menerima HTTP
POST; - dapat membaca request body;
- mengembalikan response
2xx; - tidak membutuhkan login dashboard untuk menerima request.
Konfigurasi webhook kemudian digunakan Whapi untuk mengirim event WhatsApp ke server.
Menerima Pesan Masuk
Ketika pesan baru diterima, webhook akan mendapatkan data event dari Whapi.
Server tidak perlu melakukan request berulang untuk mengetahui apakah ada pesan baru. Data dikirim ke endpoint ketika event terjadi.
Contoh prosesnya:
Pelanggan mengirim pesan
↓
WhatsApp menerima pesan
↓
Whapi menerima event
↓
Whapi mengirim POST ke webhook
↓
Server membaca request body
↓
Aplikasi memproses pesan
Pada tahap ini, aplikasi dapat menentukan tindakan berdasarkan isi pesan.
Contohnya:
app.post('/webhook/whatsapp', (req, res) => {
const data = req.body;
console.log('Webhook diterima:', data);
// Proses data pesan di sini
res.sendStatus(200);
});
Jangan menempatkan proses yang sangat berat sebelum mengirim response jika webhook harus diproses dengan cepat. Proses lanjutan seperti penyimpanan database, pemanggilan service lain, atau pengolahan chatbot dapat dipisahkan dari penerimaan request.
Membaca Isi Pesan
Setelah webhook menerima data, struktur payload perlu diperiksa terlebih dahulu untuk mengetahui field yang tersedia.
Contoh sederhana untuk melihat seluruh payload:
app.post('/webhook/whatsapp', (req, res) => {
console.log(JSON.stringify(req.body, null, 2));
res.sendStatus(200);
});
Cara ini berguna saat pertama kali menghubungkan webhook karena struktur data yang diterima dapat dilihat langsung dari log server.
Setelah struktur payload diketahui, field yang diperlukan dapat diambil secara spesifik.
Contohnya:
const data = req.body;
const messages = data.messages || [];
for (const message of messages) {
console.log(message);
}
Field yang digunakan harus mengikuti payload webhook yang dikirim oleh versi API yang digunakan.
Memproses Pesan Setelah Diterima
Webhook sebaiknya hanya menangani penerimaan event dan meneruskan data ke proses berikutnya.
Contohnya:
app.post('/webhook/whatsapp', async (req, res) => {
const data = req.body;
res.sendStatus(200);
// Proses pesan setelah request diterima
console.log('Event:', data);
});
Pada aplikasi yang lebih besar, data dapat diteruskan ke queue atau service internal.
Contoh alurnya:
Webhook
↓
Validasi event
↓
Simpan data
↓
Queue
↓
Business logic
↓
Database / chatbot / CRM
Dengan alur seperti ini, endpoint webhook tetap sederhana meskipun proses setelah pesan diterima cukup banyak.
Contoh Webhook untuk Chatbot
Webhook dapat menjadi pemicu chatbot.
Misalnya pelanggan mengirim:
cek harga
Webhook menerima event tersebut dan aplikasi memeriksa isi pesan.
Pesan masuk
↓
Webhook
↓
Baca isi pesan
↓
"Cek harga"
↓
Cari data produk
↓
Kirim balasan WhatsApp
Kode sederhana:
app.post('/webhook/whatsapp', async (req, res) => {
const data = req.body;
res.sendStatus(200);
// Contoh:
// 1. Ambil pesan dari payload
// 2. Periksa isi pesan
// 3. Tentukan respons
// 4. Kirim balasan melalui API
});
Webhook tidak digunakan untuk mengirim balasan secara langsung. Webhook menerima event, sedangkan pengiriman pesan dilakukan melalui endpoint API pengiriman pesan.
Pastikan Endpoint Menggunakan HTTPS
Untuk server production, gunakan HTTPS.
Contoh:
https://api.example.com/webhook/whatsapp
Hindari menggunakan endpoint production seperti:
http://api.example.com/webhook/whatsapp
HTTPS mengenkripsi komunikasi antara server dan client sehingga data webhook tidak dikirim dalam koneksi HTTP biasa.
Cara Menguji Webhook
Setelah webhook dikonfigurasi, kirim pesan ke nomor WhatsApp yang terhubung dengan device Whapi.
Kemudian periksa log aplikasi.
Contoh:
app.post('/webhook/whatsapp', (req, res) => {
console.log('Webhook diterima');
console.log(JSON.stringify(req.body, null, 2));
res.sendStatus(200);
});
Jika webhook bekerja, log server akan menunjukkan request yang diterima.
Pengujian sebaiknya dilakukan dengan pesan sederhana terlebih dahulu.
Contoh:
Test webhook
Setelah event berhasil diterima, lanjutkan dengan proses parsing data dan business logic.
Jika Webhook Tidak Menerima Pesan
Beberapa hal perlu diperiksa ketika pesan masuk tetapi endpoint tidak mendapatkan event.
URL Webhook Salah
Periksa kembali URL yang dimasukkan pada konfigurasi webhook.
Pastikan tidak ada:
- typo pada domain;
- path yang salah;
- port yang tidak dapat diakses;
- redirect yang tidak diperlukan.
Server Tidak Bisa Diakses dari Internet
Webhook berasal dari server eksternal. Endpoint harus dapat menerima request dari internet.
URL berikut tidak dapat digunakan sebagai endpoint publik:
http://localhost:3000/webhook
Gunakan domain atau URL publik yang dapat diakses dari luar server.
Route Tidak Menerima POST
Jika route hanya menerima GET, request webhook dengan method POST tidak akan diproses.
Contoh yang benar:
app.post('/webhook/whatsapp', (req, res) => {
res.sendStatus(200);
});
Request Body Tidak Dibaca
Pada Express, pastikan middleware JSON sudah dipasang:
app.use(express.json());
Tanpa middleware yang sesuai, data request dapat tidak terbaca sebagaimana mestinya.
Endpoint Menghasilkan Error
Periksa HTTP status code yang dikembalikan endpoint.
Response seperti:
200 OK
menunjukkan request diterima.
Sementara:
404 Not Found
500 Internal Server Error
menunjukkan ada masalah pada URL atau proses server.
Simpan Data Webhook ke Database
Setelah webhook berhasil menerima event, data pesan dapat disimpan ke database.
Contoh proses:
Pesan masuk
↓
Webhook
↓
Validasi data
↓
Simpan pesan
↓
Database
Data yang disimpan dapat digunakan untuk:
- Riwayat percakapan
- CRM
- Dashboard customer service
- Analisis pesan
- Chatbot
- Sistem ticketing
Jangan langsung menyimpan seluruh payload tanpa memahami struktur datanya. Tentukan field yang memang diperlukan oleh aplikasi.
Hindari Memproses Event Dua Kali
Server dapat menerima event yang sama lebih dari sekali dalam kondisi tertentu. Karena itu, aplikasi sebaiknya memiliki mekanisme untuk mengenali event yang sudah diproses.
Salah satu caranya adalah menyimpan ID pesan atau ID event yang tersedia pada payload.
Contoh logika:
Webhook menerima event
↓
Cek ID pesan
↓
Sudah ada di database?
↙ ↘
Ya Tidak
↓ ↓
Abaikan Proses
↓
Simpan ID
Dengan cara ini, pesan yang sama tidak diproses berulang kali oleh aplikasi.
Webhook untuk Sistem Produksi
Untuk penggunaan production, endpoint webhook sebaiknya memiliki beberapa lapisan pengamanan dan pemrosesan.
Struktur sederhananya:
┌──────────────┐
│ WhatsApp │
└──────┬───────┘
↓
┌──────────────┐
│ API Whapi │
└──────┬───────┘
↓
┌──────────────┐
│ Webhook │
└──────┬───────┘
↓
┌─────────────────┐
│ Validasi Event │
└────────┬────────┘
↓
┌─────────────────┐
│ Database / Queue│
└────────┬────────┘
↓
┌─────────────────┐
│ Business Logic │
└─────────────────┘
Webhook menjadi pintu masuk event. Setelah data diterima dan divalidasi, aplikasi dapat meneruskannya ke proses lain sesuai kebutuhan.
Kesimpulan
Cara membuat webhook WhatsApp untuk menerima pesan masuk dimulai dengan membuat endpoint POST yang dapat diakses dari internet, kemudian menghubungkan URL tersebut ke konfigurasi webhook Whapi.
Alurnya:
Pesan WhatsApp
↓
Whapi
↓
Endpoint Webhook
↓
Validasi Payload
↓
Database / Queue
↓
Aplikasi
Webhook dapat digunakan untuk menerima pesan masuk secara otomatis dan menghubungkannya dengan chatbot, CRM, database, sistem ticketing, atau aplikasi internal.
Hal terpenting adalah memastikan URL webhook dapat diakses dari internet, route menerima POST, request body dapat dibaca, dan endpoint mengembalikan response 2xx setelah event diterima.
