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
Rasakan sensasi produktivitas yang lebih baik dengan menggunakan Alat WA, Anda tidak perlu membalas secara manual satu persatu karena sudah dihandle oleh robot. Anda cukup follow up customer yang membutuhkan hal spesifik yang tidak bisa dilayani oleh robot.
Anda tidak perlu menyiapkan server, anda hanya perlu berlangganan dan bisa langsung digunakan, cukup scan qrcode whatsapp maka whatsapp anda akan terhubung dengan sistem Alat WA
