ส่งข้อความรหัสส่วนลดให้กับลูกค้าผ่านป๊อปอัป - บทช่วยสอน - (WSForm, Twilio, Oxygen)

เผยแพร่แล้ว: 2022-07-22

ในบทช่วยสอนนี้ เราจะสร้างป๊อปอัปที่รวบรวมหมายเลขโทรศัพท์และที่อยู่อีเมลของลูกค้าเพื่อสร้างรายการการตลาด SMS และอีเมลสำหรับร้านค้า WooCommerce ของเรา เมื่อส่ง เราจะส่งข้อความถึงพวกเขาด้วยรหัสคูปองส่วนลด 10% และเพิ่มข้อมูลนี้ในโปรไฟล์ผู้ใช้ของพวกเขา

isotropic-2022-07-20-at-17-54-16

ในการทำเช่นนี้ เราจะใช้ WSForm เพื่อสร้างแบบฟอร์ม ผสานรวมกับ Twilio และเรียกใช้การสร้างคูปองของเรา เราจะใช้ Oxygen Builder สำหรับป๊อปอัปและการจัดรูปแบบโดยรวม และเราจะใช้ ACF Pro เพื่อจัดเก็บอีเมลทางการตลาดและหมายเลขโทรศัพท์ (ควบคู่ไปกับข้อมูลที่เลือกรับ) ในโปรไฟล์ผู้ใช้

โลโก้ผู้สร้างออกซิเจน

หลักสูตรการสร้างออกซิเจน - เร็ว ๆ นี้!

หลักสูตร Oxygen Builder Mastery จะนำคุณตั้งแต่เริ่มต้นจนถึงมืออาชีพ - รวมโมดูล ACF, MetaBox & WooCommerce

รับการแจ้งเตือนการเปิดตัว & ส่วนลด

ขั้นแรก มาตั้งค่าแบบฟอร์มกันก่อน ซึ่งจะเป็นแบบฟอร์มสองขั้นตอน โดยมุ่งเป้าไปที่การรวบรวมอีเมลก่อนแล้วจึงรวบรวมหมายเลขโทรศัพท์ ด้วยสิ่งนี้ เราสามารถสร้างรายการแยกกันสองรายการเพื่อใช้สำหรับการตลาดทาง SMS และการตลาดผ่านอีเมล

ฉันกำลังแบ่งออกเป็นสองขั้นตอนซึ่งหวังว่าจะเพิ่มอัตราการแปลงเมื่อมีคนป้อนอีเมล พวกเขามีโอกาสน้อยที่จะละทิ้งแบบฟอร์มเมื่อนำเสนอด้วยการป้อนข้อความอื่น

อันดับแรก เราเพิ่ม 2 แท็บ แท็บหนึ่งสำหรับอีเมล และอีกแท็บสำหรับหมายเลขโทรศัพท์

isotropic-2022-07-20-at-16-38-18

แท็บแรกมีอินพุตอีเมล ควบคู่ไปกับปุ่มดำเนินการต่อที่แสดงขั้นตอนต่อไปของแบบฟอร์มเมื่อคลิก

isotropic-2022-07-20-at-16-39-25

ใต้แท็บการตั้งค่าขั้นสูงสำหรับช่องใส่อีเมล เราได้เพิ่มรูปแบบนิพจน์ทั่วไปที่จะตรวจสอบความถูกต้องของอีเมล

แท็บถัดไปซับซ้อนกว่าเล็กน้อย

ที่นี่ เรารวบรวมหมายเลขโทรศัพท์ของผู้ใช้ นี้ใช้ฟิลด์หมายเลขโทรศัพท์ในตัวและรวมถึงการเลือกระหว่างประเทศ

อย่างไรก็ตาม มีสามฟิลด์เพิ่มเติม ทั้งข้อความคูปองและฟิลด์ยินยอมวันที่และเวลาจะถูกซ่อนจากผู้ใช้ส่วนหน้าและเติมข้อมูลแบบไดนามิก ช่องความยินยอมเป็นช่องทำเครื่องหมายบังคับที่ต้องเลือกเพื่อให้ผู้ใช้ส่งแบบฟอร์มได้

isotropic-2022-07-20-at-16-40-27

