# Integrasi dengan Elementor 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. Sebelum integrasi dengan WatZap, pastikan Wordpress Kamu menggunakan PHP versi 7.4. Untuk melakukan integrasi antara Elementor dengan WatZap, Kamu bisa melihatnya pada video berikut ini. {% embed url="" %} Jadi untuk melakukan integrasi antara Elementor dengan WatZap, Kamu perlu meng-install terlebih dahulu plugin **Elementor** pada **WordPress**. ![Install Elementor](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F8jdVpAgNxdr5CCnpXocr%2FInstall-Elementor.jpg?alt=media\&token=bfadb163-1d9f-48df-a398-b2effda38a9a) Selanjutnya Kamu login di [**app.watzap.id**](https://app.watzap.id/) menggunakan akun WatZap yang Kamu miliki. Kemudian Kamu masuk ke menu **API Keys & Apps**. ![Klik Menu API Keys and Apps](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FkFo8XKYAPizSmV7xdmFP%2FKlik-Menu-API-Keys-and-Apps.jpg?alt=media\&token=554fc0d1-3b5c-4ba2-ae29-8028a9df8f92) Langkah selanjutnya pastikan [**assign minimal 1 nomor yang dihubungkan ke API**](https://help.watzap.id/cara-assign-nomor-whatsapp-untuk-api/). Nomor itulah yang nantinya akan digunakan untuk mengirimkan pesan notifikasi. ![Hubungkan Nomor API](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FRDGtHlhJNG1vdaa7msTX%2FNomor%20API%20Berhasil%20Terhubung.jpg?alt=media\&token=b0b288d0-51d4-41ea-92b3-bc3c87a53f9d) 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**“. ![Download WordPress Plugin](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FusJwCsUuOOER7KxDvEvF%2FDownload%20Wordpress%20API%20Plugin.jpg?alt=media\&token=9bdd2783-ad91-4c6b-a504-8c82c19053b2) 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. ![Install WatZap](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F2fdqMmKZl7WYcSPKbU60%2FInstall-WatZap.jpg?alt=media\&token=734c71de-4990-4cee-af5e-8e016a64eff5) Setelah plugin **WatZap** terpasang di WordPress Kamu, maka akan muncul menu **WatZap**. Untuk mengintegrasikan **WatZap** ke **Elementor**. Kamu bisa klik menu tersebut. ![Pilih Menu WatZap](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FeqaC8KiUcNuB1IHR3Cgk%2FPilih-Menu-WatZap.jpg?alt=media\&token=d5ec2044-4d05-4baa-a650-7bf6825950c7) Akan muncul tampilan seperti ini. Pada bagian **API Key**, silahkan isi dengan [**API Key WatZap**](https://docs.watzap.id/help/integrations/mendapatkan-api-key-di-member-area) yang bisa Kamu temukan pada menu **API Keys & Apps** di WatZap. ![API Key](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FULqvmoMYeuGPNY0SvwwR%2FAPI-Key.jpg?alt=media\&token=e033a6fa-52ea-4724-8fe2-9a2bf8d454f7) Jika sudah diisi, klik **Connect Now**. ![Klik Connect Now](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FR4Vn0oJws5G6abMgoevy%2FKlik%20Connect%20Now.jpg?alt=media\&token=af72dcfa-9012-430a-960d-db64238ef8f5) Maka akan muncul notifikasi bahwa **WatZap** telah berhasil terhubung. ![WatZap Berhasil Terhubung](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fz5v9bVwx7Bx5lW8KbIHE%2FWatZap%20Berhasil%20Terhubung.jpg?alt=media\&token=a77d6f4b-c527-4206-b252-7091bb16954b) 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**“. ![Pages Add New](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fkdj07CqWtxBFQVBXJtSR%2FPages-Add-New.jpg?alt=media\&token=d1ae98b7-1ed6-46a9-ae8c-9c4d74476b6b) Silahkan Kamu isi nama dari **Pages** tersebut pada bagian ini. ![Tambahkan Nama](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fw2jFH6YJyF8W6YmRPffy%2FTambahkan-Nama.jpg?alt=media\&token=2f1bc658-c26e-4e91-bcec-5cc337b773d0) Kemudian Kamu juga bisa mengatur Template-nya pada bagian ini. Untuk **Template** ini bisa Kamu sesuaikan dengan keinginan. ![Atur Template](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FXuZTpLIq2oayj70aOkfN%2FAtur-Template.jpg?alt=media\&token=ab342176-2139-428b-bd6d-1958fa55a4a0) Jika sudah, klik **Publish** terlebih dahulu. ![Publish](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FLj9g8RMgkgCf2nArObLO%2FPublish.jpg?alt=media\&token=6bec9ebc-835a-44b5-bcac-8c97f40eb99b) Nah, selanjutnya kita masuk ke halaman Elementor-nya. Silahkan klik tombol “**Edit with Elementor**“. ![Klik Edit With Elementor](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F88iE4ReBLWdo1KVzJY2P%2FKlik-Edit-With-Elementor.jpg?alt=media\&token=4725d513-0b80-44fa-bf3e-f8fe5fcf79fb) Nah, pada bagian ini, Kamu bisa klik icon **“+”**. ![Pilih Icon +](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FLyUVi9Q29aHm6MF1WcLm%2FPilih-Icon-.jpg?alt=media\&token=a75ecd4e-9b45-45b3-9cad-8f5b8fc16596) Kemudian pilih yang **1 Structure**. ![Pilih 1 Structure](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FblAGEilbQW7cQDY5UkF4%2FPilih-1-Structure.jpg?alt=media\&token=af732ff8-4ac7-4e87-b874-e8e52e7c9bee) Pada menu sebelah kiri, akan ada pilihan **WatZap** **Form**. Kamu bisa *drag and drop* WatZap Form tersebut ke body Elementor yang sudah dibuat sebelumnya. ![Drag and Drop WatZap Form](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FK39wmt2Icm90ckD5DGp0%2FDrag-and-Drop-WatZap-Form.jpg?alt=media\&token=68fc3dd6-4dc0-484b-b791-3e58f97d42a5) Akan muncul **Form** yang sudah dimodifikasi. Kamu bisa menyesuaikan bentuk Form tersebut sesuai selera. ![Atur Layout](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fha0ISFB8zjghJfYrhPyo%2FAtur-Layout.jpg?alt=media\&token=bf289407-ba53-4d12-9abd-bb8d41046c8f) 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. ![Atur Form Settings](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FmB4VpKrv7HO9a3u9NNTu%2FAtur-Form-Settings.jpg?alt=media\&token=ba61f436-ea28-42a8-adbb-86f90e1e258b) **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**. ![Ubah Name](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2F7mpOjakzQDerxiJusQt6%2FUbah-Name.jpg?alt=media\&token=6592affa-ea1d-4f2a-b3a2-0e985e66719c) 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. ![Atur Field Name](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FTn1Qa0RoJelUynNdd2As%2FAtur-Field-Name.jpg?alt=media\&token=af1f5a24-f785-4d80-98ae-35508628d056) Untuk Field WhatsApp Number juga bisa Kamu ubah. Caranya masuk ke bagian **WhatsApp** **Number**. ![Ubah WhatsApp Number](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FEA6XecYayMfG0xHJoKlL%2FUbah-WhatsApp-Number-1.jpg?alt=media\&token=96fcd078-f060-4c1d-8eac-b19107f7fe7a) 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. ![Ubah WhatsApp Number](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FGBMpApaey0scFBVj8gup%2FUbah-WhatsApp-Number.jpg?alt=media\&token=9674dc14-5be4-491d-82fd-4a8c88071486) Begitupun juga pada field **Email**, **Message**, dan **Submit** **Button**. ![Atur Email Message dan Submit](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FCVPh98BTxM34DzqSSRIQ%2FAtur-Email-Message-dan-Submit.jpg?alt=media\&token=3114a3a2-eab0-4ed4-8842-9c69f58b3313) 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. ![Isi Redirect Link](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FVmDLIiNz62uNck7tY6m2%2FIsi-Redirect-Link.jpg?alt=media\&token=cb1877a1-49e9-44c9-a951-e5e52976bcbd) Jika sudah mengatur semuanya, silahkan Kamu klik tombol “**Update**“. ![Klik Update](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FlhKYRGNedkG42PqQV3Es%2FKlik-Update.jpg?alt=media\&token=cceeb5fb-090a-4a8f-97df-1a922d0631ae) Untuk melihat hasil Form yang sudah diubah, Kamu bisa klik tombol “**Preview Changes**“. ![Klik Preview Changes](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2FcbquCJWIljsAzPFPzbuz%2FKlik-Preview-Changes.jpg?alt=media\&token=44927904-9c34-487a-bb53-4b07decbab80) Silahkan isi data pada Form tersebut, dan klik tombol **Submit** untuk mengetes hasil notifikasi yang Kamu kirimkan. ![Test Form](https://4182233851-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5hxDGBLGZN4N69IP4zHp%2Fuploads%2Fs8dGAWXdihxYULL10yTs%2FTest-Form.jpg?alt=media\&token=31329068-abf7-46bf-83eb-71b223dd6ea5)