Integrasi dengan Elementor
Last updated
Last updated
Dengan mengintegrasikan Elementor dengan WatZap Official API, Kamu bisa dengan mudah mengirimkan pesan notifikasi kepada user yang melakukan submit pada Form yang telah Kamu buat.
Kamu juga bisa membuat pesan notifikasi kepada diri Kamu sendiri setiap kali ada user yang berhasil melakukan submit Form.
Untuk melakukan integrasi antara Elementor dengan WatZap, Kamu bisa melihatnya pada video berikut ini.
Jadi untuk melakukan integrasi antara Elementor dengan WatZap, Kamu perlu meng-install terlebih dahulu plugin Elementor pada WordPress.
Selanjutnya Kamu login di app.watzap.id menggunakan akun WatZap yang Kamu miliki. Kemudian Kamu masuk ke menu API Keys & Apps.
Langkah selanjutnya pastikan assign minimal 1 nomor yang dihubungkan ke API. Nomor itulah yang nantinya akan digunakan untuk mengirimkan pesan notifikasi.
Kamu juga perlu download dan install plugin WatZap for WordPress. Untuk download plugin WatZap for WordPress, Kamu bisa klik pada bagian “Download WordPress API Plugin“.
Untuk langkah selanjutnya, Kamu perlu memasang plugin WatZap di WordPress. Untuk cara pasangnya sama seperti memasang plugin pada umumnya, dimana Kamu tinggal import saja file plugin WatZap yang sudah di-download sebelumnya.
Setelah plugin WatZap terpasang di WordPress Kamu, maka akan muncul menu WatZap. Untuk mengintegrasikan WatZap ke Elementor. Kamu bisa klik menu tersebut.
Akan muncul tampilan seperti ini. Pada bagian API Key, silahkan isi dengan API Key WatZap yang bisa Kamu temukan pada menu API Keys & Apps di WatZap.
Jika sudah diisi, klik Connect Now.
Maka akan muncul notifikasi bahwa WatZap telah berhasil terhubung.
Nah, setelah semua persiapan sudah beres, sekarang saatnya membuat Form Elementor yang terhubung dengan WatZap. Caranya itu Kamu klik menu Pages, kemudian klik tombol “Add New“.
Silahkan Kamu isi nama dari Pages tersebut pada bagian ini.
Kemudian Kamu juga bisa mengatur Template-nya pada bagian ini. Untuk Template ini bisa Kamu sesuaikan dengan keinginan.
Jika sudah, klik Publish terlebih dahulu.
Nah, selanjutnya kita masuk ke halaman Elementor-nya. Silahkan klik tombol “Edit with Elementor“.
Nah, pada bagian ini, Kamu bisa klik icon “+”.
Kemudian pilih yang 1 Structure.
Pada menu sebelah kiri, akan ada pilihan WatZap Form. Kamu bisa drag and drop WatZap Form tersebut ke body Elementor yang sudah dibuat sebelumnya.
Akan muncul Form yang sudah dimodifikasi. Kamu bisa menyesuaikan bentuk Form tersebut sesuai selera.
Setelah mengatur bentuk Form, langkah selanjutnya Kamu perlu mengatur isi Form. Caranya klik pada bagian Form Settings. Kemudian akan ada beberapa menu yang bisa Kamu atur.
Keterangan:
Form Title: Judul dari Form yang Kamu buat. Jika Kamu tidak ingin menggunakan judul pada Form tersebut, bisa geser bagian Show/Hide.
Success Message: Pesan yang akan muncul ketika user klik tombol Submit.
Error Message: Pesan yang akan muncul ketika ada isian yang tidak sesuai dengan formatnya.
WhatsApp Message: Merupakan pesan WhatsApp yang akan dikirim ke user yang berhasil melakukan Submit Form.
Variable: Menu ini bisa Kamu gunakan untuk menambahkan variable pada WhatsApp Message yang dibuat, entah itu menambahkan Nama si pengisi Form, Nomor WhatsApp-nya, atau Email miliknya.
Setelah mengatur Form Settings, selanjutnya Kamu masuk ke bagian Name.
Pada bagian ini, Kamu bisa mengatur Label dan Type dari bagian Name. Silahkan sesuaikan dengan keinginan Kamu. Nantinya tampilan Field Name yang ada di Form akan berubah sesuai dengan yang Kamu ubah.
Untuk Field WhatsApp Number juga bisa Kamu ubah. Caranya masuk ke bagian WhatsApp Number.
Pada bagian ini, Kamu bisa mengatur Label dan Type dari bagian WhatsApp Number. Silahkan sesuaikan dengan keinginan Kamu. Nantinya tampilan Field WhatsApp Number yang ada di Form akan berubah sesuai dengan yang Kamu ubah.
Begitupun juga pada field Email, Message, dan Submit Button.
Nah, pada Field Submit Button, Kamu bisa menambahkan Link Redirect setelah user berhasil melakukan Submit Form. Jadi setelah user klik Submit, Kamu bisa mengarahkan mereka ke website atau link lain sesuai keinginan.
Jika sudah mengatur semuanya, silahkan Kamu klik tombol “Update“.
Untuk melihat hasil Form yang sudah diubah, Kamu bisa klik tombol “Preview Changes“.
Silahkan isi data pada Form tersebut, dan klik tombol Submit untuk mengetes hasil notifikasi yang Kamu kirimkan.