ฟิลด์ยินยอมวันที่จะเติมทั้งวันที่และเวลาโดยใช้ JavaScript เมื่อส่งแบบฟอร์ม ข้อมูลนี้จะถูกเพิ่มลงในฟิลด์ ACF ซึ่งแสดงช่วงเวลาที่พวกเขาใช้จะถูกส่งแบบฟอร์มและได้รับความยินยอม สิ่งนี้มีประโยชน์ในการพิสูจน์ว่านี่คือผู้ใช้ "จริง" หากฉันพยายามส่งออกข้อมูลไปยังแพลตฟอร์มการตลาดผ่าน SMS หรืออีเมล

isotropic-2022-07-20-at-16-43-37

การป้อนข้อความคูปองยังถูกซ่อนจากผู้ใช้อีกด้วย ฟิลด์นี้สร้างคูปองแบบไดนามิกที่รวมชื่อที่แสดงของผู้ใช้และสตริงข้อความที่สร้างแบบสุ่ม เราจะใช้สิ่งนี้เพื่อสร้างคูปองที่กำหนดให้กับที่อยู่อีเมลที่ส่งใน WooCommerce โดยอัตโนมัติ

isotropic-2022-07-20-at-16-44-51
ทำให้รหัสชอบ: james-d9sa249a

ปุ่มส่งมี HTML อยู่ในนั้น และเราจะทบทวนสิ่งนี้เมื่อจัดรูปแบบแบบฟอร์มโดยใช้ Oxygen และตัวตรวจจับที่เลือก ณ ตอนนี้ นี่คือลักษณะของแบบฟอร์มที่ส่วนหน้า:

isotropic-2022-07-20-at-16-47-01
แท็บ 1
isotropic-2022-07-20-at-16-47-42
แท็บ 2

ตอนนี้ฟอร์มกำลังรวบรวมข้อมูลทั้งหมดที่เราต้องการแล้ว มาสร้างการดำเนินการส่งกัน นี่คือการดำเนินการที่เกิดขึ้นเมื่อผู้ใช้ส่งแบบฟอร์ม

isotropic-2022-07-20-at-16-48-23

เมื่อส่ง มี 4 สิ่งเกิดขึ้น ตามลำดับที่แสดงด้านบน

ขั้นแรกจะเพิ่มคูปองที่สร้างขึ้นโดยอัตโนมัติในฟิลด์ที่กล่าวถึงข้างต้นไปยัง WooCommerce

จากนั้นจะแสดงข้อความให้ผู้ใช้เห็นว่าควรได้รับข้อความที่มีรหัสภายในไม่กี่นาที

จากนั้นเมื่อใช้การรวม WSForm Twilio มันจะส่งข้อความรหัสไปยังหมายเลขโทรศัพท์ที่ป้อนระหว่างการส่ง

สุดท้าย จะอัปเดตข้อมูลผู้ใช้ในโปรไฟล์ผู้ใช้ WordPress โดยเพิ่มทั้งหมายเลขโทรศัพท์และอีเมลลงในฟิลด์ที่กำหนดเองที่สร้างด้วย ACF

การเพิ่มคูปองไปยัง WooCommerce ทำได้โดยใช้การดำเนินการส่ง "เรียกใช้ WordPress hook" ที่สร้างขึ้นใน WSForm และ PHP ที่กำหนดเอง

<?php // เพิ่มตัวกรอง add_filter("prog_add_coupon_form", "iso_add_coupon", 10, 2); // ฟังก์ชันฟังก์ชันตัวกรอง iso_add_coupon($form, $submit) {// ตั้งค่าเมตาคีย์สำหรับฟิลด์ ID 123 (เปลี่ยนเป็น ID ฟิลด์ของคุณ) $wsf_autocode = "field_1"; $wsf_useremail = "field_4"; $wsf_userphone = "field_5"; $coupon_code = $submit->meta[$wsf_autocode]["value"]; $amount = "10"; // จำนวนเงิน $discount_type = "fixed_cart"; // ประเภท: fixed_cart, เปอร์เซ็นต์, fixed_product, percent_product $coupon = [ "post_title" => $coupon_code, "post_content" => "", "post_status" => "publish", "post_author" => 1, "post_type" => "shop_coupon", ]; $new_coupon_id = wp_insert_post($คูปอง); // เพิ่ม meta update_post_meta($new_coupon_id, "discount_type", $discount_type); update_post_meta($new_coupon_id, "coupon_amount", $amount); update_post_meta($new_coupon_id, "individual_use", "ไม่"); 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", "ใช่"); update_post_meta($new_coupon_id, "free_shipping", "ไม่"); $user_email_res = $submit->meta[$wsf_useremail]["value"]; // อีเมลที่จะเพิ่ม update_post_meta($new_coupon_id, "customer_email", $user_email_res); }

