![\"Cara](\"https:\/\/whapi.id\/blog\/wp-content\/uploads\/2026\/09\/Cara-Membuat-Webhook-WhatsApp-untuk-Menerima-Pesan-Masuk.jpg\")
<\/p>\nWebhook 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.<\/p>\n
Pada integrasi WhatsApp API, webhook dapat digunakan untuk menerima pesan pelanggan, menjalankan chatbot, menyimpan percakapan ke database, atau meneruskan pesan ke sistem lain.<\/p>\n
<\/p>\n
Alur dasarnya:<\/p>\n
Pesan masuk ke WhatsApp\r\n \u2193\r\nDevice WhatsApp\r\n \u2193\r\nAPI Whapi\r\n \u2193\r\nWebhook\r\n \u2193\r\nServer<\/span> \/ Aplikasi\r\n \u2193\r\nProses pesan\r\n`\r\n<\/code><\/pre>\n![\"Diagram](\"IMAGE_URL\")
<\/p>\n
Apa Itu Webhook WhatsApp?<\/h2>\n
Webhook WhatsApp adalah endpoint HTTP pada server yang menerima data dari API ketika terjadi event tertentu pada WhatsApp.<\/p>\n
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.<\/p>\n
Contohnya, ketika pelanggan mengirim:<\/p>\n
Halo, apakah produk A<\/span> masih tersedia?\r\n<\/code><\/pre>\nAPI dapat mengirim data event tersebut ke webhook:<\/p>\n
WhatsApp\r\n \u2193\r\nAPI Whapi\r\n \u2193\r\nPOST https:\/\/<\/span>example.com\/webhook\/<\/span>whatsapp\r\n<\/code><\/pre>\nServer kemudian membaca data tersebut dan menjalankan proses yang diperlukan.<\/p>\n
Apa yang Dibutuhkan?<\/h2>\n
Sebelum membuat webhook, siapkan:<\/p>\n
\n- Device WhatsApp yang sudah terhubung ke Whapi.<\/li>\n
- URL webhook yang dapat menerima request dari internet.<\/li>\n
- Server atau aplikasi untuk memproses data webhook.<\/li>\n
- Endpoint HTTP dengan method
POST<\/code>.<\/li>\n- Logic untuk membaca data pesan yang diterima.<\/li>\n<\/ol>\n
Endpoint webhook harus dapat diakses oleh server Whapi. URL seperti http:\/\/localhost:3000\/webhook<\/code> tidak dapat digunakan secara langsung karena hanya dapat diakses dari komputer lokal.<\/p>\nUntuk pengembangan lokal, gunakan server publik sementara atau lingkungan pengujian yang dapat menerima request dari internet.<\/p>\n
Buat Endpoint Webhook<\/h2>\n
Endpoint webhook merupakan URL yang akan menerima request dari Whapi.<\/p>\n
Contoh:<\/p>\n
https:\/\/<\/span>example.com\/webhook\/<\/span>whatsapp\r\n<\/code><\/pre>\nServer harus menyediakan route yang menerima HTTP POST<\/code>.<\/p>\nContoh menggunakan Node.js dan Express:<\/p>\n
const express = require<\/span>('express'<\/span>);\r\n\r\nconst app = express();\r\n\r\napp.use(express.json());\r\n\r\napp.post('\/webhook\/whatsapp'<\/span>, (req, res)<\/span> =><\/span> {\r\n console<\/span>.log(req.body);\r\n\r\n res.sendStatus(200<\/span>);\r\n});\r\n\r\napp.listen(3000<\/span>, ()<\/span> =><\/span> {\r\n console<\/span>.log('Webhook server berjalan di port 3000'<\/span>);\r\n});\r\n<\/code><\/pre>\nKetika request masuk ke:<\/p>\n
POST \/webhook\/<\/span>whatsapp\r\n<\/code><\/pre>\ndata webhook dapat dibaca melalui:<\/p>\n
req.body<\/span>\r\n<\/code><\/pre>\nResponse 200 OK<\/code> kemudian dikirim sebagai tanda bahwa request sudah diterima server.<\/p>\nKonfigurasi Webhook di Whapi<\/h2>\n
Setelah endpoint tersedia, masukkan URL tersebut ke konfigurasi webhook pada Whapi.<\/p>\n
URL yang digunakan harus merupakan URL endpoint yang benar-benar menangani request webhook.<\/p>\n
Contohnya:<\/p>\n
https:\/\/<\/span>example.com\/webhook\/<\/span>whatsapp\r\n<\/code><\/pre>\nPastikan endpoint:<\/p>\n
\n- menggunakan HTTPS pada server production;<\/li>\n
- dapat diakses dari internet;<\/li>\n
- menerima HTTP
POST<\/code>;<\/li>\n- dapat membaca request body;<\/li>\n
- mengembalikan response
2xx<\/code>;<\/li>\n- tidak membutuhkan login dashboard untuk menerima request.<\/li>\n<\/ul>\n
Konfigurasi webhook kemudian digunakan Whapi untuk mengirim event WhatsApp ke server.<\/p>\n
Menerima Pesan Masuk<\/h2>\n
Ketika pesan baru diterima, webhook akan mendapatkan data event dari Whapi.<\/p>\n
Server tidak perlu melakukan request berulang untuk mengetahui apakah ada pesan baru. Data dikirim ke endpoint ketika event terjadi.<\/p>\n
Contoh prosesnya:<\/p>\n
Pelanggan mengirim pesan\r\n \u2193\r\nWhatsApp menerima pesan\r\n \u2193\r\nWhapi menerima event\r\n \u2193\r\nWhapi mengirim POST ke webhook\r\n \u2193\r\nServer membaca request body<\/span>\r\n \u2193\r\nAplikasi memproses pesan\r\n<\/code><\/pre>\nPada tahap ini, aplikasi dapat menentukan tindakan berdasarkan isi pesan.<\/p>\n
Contohnya:<\/p>\n
app.post('\/webhook\/whatsapp'<\/span>, (req, res)<\/span> =><\/span> {\r\n const data = req.body;\r\n\r\n console<\/span>.log('Webhook diterima:'<\/span>, data);\r\n\r\n \/\/<\/span> Proses data pesan di sini\r\n\r\n res.sendStatus(200<\/span>);\r\n});\r\n<\/code><\/pre>\nJangan 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.<\/p>\n
Membaca Isi Pesan<\/h2>\n
Setelah webhook menerima data, struktur payload perlu diperiksa terlebih dahulu untuk mengetahui field yang tersedia.<\/p>\n
Contoh sederhana untuk melihat seluruh payload:<\/p>\n
app.post('\/webhook\/whatsapp'<\/span>, (req, res)<\/span> =><\/span> {\r\n console<\/span>.log(JSON.stringify(req.body, null<\/span>, 2<\/span>));\r\n\r\n res.sendStatus(200<\/span>);\r\n});\r\n<\/code><\/pre>\nCara ini berguna saat pertama kali menghubungkan webhook karena struktur data yang diterima dapat dilihat langsung dari log server.<\/p>\n
Setelah struktur payload diketahui, field yang diperlukan dapat diambil secara spesifik.<\/p>\n
Contohnya:<\/p>\n
const<\/span> data = req.body;\r\n\r\nconst<\/span> messages = data.messages || [];\r\n\r\nfor<\/span> (const<\/span> message of<\/span> messages) {\r\n console<\/span>.log(message);\r\n}\r\n<\/code><\/pre>\nField yang digunakan harus mengikuti payload webhook yang dikirim oleh versi API yang digunakan.<\/p>\n
Memproses Pesan Setelah Diterima<\/h2>\n
Webhook sebaiknya hanya menangani penerimaan event dan meneruskan data ke proses berikutnya.<\/p>\n
Contohnya:<\/p>\n
app.post('\/webhook\/whatsapp'<\/span>, async<\/span> (req, res) => {\r\n const<\/span> data = req.body;\r\n\r\n res.sendStatus(200<\/span>);\r\n\r\n \/\/ Proses pesan setelah request diterima<\/span>\r\n console.log('Event:'<\/span>, data);\r\n});\r\n<\/code><\/pre>\nPada aplikasi yang lebih besar, data dapat diteruskan ke queue atau service internal.<\/p>\n
Contoh alurnya:<\/p>\n
Webhook<\/span>\r\n \u2193\r\nValidasi<\/span> event\r\n \u2193\r\nSimpan<\/span>