Integrasi dengan KIRIM.EMAIL

Dengan integrasi ini, setiap kali ada yang mengisi form KIRIM.EMAIL yang terpasang di situs WordPress Kamu, WatZap otomatis mengirim pesan WhatsApp ke nomor yang mereka isi. Kamu juga bisa menerima notifikasi ke nomor WhatsApp Kamu sendiri.

Ringkasan alur (sekitar 20 menit):

1. Pasang WatZap dan hubungkan akun. Ini cukup sekali untuk semua integrasi.

2. Buat form di KIRIM.EMAIL.

3. Ambil kode HTML form dari KIRIM.EMAIL.

4. Pasang form di halaman situs WordPress.

5. Hubungkan form itu di WatZap.

6. Tulis pesan WhatsApp-nya.

7. Uji coba.

Panduan ini untuk plugin WatZap.id versi 1.1.0 ke atas. Jika di plugin Kamu masih ada tab API Key di halaman utama WatZap, berarti plugin Kamu masih versi lama. Unduh file terbaru di Langkah 1 dan unggah ulang lewat menu Plugins.

Bahasa plugin mengikuti bahasa WordPress Kamu. Panduan ini memakai label Bahasa Indonesia, dengan padanan bahasa Inggrisnya dalam kurung.

Istilah yang akan Kamu temui

• API Key: kode 16 digit dari akun WatZap Kamu. Fungsinya seperti kunci supaya plugin di WordPress boleh mengirim pesan lewat akun WatZap Kamu.

• Nomor pengirim dan Rotasi: nomor WhatsApp yang sudah Kamu hubungkan di aplikasi WatZap. Yang tombol Rotasi-nya menyala dipakai bergantian untuk mengirim pesan.

• Kanal Regular dan Official (WABA): Regular mengirim teks bebas dari nomor WhatsApp biasa. Official mengirim template resmi lewat WhatsApp Business API. Pemula cukup memakai Regular.

• Variabel: kode seperti {full_name} yang otomatis diganti dengan isian pengunjung, misalnya namanya.

Langkah 1: Pasang WatZap dan hubungkan akun

Jika Kamu sudah pernah menghubungkan WatZap di situs ini, misalnya untuk WooCommerce, lewati ke Langkah 2.

1a. Pasang plugin WatZap

1. Unduh file plugin di tautan berikut: watzap.zip.

2. Di dashboard WordPress, buka Plugins » Add New, lalu klik Upload Plugin.

3. Pilih file watzap.zip, klik Install Now, lalu Activate.

4. Setelah aktif, muncul menu WatZap di sidebar WordPress.

1b. Hubungkan API Key

1. Ambil API Key Kamu dengan mengikuti Mendapatkan API Key di Member Area.

2. Buka WatZap » WhatsApp Numbers. Di pojok kanan atas ada tombol bertuliskan Belum terhubung. Klik tombol itu.

3. Isi kolom API Key, lalu klik Hubungkan (Connect).

Jika berhasil, panelnya berubah menjadi seperti ini: ada tanda Terhubung ke akun WatZap dan nama paket Kamu.

Panel Koneksi akun setelah API Key berhasil dihubungkan

1c. Pastikan ada nomor pengirim

Masih di halaman WhatsApp Numbers, lihat tab WhatsApp Unofficial. Harus ada minimal satu nomor berstatus Tersambung dengan tombol Rotasi menyala. Nomor inilah yang akan mengirim pesan ke pengisi form.

Halaman WhatsApp Numbers dengan nomor Tersambung dan Rotasi menyala

Kalau daftarnya kosong, hubungkan nomor dulu lewat Menambahkan Nomor WA untuk API, lalu kembali ke halaman ini dan klik Sinkronkan (Sync).

1d. Siapkan akun KIRIM.EMAIL

Integrasi ini memakai form buatan KIRIM.EMAIL, jadi Kamu butuh akun KIRIM.EMAIL yang aktif. Tidak perlu memasang plugin tambahan apa pun di WordPress.

Langkah 2: Buat form di KIRIM.EMAIL

1. Masuk ke dashboard KIRIM.EMAIL dan buat List baru untuk menampung kontak dari form ini.

