팝업을 통해 고객에게 할인 코드 문자 보내기 - 자습서 - (WSForm, Twilio, Oxygen)

게시 됨: 2022-07-22

이 튜토리얼에서는 WooCommerce 스토어에 대한 SMS 및 이메일 마케팅 목록을 작성하기 위해 고객 전화번호와 이메일 주소를 수집하는 팝업을 만들 것입니다. 제출 시 10% 할인 쿠폰 코드를 문자로 보내고 이 데이터를 사용자 프로필에 추가합니다.

이를 위해 WSForm을 사용하여 양식을 만들고 Twilio와 통합하고 쿠폰 생성을 트리거합니다. 전체 팝업 및 양식 스타일 지정에 Oxygen Builder를 사용합니다. 그리고 ACF Pro를 사용하여 사용자 프로필에 마케팅 이메일 및 전화번호(데이터 선택과 함께)를 저장합니다.

산소 빌더 과정 - 곧 제공됩니다!

Oxygen Builder Mastery 과정은 ACF, MetaBox 및 WooCommerce 모듈이 포함된 초보자부터 전문가까지 여러분을 안내합니다.

출시 알림 및 할인 받기

먼저 양식을 설정해 보겠습니다. 이것은 먼저 이메일을 수집한 다음 전화번호를 수집하는 것을 목표로 하는 2단계 양식이 될 것입니다. 이를 통해 SMS를 통한 마케팅과 이메일을 통한 마케팅에 사용할 두 개의 별도 목록을 작성할 수 있습니다.

일단 누군가가 이메일을 입력하면 또 다른 텍스트 입력이 표시될 때 양식을 포기할 가능성이 적기 때문에 전환율을 높일 수 있는 두 단계로 나누고 있습니다.

먼저 2개의 탭을 추가합니다. 하나는 이메일용이고 다른 하나는 전화번호용입니다.

첫 번째 탭에는 이메일 입력과 클릭 시 양식의 다음 단계를 표시하는 계속 버튼이 있습니다.

이메일 입력 필드의 고급 설정 탭에서 이메일을 검증하는 정규식 패턴을 추가했습니다.

다음 탭은 조금 더 복잡합니다.

여기에서 사용자 전화번호를 수집합니다. 이것은 기본 제공 전화 번호 필드를 사용하고 국제 선택을 포함합니다.

그러나 세 개의 추가 필드가 있습니다. 쿠폰 텍스트 및 날짜 시간 동의 필드는 모두 프런트 엔드 사용자에게 숨겨져 있으며 동적으로 채워집니다. 동의 필드는 사용자가 양식을 제출하기 위해 선택해야 하는 필수 확인란입니다.

날짜 동의 필드는 JavaScript를 사용하여 날짜 및 시간 스탬프로 채워집니다. 양식이 제출되면 이 정보가 ACF 필드에 추가되어 양식을 제출하고 동의한 특정 순간을 보여줍니다. 이것은 내가 SMS 또는 이메일 마케팅 플랫폼으로 데이터를 내보내려고 할 때 이것이 "실제" 사용자임을 증명할 때 유용합니다.

쿠폰 텍스트 입력도 사용자에게 숨겨집니다. 이 필드는 사용자 표시 이름과 임의로 생성된 텍스트 문자열을 결합한 동적 쿠폰을 생성합니다. 이를 사용하여 WooCommerce에서 제출된 이메일 주소에 할당된 쿠폰을 자동으로 생성합니다.

등방성-2022-07-20-at-16-44-51 — 이것은 다음과 같은 코드를 만듭니다: james-d9sa249a

제출 버튼에는 일부 HTML이 포함되어 있으며 Oxygen과 선택한 감지기를 사용하여 양식을 스타일링할 때 이를 다시 방문합니다. 현재로서는 프론트엔드에서 양식이 다음과 같이 보입니다.

이제 양식이 필요한 모든 데이터를 수집하고 있으므로 몇 가지 제출 작업을 생성해 보겠습니다. 사용자가 양식을 제출할 때 수행되는 작업입니다.

