title: “WhatsApp Web” description: “Integrasi WhatsApp dengan Fonnte gateway, AI copilot, intent detection, grounded reply, QR pairing, dan CRM integration di SNISHOP ERP.”
WhatsApp Web

Ringkasan Fitur Utama
Komponen Penyusun
Modul ini terdiri dari lima komponen utama:- WhatsAppWeb.jsx (598 baris) — Halaman utama dengan 2 tab: Fonnte Integration dan WhatsApp Web
- InAppWhatsAppWeb.jsx (822 baris) — Chat studio dual-column seperti WhatsApp Web asli, dengan AI copilot
- WAPairingModal.jsx (428 baris) — Modal pairing QR code dan kode 8-digit
- WAChatAIEngine.js (423 baris) — AI engine dengan intent detection dan grounded reply generation
- whatsappGatewayService.js (82 baris) — Gateway service ke Fonnte API
Arsitektur Lengkap
Alur Data End-to-End
Entity Relationship Diagram
Entity Schema Reference
WhatsAppSession
Entity ini menyimpan informasi sesi koneksi WhatsApp yang terhubung melalui gateway. Setiap sesi mewakili satu nomor WhatsApp yang telah di-pairing.WhatsAppChatLog
Entity ini mencatat setiap pesan WhatsApp yang masuk dan keluar, lengkap dengan hasil analisis AI termasuk intent detection dan qualification scoring.WhatsAppContact
Entity ini menyimpan data kontak WhatsApp yang tersinkronisasi dari sesi yang terhubung, termasuk informasi profil dan foto.WhatsAppFinanceBot
Entity ini mengelola konfigurasi bot pencatatan keuangan melalui WhatsApp. Mendukung mode personal dan bisnis dengan pembatasan chat harian.CompanyWablasSettings
Entity ini menyimpan konfigurasi integrasi Wablas WhatsApp per perusahaan, termasuk pengaturan pengiriman struk otomatis.Enum Reference Tables
WhatsAppSession.status — Status Koneksi Session
WhatsAppChatLog.direction — Arah Pesan
WhatsAppChatLog.intent — Klasifikasi Intent AI
WhatsAppChatLog.status — Status Penanganan Pesan
WhatsAppFinanceBot.default_mode — Mode Pencatatan Bot
Customer.last_contact_method — Metode Kontak Terakhir
Customer.preferences.preferred_contact — Preferensi Kontak
Status Lifecycle Diagrams
Siklus Hidup Koneksi WhatsApp Session
Siklus Hidup Penanganan Pesan (ChatLog)
Siklus Hidup Finance Bot
Sequence Diagrams
Flow Mengirim Pesan WhatsApp
Flow Menerima Pesan & Webhook Processing
Flow Template Broadcast Messaging
Flow QR Pairing & Device Connection
Flow WhatsAppQuickSend dari CRM
AI Copilot: WAChatAIEngine
Intent Detection (9 Intents)
AI engine mendeteksi intent customer dari pesan masuk menggunakan keyword-based classifier. Setiap intent memiliki tingkat confidence dan aturan handoff yang berbeda:Handoff Logic
Product Matching
Mencocokkan pertanyaan customer dengan katalog produk untuk menghasilkan balasan yang berbasis data nyata:Grounded Reply Generation
AI menggunakan data real-time untuk menghasilkan balasan yang akurat dan kontekstual:Phone Number Normalization
Sistem menormalisasi semua nomor telepon ke format internasional sebelum diproses:Gateway Service
Fonnte Gateway
whatsappGatewayService.js (82 baris) berkomunikasi dengan Fonnte API melalui Base44 Functions. Semua kredensial API disimpan aman di server-side dan tidak pernah terekspos ke browser.
Wablas Gateway (Alternatif)
Selain Fonnte, sistem juga mendukung Wablas sebagai gateway alternatif yang dikonfigurasi per perusahaan melalui entityCompanyWablasSettings. Wablas terutama digunakan untuk fitur pengiriman struk otomatis setelah transaksi POS.
Variabel Template Struk
Security
- Fonnte API token disimpan di Base44 Application Secrets — tidak pernah terekspos di browser
- Wablas
wablas_secret_keydisimpan terenkripsi di database - Session data (
session_data) pada WhatsAppSession disimpan dalam bentuk terenkripsi - Semua komunikasi gateway melalui HTTPS
WAPairingModal
Modal pairing dengan 2 metode koneksi untuk menghubungkan nomor WhatsApp:QR Auto-Refresh
QR code otomatis refresh setiap 25 detik dengan countdown timer visual. Jika QR tidak di-scan dalam waktu tersebut, QR baru akan di-generate secara otomatis.Device Status Polling
Saat modal terbuka dan device belum connected, status di-poll setiap 5 detik untuk memberikan feedback real-time kepada user mengenai progres koneksi.InAppWhatsAppWeb Chat Studio
Interface dual-column seperti WhatsApp Web asli yang memberikan pengalaman chat native:Fitur Chat Studio
Demo Data Fallback
Jika belum ada data real, sistem menampilkanINITIAL_DEMO_CONTACTS (lines 46-118) sebagai placeholder agar user bisa langsung melihat tampilan chat studio sebelum menghubungkan WhatsApp.
Chat Log Loading
Memuat 50 pesan terakhir dari entityWhatsAppChatLog, dikelompokkan berdasarkan nomor telepon. Setiap grup percakapan menampilkan:
- Nama customer atau nomor telepon
- Pesan terakhir dengan preview
- Timestamp pesan terakhir
- Indikator status (auto_replied, waiting_human, dll)
- Badge jumlah pesan belum dibaca
WhatsAppQuickSend (CRM Integration)
KomponenWhatsAppQuickSend.jsx (185 baris) memungkinkan pengiriman pesan WhatsApp langsung dari halaman detail Customer di modul CRM, tanpa perlu berpindah ke halaman WhatsApp Web.
Fitur QuickSend
WhatsAppFinanceBot
Bot pencatatan keuangan via WhatsApp yang memungkinkan user mencatat transaksi keuangan langsung melalui chat WhatsApp. Bot ini mendukung dua mode operasi:Fitur Finance Bot
Flow Pencatatan via Finance Bot
Stats Dashboard
Session Polling
RBAC Permission Matrix
Berikut adalah matriks hak akses berdasarkan role user dan scope perusahaan. Semua entity WhatsApp menggunakan Row-Level Security (RLS) dari Base44.WhatsAppSession
WhatsAppChatLog
Catatan:WhatsAppChatLogtidak memiliki akses berbasisuser_id— hanyacreated_by_iddancompany_idyang digunakan untuk RLS.
WhatsAppContact
WhatsAppFinanceBot
CompanyWablasSettings
Catatan:CompanyWablasSettingshanya bisa diakses dalam scope perusahaan. Tidak ada akses personal — wajibcompany_idyang valid.
Integrasi Lintas Modul
Cara Akses
Dari sidebar, klik menu Communication > WhatsApp Web.Flow Penggunaan
Pairing & Koneksi Awal
- Buka WhatsApp Web dari sidebar
- Klik “Hubungkan WhatsApp” — WAPairingModal terbuka
- Pilih metode: Scan QR (scan dengan HP) atau Kode Pairing (masukkan 8-digit code)
- Tunggu hingga status berubah menjadi
connected - Sistem otomatis sinkronisasi kontak ke entity
WhatsAppContact
Chat & AI Copilot
- Pilih customer dari daftar kontak atau cari berdasarkan nomor
- Ketik pesan — AI copilot akan menampilkan saran balasan di bar bawah
- Untuk pertanyaan standar, AI akan otomatis membalas (status:
auto_replied) - Untuk complaint atau permintaan CS, pesan akan di-handoff (status:
waiting_human)
Broadcast & CRM
- Untuk broadcast, gunakan tab Fonnte Integration dan pilih daftar penerima
- Untuk kirim cepat dari CRM, buka halaman customer dan klik “Kirim WhatsApp”
- Monitor chat log untuk melihat pesan masuk dan status auto-reply
Finance Bot
- Daftarkan nomor WhatsApp di WhatsAppFinanceBot
- Pilih mode:
personalataubusiness - Kirim pesan format pencatatan ke nomor bot
Tips & Best Practices
- Siapkan template pesan untuk pertanyaan yang sering diajukan supaya CS bisa respond cepat
- Jangan broadcast terlalu sering — customer bisa terganggu dan memblokir nomor kamu
- Manfaatkan AI copilot untuk pertanyaan standar (harga, jam buka, stok) — CS human bisa fokus ke complaint dan kasus kompleks
- Selalu personalisasi pesan broadcast dengan nama customer untuk engagement yang lebih tinggi
- Monitor
waiting_humanchat log secara berkala — jangan biarkan customer menunggu terlalu lama untuk handoff - Gunakan
CompanyWablasSettingsuntuk mengaktifkan auto-struk agar customer mendapat konfirmasi transaksi otomatis - Normalisasi nomor telepon ke format
628xxxsebelum mengirim pesan via gateway untuk menghindari kegagalan pengiriman - Perhatikan
daily_chat_countpada FinanceBot — limit harian akan direset setiap pergantian tanggal - Manfaatkan
qualification_scoredi WhatsAppChatLog untuk mengidentifikasi prospek bernilai tinggi dari percakapan WhatsApp