รหัสนี้เพิ่มคูปอง WooCommerce โดยทางโปรแกรมจากรหัสที่สร้างขึ้นในฟิลด์ WSform

isotropic-2022-07-20-at-17-01-39
มันถูกเพิ่มลงใน WordPress โดยใช้ WPCodeBox ซึ่งเป็นเครื่องมือจัดการข้อมูลโค้ด

เมื่อส่งแบบฟอร์ม รหัสทั้งหมดนี้จะรัน

เราได้รับอีเมล โทรศัพท์ และรหัสคูปองจากการส่ง WSForm ของเรา จากนั้นเราจะสร้างคูปอง

ในตัวอย่างนี้ คูปองเสนอส่วนลด $10 ต่อตะกร้า ใช้ได้ครั้งเดียว และจำกัดเฉพาะอีเมลที่ส่งในแบบฟอร์ม

isotropic-2022-07-20-at-17-03-25
นี่คือคูปองที่เพิ่มเข้ามา ในตัวอย่างนี้ "ผู้ดูแลระบบ" คือชื่อที่แสดงของผู้ใช้ของฉัน โปรดสังเกตว่าคูปองนี้จำกัดให้ ใช้กับ อีเมลที่ส่งมาเท่านั้น

หลังจากเพิ่มคูปองของเราใน WooCommerce และกำหนดให้กับอีเมลที่ส่งมา (ซึ่งทำเพื่อลดการฉ้อโกง) เราจะแสดงข้อความแสดงความสำเร็จให้กับผู้ใช้:

isotropic-2022-07-20-at-16-58-37

สังเกตไดนามิก #field(5) ที่ใช้ในการปรับแต่งข้อความ

isotropic-2022-07-20-at-16-59-42

จากนั้นเราก็ส่งข้อความไปยังผู้ใช้ สิ่งนี้ใช้การรวม Twilio ที่ WSForm นำเสนอและตั้งค่าได้ง่าย

ขั้นแรก เราติดตั้ง addon และเชื่อมต่อกับบัญชี Twilio โดยวางในคีย์ API ของเรา

isotropic-2022-07-20-at-17-05-09
รับคีย์ API
isotropic-2022-07-20-at-17-06-20
เพิ่มในการตั้งค่า WSForm

ตอนนี้ กลับมาที่การดำเนินการส่งแบบฟอร์ม เรากำหนดค่าข้อความ

เราเลือกหมายเลขจาก เชื่อมต่อช่องยินยอม และเพิ่มหมายเลขโทรศัพท์แบบไดนามิกเพื่อส่งข้อความถึง ตัวข้อความเองก็ถูกสร้างขึ้นแบบไดนามิกเช่นกัน โดยรวมข้อความต้อนรับแบบคงที่และคูปองแบบไดนามิก ซึ่งสร้างขึ้นจากฟิลด์ที่ซ่อนอยู่ซึ่งสร้างขึ้นโดยอัตโนมัติ

isotropic-2022-07-20-at-17-07-35

นอกจากนี้เรายังสามารถเพิ่ม GIF และสื่อได้หากต้องการ

สุดท้าย เราจัดเก็บข้อมูลที่ส่งมาในที่ที่มีประโยชน์ ในสถานการณ์นี้ ฉันใช้ ACF pro เพื่อสร้างฟิลด์ในโปรไฟล์ผู้ใช้

isotropic-2022-07-20-at-17-11-37

การดำเนินการขั้นสุดท้ายใช้ส่วนเสริมการจัดการผู้ใช้ WSForm เพื่อเพิ่มข้อมูลนี้ลงในฟิลด์ที่กำหนดเองภายใต้โปรไฟล์ผู้ใช้

isotropic-2022-07-20-at-17-10-39
isotropic-2022-07-20-at-17-12-17

อย่างไรก็ตาม คุณอาจส่งข้อมูลนี้ออกไปที่ GetResponse หรือแพลตฟอร์มการตลาดอื่นได้ดีกว่าโดยใช้การผสานการทำงานหลายอย่างของ WSForm:

ตอนนี้ฟังก์ชันและกลไกโดยรวมของแบบฟอร์มใช้งานได้แล้ว มาสร้างป๊อปอัปของเรา โดยนำแบบฟอร์มการเก็บข้อมูลการตลาดนี้ไปที่ส่วนหน้าของเว็บไซต์

Oxygen Builder และ WSForm เป็นส่วนผสมที่ยอดเยี่ยม เมื่อใช้ตัวสร้าง คุณจะส่งแบบฟอร์มได้ง่าย และจัดรูปแบบได้ง่ายยิ่งขึ้นไปอีก