제출 시 위에 표시된 순서대로 4가지 일이 발생합니다.

먼저 위에서 언급한 필드에서 자동 생성된 쿠폰을 WooCommerce에 추가합니다.

그런 다음 몇 분 안에 코드가 포함된 텍스트를 예상해야 한다는 메시지를 사용자에게 표시합니다.

그런 다음 WSForm Twilio 통합을 사용하여 제출 시 입력한 전화 번호로 코드를 문자로 보냅니다.

마지막으로 WordPress 사용자 프로필의 사용자 정보를 업데이트하여 ACF로 만든 사용자 정의 필드에 전화번호와 이메일을 모두 추가합니다.

WooCommerce에 쿠폰을 추가하는 것은 WSForm과 일부 사용자 정의 PHP에 내장된 "WordPress 후크 실행" 제출 작업을 사용하여 수행됩니다.

<?php // 필터 추가 add_filter("prog_add_coupon_form", "iso_add_coupon", 10, 2); // 필터 기능 function iso_add_coupon($form, $submit) { // 필드 ID 123에 대한 메타 키 설정(이를 필드 ID로 변경) $wsf_autocode = "field_1"; $wsf_useremail = "필드_4"; $wsf_userphone = "필드_5"; $coupon_code = $submit->메타[$wsf_autocode]["값"]; $금액 = "10"; // 금액 $discount_type = "fixed_cart"; // 유형: fixed_cart, percent, fixed_product, percent_product $coupon = [ "post_title" => $coupon_code, "post_content" => "", "post_status" => "게시", "post_author" => 1, "post_type" => "상점 쿠폰", ]; $new_coupon_id = wp_insert_post($쿠폰); // 메타 추가 update_post_meta($new_coupon_id, "discount_type", $discount_type); update_post_meta($new_coupon_id, "쿠폰_금액", $amount); update_post_meta($new_coupon_id, "individual_use", "no"); update_post_meta($new_coupon_id, "사용 제한", "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, "무료 배송", "아니오"); $user_email_res = $submit->메타[$wsf_useremail]["값"]; // 추가할 이메일 update_post_meta($new_coupon_id, "customer_email", $user_email_res); }

이 코드는 WSform 필드에서 생성된 코드에서 WooCommerce 쿠폰을 프로그래밍 방식으로 추가합니다.

등방성-2022-07-20-at-17-01-39 — 스니펫 관리 도구인 WPCodeBox를 사용하여 WordPress에 추가됩니다.

양식이 제출되면 이 코드가 모두 실행됩니다.

WSForm 제출에서 이메일, 전화 및 쿠폰 코드를 받습니다. 그런 다음 쿠폰을 생성합니다.

이 예에서 쿠폰은 장바구니에서 $10 할인을 제공하고 한 번 사용할 수 있으며 양식에 제출된 이메일로 제한됩니다.

등방성-2022-07-20-at-17-03-25 — 추가된 쿠폰입니다. 이 예에서 "admin"은 내 사용자의 표시 이름입니다. 쿠폰은 제출된 이메일 *로만 사용* 이 제한됩니다.

WooCommerce에 쿠폰을 추가하고 제출된 이메일에 할당한 후(사기를 줄이기 위해 수행됨) 사용자에게 성공 메시지를 표시합니다.

메시지를 개인화하는 데 사용되는 동적 #field(5) 에 주목하십시오.

그런 다음 실제로 사용자에게 텍스트를 보냅니다. 이것은 WSForm이 제공하고 설정하기 쉬운 Twilio 통합을 사용합니다.

먼저 애드온을 설치하고 API 키를 붙여넣어 Twilio 계정에 연결합니다.

등방성-2022-07-20-at-17-06-20 — WSForm 설정에 추가

이제 양식 제출 작업으로 돌아가 문자 메시지를 구성합니다.

발신번호를 선택하고 동의 필드를 연결하고 메시지를 보낼 전화번호를 동적으로 추가합니다. 자동 생성된 숨겨진 필드에서 채워진 정적 환영 메시지와 동적 쿠폰을 결합하여 메시지 자체도 동적으로 생성됩니다.

