Mengirim SMS Kode Diskon Kepada Pelanggan melalui Popup - Tutorial - (WSForm, Twilio, Oxygen)

Diterbitkan: 2022-07-22

Dalam tutorial ini, kita akan membuat popup yang mengumpulkan nomor telepon dan alamat email pelanggan untuk membuat daftar pemasaran SMS dan email untuk toko WooCommerce kita. Saat pengiriman, kami akan mengirimi mereka kode kupon diskon 10% dan menambahkan data ini ke profil pengguna mereka.

Untuk melakukan ini, kami akan menggunakan WSForm untuk membuat formulir, berintegrasi dengan Twilio dan memicu pembuatan kupon kami. Kami akan menggunakan Oxygen Builder untuk keseluruhan popup dan gaya bentuk. Dan kami akan menggunakan ACF Pro untuk menyimpan email pemasaran dan nomor telepon (bersama dengan data keikutsertaan) di profil pengguna.

Kursus Pembangun Oksigen - Segera Hadir!

Kursus Penguasaan Pembangun Oksigen akan membawa Anda dari pemula hingga profesional - termasuk modul ACF, MetaBox & WooCommerce.

Dapatkan Pemberitahuan Peluncuran & Diskon

Pertama, mari kita siapkan formulirnya. Ini akan menjadi formulir dua langkah, yang pertama-tama ditujukan untuk mengumpulkan email, dan kemudian mengumpulkan nomor telepon. Dengan itu, kita dapat membuat dua daftar terpisah untuk digunakan untuk pemasaran melalui SMS, dan pemasaran melalui email.

Saya membaginya menjadi dua langkah yang diharapkan akan meningkatkan tingkat konversi karena begitu seseorang memasukkan email, mereka cenderung tidak meninggalkan formulir ketika disajikan dengan input teks lain.

Pertama, kami menambahkan 2 tab, satu untuk email dan satu untuk nomor telepon.

Tab pertama memiliki input email, ditambah dengan tombol lanjutkan yang menampilkan langkah selanjutnya dari formulir saat diklik.

Di bawah tab pengaturan lanjutan untuk bidang input email, kami telah menambahkan pola ekspresi reguler yang akan memvalidasi email.

Tab berikutnya sedikit lebih rumit.

Di sini, kami mengumpulkan nomor telepon pengguna. Ini menggunakan bidang nomor telepon bawaan, dan termasuk pilihan internasional.

Namun, ada tiga bidang tambahan. Bidang persetujuan teks kupon dan tanggal waktu disembunyikan dari pengguna front end, dan diisi secara dinamis. Bidang persetujuan adalah kotak centang wajib yang harus dipilih agar pengguna dapat mengirimkan formulir.

Bidang persetujuan tanggal diisi dengan cap tanggal dan waktu menggunakan JavaScript. Saat formulir dikirimkan, informasi ini ditambahkan ke bidang ACF, menunjukkan momen tertentu yang mereka gunakan untuk mengirimkan formulir dan menyetujuinya. Ini berguna ketika membuktikan bahwa ini adalah pengguna "asli" jika saya mencoba mengekspor data ke platform pemasaran SMS atau email.

Masukan teks kupon juga disembunyikan dari pengguna. Bidang ini menghasilkan kupon dinamis yang menggabungkan nama tampilan pengguna dan string teks yang dibuat secara acak. Kami akan menggunakan ini untuk secara otomatis membuat kupon yang ditetapkan ke alamat email yang dikirimkan di WooCommerce.

isotropik-2022-07-20-at-16-44-51 — Ini membuat kode seperti: james-d9sa249a

Tombol kirim memiliki beberapa HTML di dalamnya, dan kami akan meninjaunya kembali saat menata formulir menggunakan Oksigen dan detektor yang dipilih. Sampai sekarang, inilah bentuk yang terlihat di frontend:

isotropik-2022-07-20-at-16-47-01 — Tab 1

isotropik-2022-07-20-at-16-47-42 — Tab 2

Sekarang formulir mengumpulkan semua data yang kita butuhkan, mari buat beberapa tindakan pengiriman. Ini adalah tindakan yang diambil saat pengguna mengirimkan formulir.