ใช้ส่วนที่ใช้ซ้ำได้ (ซึ่งช่วยให้ฉันสามารถแทรกป๊อปอัปนี้ได้ทุกที่ที่ฉันต้องการ) ฉันจะเพิ่มในป๊อปอัปก่อน เพิ่มแบบฟอร์ม และสุดท้ายจัดรูปแบบ

ฉันใช้ Modal คอลัมน์ และองค์ประกอบอื่นๆ เพื่อสร้างป๊อปอัป 50% 50% แบบคลาสสิก

isotropic-2022-07-20-at-17-32-27

ฉันได้แทรกแบบฟอร์มโดยใช้รหัสย่อ

isotropic-2022-07-20-at-17-33-18

มันทริกเกอร์ความตั้งใจออก

ตอนนี้ ทั้งหมดที่ฉันต้องทำคือจัดรูปแบบ WSForm ฉันสามารถทำได้โดยใช้เครื่องมือปรับแต่งในตัว แต่มันค่อนข้างจำกัด ฉันยังสามารถเขียน CSS ที่กำหนดเองได้ แต่นั่นไม่ใช่ภาพ ตัวเลือกที่สามคือการใช้ตัวตรวจจับตัวเลือกในตัวที่มาพร้อมกับ Oxygen Builder และจัดแต่งทรงผมโดยใช้ตัวแก้ไข นี่คือสิ่งที่คนจำนวนมากไม่ได้ใช้ประโยชน์เพียงเพราะไม่ได้เปิดใช้งานโดยค่าเริ่มต้น ไปที่หน้าการตั้งค่าของคุณสำหรับ Oxygen และเปิดใช้งานตัวตรวจจับตัวเลือก

isotropic-2022-07-20-at-17-25-06

ตอนนี้ คลิกเข้าไปในองค์ประกอบรหัสย่อ และคลิก "ตัวตรวจจับตัวเลือก" ที่ด้านล่าง

isotropic-2022-07-20-at-17-37-19

ใช้เพื่อคลิกเข้าไปในอินพุตและปุ่มต่างๆ จัดแต่งทรงผมโดยใช้แท็บขั้นสูง

isotropic-2022-07-20-at-17-37-54
สไตล์โดยใช้ WSF ID และองค์ประกอบภายใน

ฉันใช้องค์ประกอบรหัสสั้นแทนองค์ประกอบออกซิเจนในตัวแบบฟอร์ม WS เพราะฉันสามารถปิดใช้งานรหัสย่อแล้วแสดงผลอีกครั้ง นำฉันกลับไปที่แท็บดั้งเดิมของแบบฟอร์ม หากฉันแก้ไข WSForm เอง ฉันสามารถแสดงรหัสย่อใหม่ได้โดยไม่ต้องโหลดตัวสร้างใหม่

isotropic-2022-07-20-at-17-40-51
ปุ่มจัดรูปแบบใน Oxygen

เมื่อใช้ตัวตรวจจับ ฉันสามารถกำหนดเป้าหมายส่วน HTML ใดๆ ก็ได้ ทำให้ฉันสามารถแก้ไขช่วงที่เพิ่มในปุ่มที่สอง ทำให้แบบอักษรมีขนาดเล็กลง

และเช่นเดียวกัน เราได้สร้างแบบฟอร์มที่กำหนดเองสำหรับไซต์ WooCommerce ของเราที่:

  1. ปรากฏขึ้นเมื่อตั้งใจออกโดยเสนอส่วนลด $10
  2. รวบรวมอีเมลและหมายเลขโทรศัพท์ใน 2 ขั้นตอนโดยใช้ WSForm
  3. กำหนดและกำหนดสไตล์ตามแนวทางของแบรนด์โดยใช้ Oxygen
  4. เพิ่มรหัสคูปองที่ไม่ซ้ำกันซึ่งกำหนดให้กับอีเมลที่ส่งใน WooCommerce
  5. ส่งข้อความรหัสคูปองไปยังหมายเลขโทรศัพท์ที่ส่งมา
  6. ส่งข้อมูลนี้ไปยังโปรไฟล์ผู้ใช้ (ฟิลด์กำหนดเองที่เพิ่มด้วย ACF pro)
isotropic-2022-07-20-at-17-45-12
รหัสซึ่งสร้างโดย WSForm และเพิ่มใน WooCommerce ส่งข้อความไปยังหมายเลขที่ฉันส่งมา