Membuat list baru di KIRIM.EMAIL

1. Buka menu Form, klik Buat Baru, beri nama form, pilih list yang tadi dibuat, lalu klik Form Baru.

Mengisi nama form dan memilih list

1. Di menu Konten, isi judul form. Di menu Konfirmasi, atur email pengirim dan Subyek-nya.

2. Gulir ke bagian Fields, klik Tambah Fields, lalu buat field bernama WhatsApp Number dengan tipe Text atau Phone Number.

Menambah field WhatsApp Number di KIRIM.EMAIL

1. Ubah Optional menjadi Required supaya wajib diisi, lalu klik Save.

Mengubah field menjadi Required

Langkah 3: Ambil kode HTML form

1. Buka kembali form tersebut lewat Sunting » Edit.

2. Gulir ke bagian Publish, klik menu HTML, lalu nyalakan toggle Use AJAX Form.

Menu Publish, tab HTML, dan toggle Use AJAX Form

1. Salin seluruh kode HTML yang muncul, lalu simpan kembali form.

Menyalin kode HTML form

Toggle Use AJAX Form wajib menyala. WatZap menahan pengiriman form biasa sebentar untuk membaca isian pengunjung, jadi form KIRIM.EMAIL harus mengirim datanya sendiri lewat AJAX supaya kontak tetap masuk ke list KIRIM.EMAIL.

Langkah 4: Pasang form di halaman WordPress

1. Buka Pages » Add New dan beri judul halaman, misalnya "Daftar Sekarang".

2. Tambahkan blok Custom HTML, lalu tempel kode HTML form KIRIM.EMAIL tadi. Jika situs Kamu memakai editor klasik, pindah ke tab Text (bukan Visual), lalu tempel di sana.

3. Klik Publish, lalu salin alamat halaman itu dari address bar browser. Alamat ini dibutuhkan di Langkah 5.

Di halaman situs, form-nya akan tampil kurang lebih seperti ini. Pemilih bendera pada kolom nomor baru muncul setelah opsi kode negara diaktifkan di Langkah 6.

Tampilan form KIRIM.EMAIL di halaman situs

Gunakan halaman yang hanya berisi satu form, dan pastikan halaman bisa dibuka tanpa login. WatZap akan membaca halaman itu untuk mencari form-nya.

Langkah 5: Hubungkan form di WatZap

1. Buka WatZap » Custom Form, lalu klik Add New Form.

Halaman Custom Form berisi daftar integrasi dan tombol Add New Form

1. Panel Tambah Form Baru (Add New Form) terbuka pada Langkah 1 dari 2 · Pilih plugin form. Pilih Form by KIRIM.EMAIL, lalu klik Lanjut (Continue).

Langkah 1 dari 2: memilih plugin form

1. Di Langkah 2 dari 2 · Susun pesannya, tempel alamat halaman form ke kolom URL halaman form (Landing page URL), lalu klik Pindai (Scan).

2. WatZap membaca halaman itu dan menampilkan hasil pindai: Page, Form, dan daftar Fields yang ditemukan. WatZap hanya menerima form yang alamat tujuannya mengarah ke KIRIM.EMAIL. Jika muncul Empty Kirim Email Form, cek lagi apakah kode yang ditempel benar-benar kode dari menu Publish » HTML KIRIM.EMAIL.

3. Pada dropdown Kolom nomor WhatsApp (WhatsApp number field), pilih field yang mewakili kolom WhatsApp Number. Namanya mengikuti kode HTML KIRIM.EMAIL, biasanya diawali subscriber_field_values.

4. Isi Nama integrasi (Integration name), misalnya "Form Daftar KIRIM.EMAIL". Nama ini hanya untuk Kamu sendiri.

Hasil pindai halaman form KIRIM.EMAIL: form #keform, daftar field, dan kolom nomor WhatsApp yang dipilih

Langkah 6: Tulis pesan

Pesan untuk pengirim

Bagian Pesan untuk pengirim (Message to the sender) adalah pesan yang diterima pengunjung setelah mengisi form. Biarkan kanal pada pilihan Regular.