Pada penyerahan, 4 hal terjadi, dalam urutan yang ditampilkan di atas.

Pertama, ia menambahkan kupon yang dihasilkan secara otomatis di bidang yang disebutkan di atas ke WooCommerce.

Kemudian, ini menunjukkan kepada pengguna pesan bahwa mereka akan mengharapkan teks dengan kode dalam beberapa menit.

Kemudian, menggunakan integrasi WSForm Twilio, kode tersebut akan dikirim melalui SMS ke nomor telepon yang dimasukkan saat pengiriman.

Terakhir, ini memperbarui informasi pengguna di profil pengguna WordPress, menambahkan nomor telepon dan email ke bidang khusus yang dibuat dengan ACF.

Menambahkan kupon ke WooCommerce dilakukan dengan menggunakan tindakan pengiriman "jalankan WordPress hook" yang dibangun ke dalam WSForm dan beberapa PHP khusus.

<?php // Tambahkan filter add_filter("prog_add_coupon_form", "iso_add_coupon", 10, 2); // Filter function function iso_add_coupon($form, $submit) { // Tetapkan kunci meta untuk ID bidang 123 (Ubah ini ke ID bidang Anda) $wsf_autocode = "field_1"; $wsf_useremail = "bidang_4"; $wsf_userphone = "field_5"; $coupon_code = $kirim->meta[$wsf_autocode]["nilai"]; $jumlah = "10"; // Jumlah $discount_type = "keranjang_tetap"; // Ketik: kereta_tetap, persen, produk_tetap, persen_produk $kupon = [ "post_title" => $kode_kupon, "post_content" => "", "post_status" => "publish", "post_author" => 1, "post_type" => "kupon_toko", ]; $new_coupon_id = wp_insert_post($kupon); // Tambahkan meta update_post_meta($new_coupon_id, "discount_type", $discount_type); update_post_meta($new_coupon_id, "jumlah_kupon", $jumlah); update_post_meta($new_coupon_id, "penggunaan_individu", "tidak"); update_post_meta($new_coupon_id, "usage_limit", "1"); update_post_meta($new_coupon_id, "usage_limit_per_user", "1"); update_post_meta($new_coupon_id, "apply_before_tax", "ya"); update_post_meta($new_coupon_id, "gratis_pengiriman", "tidak"); $user_email_res = $kirim->meta[$wsf_useremail]["nilai"]; // Email yang akan ditambahkan update_post_meta($new_coupon_id, "customer_email", $user_email_res); }

Kode ini secara terprogram menambahkan kupon WooCommerce dari kode yang dihasilkan di bidang WSform.

isotropik-2022-07-20-at-17-01-39 — Itu ditambahkan ke WordPress menggunakan WPCodeBox, alat manajemen cuplikan

Ketika formulir dikirimkan, semua kode ini berjalan.

Kami mendapatkan email, telepon, dan kode kupon dari kiriman WSForm kami. Kami kemudian menghasilkan kupon.

Dalam contoh ini, kupon menawarkan diskon $10 untuk keranjang, dapat digunakan sekali, dan dibatasi untuk email yang dikirimkan dalam formulir.

isotropik-2022-07-20-at-17-03-25 — Berikut kupon yang ditambahkan. Dalam contoh ini "admin" adalah nama tampilan pengguna saya. Perhatikan bahwa kupon dibatasi *hanya untuk digunakan dengan* email yang dikirimkan.

Setelah menambahkan kupon kami ke WooCommerce dan menetapkannya ke email yang dikirimkan (ini dilakukan untuk mengurangi penipuan), kami menampilkan pesan sukses kepada pengguna:

Perhatikan #field(5) dinamis yang digunakan untuk mempersonalisasi pesan.

Kemudian, kami benar-benar mengirim teks ke pengguna. Ini menggunakan integrasi Twilio yang ditawarkan WSForm, dan mudah diatur.

Pertama, kami menginstal addon, dan menghubungkannya ke akun Twilio dengan menempelkan kunci API kami.

isotropik-2022-07-20-at-17-05-09 — Dapatkan kunci API

isotropik-2022-07-20-at-17-06-20 — Tambahkan ke pengaturan WSForm

Sekarang, kembali di bawah tindakan pengiriman formulir, kami mengonfigurasi pesan teks.

