Panduan lengkap integrasi Web Chat Alat WA di website. Pengunjung bisa langsung chat dari web Anda dan terhubung real-time ke Chatroom CS, Auto Reply, & CS AI.
Web Chat Alat WA adalah solusi live chat website modern yang menghubungkan pengunjung website Anda secara langsung ke Chatroom Alat WA. Dengan hanya menyalin 1 baris kode script embed, pengunjung website dapat berinteraksi secara real-time dan pesan mereka langsung dijawab oleh tim Customer Service (CS), Auto Reply kata kunci, maupun CS AI 24/7.
Berikut adalah ikhtisar fitur utama Web Chat Alat WA beserta manfaat operasionalnya:
| Fitur Utama | Deskripsi Teknis | Manfaat untuk Bisnis |
|---|---|---|
| 1-Line Embed Script | Script async mandiri (< 25 KB) tanpa dependensi library luar | Pemasangan super cepat < 2 menit, tidak memperlambat skor Google PageSpeed |
| Integrasi Chatroom Terpadu | Pesan webchat mengalir langsung ke panel Chatroom CS Alat WA | Agen CS melayani chat WhatsApp dan live chat website di 1 layar terpadu |
| Auto Reply (Keyword Bot) | Mendeteksi kata kunci pada pesan awal pengunjung | Menjawab pertanyaan umum (FAQ, katalog, jam kerja) secara instan |
| CS AI Siap Pakai 24/7 | Terhubung ke mesin CS AI dengan dokumen knowledge base | Melayani konsultasi, rekomendasi produk, dan edukasi pelanggan otomatis |
| Lead Capture Form | Formulir kontak nama, nomor WhatsApp, & email sebelum chat | Merekam data calon pelanggan baru secara otomatis untuk kebutuhan follow-up |
| Device WhatsApp Routing | Menghubungkan widget dengan nomor device WhatsApp tertentu | Percakapan diarahkan ke tim CS yang bertugas memegang nomor tersebut |
| Kustomisasi Tema Visual | Pilihan warna tema (Emerald, Blue, Indigo, Slate, Orange, custom hex) | Tampilan widget menyatu serasi dengan identitas visual website Anda |
Saat membuat atau mengubah Web Chat melalui menu Web Chat → Buat Web Chat Baru di dashboard Alat WA, Anda dapat menyesuaikan parameter berikut:
| Pengaturan | Tipe Input | Fungsi & Rekomendasi |
|---|---|---|
| Nama Profil / Brand | Teks (Wajib) | Nama bisnis atau divisi yang muncul pada header jendela chat (misal: Customer Service Toko Anda) |
| Device WhatsApp | Dropdown Pilihan | Device WA tujuan untuk routing obrolan. Pilih device default jika ingin dialihkan otomatis |
| Judul Sambutan | Teks | Kalimat sapaan utama saat pengunjung membuka chat (default: Halo! Ada yang bisa kami bantu?) |
| Sub-Judul Sambutan | Teks | Keterangan pendukung di bawah sapaan (default: Tim CS kami siap membantu Anda secara langsung.) |
| Warna Tema Utama | Color Palette | Warna tombol gelembung chat dan header obrolan |
| Posisi Layar | Kanan / Kiri Bawah | Penempatan gelembung widget di sudut layar monitor atau layar ponsel pengunjung |
| Wajibkan Nomor WhatsApp | Checkbox | Memastikan pengunjung memasukkan nomor WhatsApp aktif sebelum mengirim chat (Sangat disarankan) |
| Minta Email Pengunjung | Checkbox | Menyediakan kolom input email opsional bagi pengunjung |
| Aktifkan Auto Reply | Checkbox | Menghubungkan pesan masuk ke aturan bot kata kunci yang telah Anda buat |
| Aktifkan CS AI | Checkbox | Mengaktifkan kecerdasan buatan untuk menjawab pesan pengunjung website |
| Template CS AI | Dropdown Template | Menentukan knowledge base dan gaya bahasa spesifik yang akan digunakan oleh AI |
| Status Web Chat | Aktif / Nonaktif | Mengaktifkan atau menyembunyikan widget dari website tanpa mencabut kode script embed |
Setelah menyimpan konfigurasi Web Chat, klik tombol Salin Kode pada kartu widget Anda. Kode script embed memiliki format berikut:
<script src="https://app.alatwa.com/assets/js/livechat.js" data-chat-id="KODE_WIDGET_ANDA" async></script>Berikut adalah panduan langkah demi langkah pemasangan ke platform populer:
| Platform | Lokasi Penempelan Script | Langkah Pemasangan |
|---|---|---|
| WordPress (Plugin WPCode) | Footer Code Snippet |
|
| WordPress (Tema footer.php) | Sebelum tag penutup </body> |
|
| Shopify | Berkas theme.liquid |
|
| Landing Page HTML / PHP Murni | Sebelum tag penutup </body> |
|
| Webflow | Custom Code Settings |
|
| Next.js / React | Komponen next/script |
Gunakan komponen <Script> di dalam layout root dengan atribut strategy="lazyOnload".
|
Proses interaksi percakapan berjalan secara mulus melalui tahapan berikut:
| Tahap | Aksi Pengunjung | Respon Sistem Alat WA |
|---|---|---|
| 1. Pembukaan Chat | Pengunjung membuka halaman web & mengklik gelembung chat | Widget menampilkan form sapaan nama dan nomor WhatsApp aktif |
| 2. Inisialisasi Kontak | Pengunjung memasukkan nama dan nomor kontak | Sistem membuat sesi percakapan unik & mencatat kontak prospek baru |
| 3. Pengiriman Pesan | Pengunjung mengetik pertanyaan atau kebutuhan belanja | Pesan langsung dikirim dalam tempo < 100ms dan tersinkronisasi ke Chatroom CS |
| 4. Respon Otomatis | Menunggu balasan | Auto Reply dan CS AI langsung merespons pertanyaan pengunjung secara cerdas dalam hitungan detik |
| 5. Pengambilalihan CS | Interaksi lanjutan | Agen CS manusia di Chatroom dapat memantau percakapan dan mengambil alih obrolan kapan saja |
Jika Anda mengalami kendala saat memasang atau menggunakan Web Chat, silakan merujuk ke tabel solusi berikut:
| Masalah | Kemungkinan Penyebab | Solusi Rekomendasi |
|---|---|---|
| Gelembung chat tidak muncul di website | Status widget Nonaktif atau cache website belum diperbarui | Pastikan status di menu Web Chat berstatus Aktif dan lakukan pembersihan cache (WP Rocket, LiteSpeed, Cloudflare). |
| Pesan tidak masuk ke Chatroom CS | Device WhatsApp yang terhubung mengalami putus koneksi (disconnected) | Buka menu Device di Alat WA dan lakukan scan QR ulang hingga indikator device menyala hijau (Connected). |
| CS AI tidak menjawab percakapan web | Opsi CS AI tidak dicentang atau saldo token AI habis | Periksa centang Aktifkan CS AI di pengaturan Web Chat dan pastikan saldo token Anda mencukupi di menu CS AI → Top Up. |
| Nomor WhatsApp pengunjung tidak valid | Pengunjung memasukkan nomor dengan karakter spesial atau kurang dari 8 digit | Formulir telah dilengkapi validasi angka otomatis (minimal 8 digit). Arahkan pengunjung untuk mengisi nomor telepon yang benar. |
Terakhir diperbarui: 03 Oct 2026
Tanpa server, tanpa coding. Daftar, scan QR WhatsApp, dan auto reply pertamamu bisa langsung jalan.