1. Tulis pesan di kolom teks. Tombol B, I, dan S memberi format tebal, miring, dan coret seperti di WhatsApp.

2. Untuk menyapa dengan nama, klik Variabel (Variables) lalu pilih field nama, misalnya {full_name}. Kode itu otomatis diganti dengan nama pengunjung saat dikirim.

3. Jika ingin menyertakan gambar atau file, klik Media, lalu pilih Unggah berkas (Upload file) atau Dari URL (From URL). Format yang didukung: PDF, DOC, PNG, JPG, dan GIF.

Pesan untuk pengirim pada kanal Regular dengan variabel form

Opsional: kirim lewat kanal Official (WABA)

Kanal Official memakai nomor WhatsApp Business API dan hanya bisa mengirim template yang sudah disetujui Meta. Syaratnya: nomor WABA sudah terhubung dan ada template yang disetujui.

Klik Official (WABA), pilih template dari daftar Approved template, lalu isi tiap variabel template dengan field form yang sesuai lewat dropdown select a field. Pratinjau template tampil di bawahnya.

Pesan untuk pengirim pada kanal Official (WABA) dengan template terpilih

Kode negara dan halaman terima kasih

• Nyalakan Tambahkan kode negara pada nomor dari form ini (Add a country code to numbers from this form) jika pengunjung biasanya mengisi nomor lokal seperti 0812xxxxxxx. Biarkan kode negaranya +62 untuk Indonesia. Dengan opsi ini, kolom nomor di form Kamu menampilkan pemilih bendera, dan angka 0 di depan otomatis diganti 62.

• Nyalakan Alihkan setelah form dikirim (Redirect after the form is submitted) jika Kamu ingin pengunjung diarahkan ke halaman terima kasih. Isi alamat lengkapnya, misalnya https://situskamu.com/terima-kasih.

Opsi kode negara dan pengalihan setelah form dikirim

Notifikasi ke nomor Kamu sendiri

Nyalakan Beri tahu admin juga (Also notify an admin) jika Kamu ingin tahu setiap ada yang mengisi form.

1. Isi Nomor WhatsApp admin (Admin WhatsApp number) dengan satu nomor, tanpa angka 0 di depan, misalnya 81234567890.

2. Tulis Pesan untuk admin (Message to admin). Pakai variabel nama dan nomor pengunjung supaya Kamu langsung tahu siapa yang mengisi.

Kartu Beri tahu admin juga dengan nomor dan pesan admin

Simpan

Klik Simpan integrasi (Save integration). Halaman dimuat ulang dan muncul notifikasi Integrasi disimpan. Integrasi baru langsung aktif dan tampil di daftar Custom Form.

Untuk mengubah atau menghapus integrasi nanti, klik menu titik tiga di ujung baris, lalu pilih Ubah integrasi (Edit integration) atau Hapus (Delete). Untuk berhenti mengirim sementara, matikan saja toggle Status.

Menu titik tiga di baris integrasi: Ubah integrasi dan Hapus

Langkah 7: Uji coba

1. Buka halaman form di situs Kamu lewat browser, seperti pengunjung biasa.

2. Isi form dengan nomor WhatsApp Kamu sendiri, lalu klik tombol kirim.

3. Dalam beberapa detik, pesan yang Kamu tulis di Langkah 6 masuk ke WhatsApp Kamu, dan kontak Kamu muncul di list KIRIM.EMAIL. Jika notifikasi admin dinyalakan, nomor admin juga menerima pesan.

Kalau pesan tidak masuk, cek satu per satu:

• Toggle Use AJAX Form di KIRIM.EMAIL menyala, dan kode HTML yang ditempel adalah kode yang disalin setelah toggle itu menyala.

• Di WatZap » WhatsApp Numbers, nomor pengirim berstatus Tersambung dan Rotasi menyala.

• Jika situs Kamu memakai plugin cache, bersihkan cache halaman lalu coba lagi.

• Masih gagal? Lihat Solusi Kendala Kirim Pesan via API.

Lihat juga: Integrasi dengan WPForms dan Integrasi dengan Contact Form 7.