원하는 경우 GIF 및 미디어를 추가할 수도 있습니다.

마지막으로 제출된 데이터를 유용한 위치에 저장합니다. 이 상황에서 ACF pro를 사용하여 사용자 프로필에 필드를 만들었습니다.

마지막 작업은 WSForm 사용자 관리 애드온을 사용하여 이 데이터를 사용자 프로필 아래의 사용자 정의 필드에 추가합니다.

그러나 WSForm의 다양한 통합을 사용하여 GetResponse 또는 다른 마케팅 플랫폼으로 이 정보를 보내는 것이 더 나을 수 있습니다.

이제 양식의 전체 기능과 메커니즘이 작동하므로 이 마케팅 데이터 캡처 양식을 웹 사이트의 프런트 엔드로 가져오는 팝업을 작성해 보겠습니다.

Oxygen Builder와 WSForm은 훌륭한 조합입니다. 빌더를 사용하면 양식을 제출하기 쉽고 스타일을 지정하기가 더 쉽습니다.

재사용 가능한 부분(이 팝업을 원하는 곳에 삽입할 수 있음)을 사용하여 먼저 팝업을 추가하고 양식을 추가한 다음 마지막으로 스타일을 지정합니다.

저는 Modal, 열 및 기타 몇 가지 요소를 사용하여 고전적인 50% 50% 팝업을 만들고 있습니다.

단축 코드를 사용하여 양식을 삽입했습니다.

종료 의도에 따라 트리거됩니다.

이제 WSForm의 스타일을 지정하기만 하면 됩니다. 내장된 사용자 지정 도구를 사용하여 이 작업을 수행할 수 있지만 약간 제한적입니다. 사용자 정의 CSS를 작성할 수도 있지만 이는 시각적이지 않습니다. 세 번째 옵션은 Oxygen Builder와 함께 제공되는 내장 선택기 감지기를 사용하고 편집기를 사용하여 스타일을 지정하는 것입니다. 이것은 기본적으로 활성화되어 있지 않기 때문에 많은 사람들이 활용하지 않는 것입니다. 따라서 Oxygen 설정 페이지로 이동하여 선택기 감지기를 활성화하십시오.

이제 단축 코드 요소를 클릭하고 하단의 "선택기 감지기"를 클릭하십시오.

고급 탭을 사용하여 스타일을 지정하고 입력 및 버튼을 클릭하는 데 사용합니다.

등방성-2022-07-20-at-17-37-54 — WSF ID 및 내부 요소를 사용하여 스타일을 지정합니다.

기본 제공 WS 양식 Oxygen 요소 대신 단축 코드 요소를 사용합니다. 단축 코드를 비활성화한 다음 다시 렌더링하면 양식의 원래 탭으로 돌아갈 수 있기 때문입니다. WSForm 자체를 편집하면 빌더를 다시 로드할 필요 없이 단축 코드를 다시 렌더링할 수 있습니다.

등방성-2022-07-20-at-17-40-51 — Oxygen의 스타일링 양식 버튼

감지기를 사용하여 HTML의 모든 부분을 대상으로 지정할 수 있으므로 두 번째 버튼에 추가된 범위를 편집하여 글꼴을 더 작게 만들 수 있습니다.

그리고 그와 마찬가지로 WooCommerce 사이트를 위해 다음과 같은 사용자 정의 양식을 만들었습니다.

종료 의도에 팝업, $10 할인 제공
WSForm을 사용하여 2단계로 이메일 및 전화번호 수집
Oxygen을 사용하여 브랜드 지침에 따라 맞춤화되고 스타일이 지정됩니다.
WooCommerce에서 제출된 이메일에 할당된 고유 쿠폰 코드를 추가합니다.
제출된 전화번호로 쿠폰 코드를 문자로 전송
이 데이터를 사용자 프로필로 보냅니다(ACF pro로 추가된 사용자 정의 필드)

등방성-2022-07-20-at-17-45-12 — WSForm에서 생성되어 WooCommerce에 추가된 코드가 제출된 번호로 문자 메시지를 보냈습니다.