Kami memilih nomor dari, menghubungkan bidang persetujuan kami, dan secara dinamis menambahkan nomor telepon untuk mengirim pesan. Pesan itu sendiri juga dibuat secara dinamis, menggabungkan pesan selamat datang statis dan kupon dinamis, yang diisi dari bidang tersembunyi yang dibuat secara otomatis.

Kami juga dapat menambahkan GIF dan media jika diinginkan.

Akhirnya, kami menyimpan data yang dikirimkan di suatu tempat yang berguna. Dalam situasi ini, saya menggunakan ACF pro untuk membuat bidang di profil pengguna.

Tindakan terakhir menggunakan addon Manajemen Pengguna WSForm untuk menambahkan data ini ke bidang khusus di bawah Profil Pengguna.

Namun, Anda mungkin lebih baik mengirimkan informasi ini ke GetResponse atau platform pemasaran lain menggunakan banyak integrasi WSForm:

Sekarang setelah keseluruhan fungsionalitas dan mekanisme formulir berfungsi, mari kita buat popup kita, membawa formulir pengambilan data pemasaran ini ke bagian depan situs web.

Oxygen Builder dan WSForm merupakan kombinasi yang hebat. Dengan menggunakan pembuat, mudah untuk mengirimkan formulir, dan bahkan lebih mudah untuk menatanya.

Menggunakan bagian yang dapat digunakan kembali (yang memungkinkan saya memasukkan pop up ini di mana pun saya mau), pertama-tama saya akan menambahkan popup, menambahkan formulir, dan akhirnya menatanya.

Saya menggunakan Modal, kolom, dan beberapa elemen lain untuk membuat popup klasik 50% 50%.

Saya telah memasukkan formulir menggunakan kode pendek.

Ini memicu niat keluar.

Sekarang, yang perlu saya lakukan adalah menata WSForm. Saya bisa melakukan ini dengan menggunakan penyesuai bawaan, tapi itu agak terbatas. Saya juga bisa menulis CSS khusus, tetapi itu bukan visual. Opsi ketiga adalah menggunakan detektor pemilih bawaan yang disertakan dengan Oxygen Builder, dan penataan gaya menggunakan editor. Ini adalah sesuatu yang tidak dimanfaatkan oleh banyak orang hanya karena tidak diaktifkan secara default. Jadi masuk ke halaman pengaturan Anda untuk Oksigen, dan aktifkan detektor pemilih.

Sekarang, klik elemen kode pendek, dan klik "detektor pemilih" di bagian bawah.

Gunakan untuk mengeklik input dan tombol, menata gaya menggunakan tab Advanced.

isotropik-2022-07-20-at-17-37-54 — Gaya menggunakan ID WSF, dan elemen di dalamnya.

Saya menggunakan elemen kode pendek alih-alih elemen Oksigen bentuk WS bawaan karena saya dapat menonaktifkan kode pendek, dan kemudian merender ulang, membawa saya kembali ke tab asli formulir. Jika saya mengedit WSForm itu sendiri, saya dapat merender kode pendek tanpa perlu memuat ulang pembuatnya.

isotropik-2022-07-20-at-17-40-51 — Tombol bentuk styling di Oxygen

Dengan menggunakan detektor, saya dapat menargetkan setiap bagian HTML, memungkinkan saya untuk mengedit rentang yang ditambahkan di tombol kedua, membuat font lebih kecil.

Dan begitu saja, kami telah membuat formulir khusus untuk situs WooCommerce kami yang:

Muncul saat niat keluar, menawarkan diskon $10
Mengumpulkan email dan nomor telepon dalam 2 langkah menggunakan WSForm
Dikustomisasi dan ditata sesuai dengan pedoman merek menggunakan Oxygen
Menambahkan kode kupon unik yang ditetapkan ke email yang dikirimkan di WooCommerce
Kirim kode kupon ke nomor telepon yang dikirimkan
Mengirim data ini ke profil pengguna (bidang khusus ditambahkan dengan ACF pro)

isotropik-2022-07-20-at-17-45-12 — Kode, yang dihasilkan oleh WSForm dan ditambahkan ke WooCommerce, dikirim melalui SMS ke nomor yang saya kirimkan.