Wysyłanie SMS-ów z kodem rabatowym do klientów za pośrednictwem wyskakującego okienka - samouczek - (WSForm, Twilio, Oxygen)

Opublikowany: 2022-07-22

W tym samouczku zbudujemy wyskakujące okienko, które zbiera numer telefonu i adres e-mail klienta, aby zbudować listę marketingową SMS-ów i e-maili dla naszego sklepu WooCommerce. Po przesłaniu wyślemy im SMS-a z 10% rabatem na kod kuponu i dodamy te dane do profilu użytkownika.

Aby to zrobić, użyjemy WSForm do utworzenia formularza, integracji z Twilio i uruchomienia naszego tworzenia kuponu. Użyjemy Oxygen Builder do ogólnego wyskakującego okienka i stylizacji formularza. Użyjemy ACF Pro do przechowywania marketingowego adresu e-mail i numeru telefonu (wraz z danymi dobrowolnymi) w profilu użytkownika.

Kurs Oxygen Builder – już wkrótce!

Kurs Oxygen Builder Mastery przeniesie Cię od początkującego do profesjonalnego - w tym moduły ACF, MetaBox i WooCommerce.

Uzyskaj powiadomienie o uruchomieniu i zniżkę

Najpierw skonfigurujmy formularz. Będzie to formularz dwuetapowy, mający na celu najpierw zebranie wiadomości e-mail, a następnie zebranie numeru telefonu. Dzięki niemu możemy zbudować dwie oddzielne listy do wykorzystania w marketingu przez SMS i marketingu przez e-mail.

Dzielę to na dwa kroki, które powinny zwiększyć współczynnik konwersji, ponieważ po wprowadzeniu wiadomości e-mail jest mniej prawdopodobne, że opuści formularz, gdy zostanie wyświetlony kolejny tekst wejściowy.

Najpierw dodajemy 2 zakładki, jedną na e-mail, a drugą na numer telefonu.

Pierwsza karta zawiera wpis e-mail, połączony z przyciskiem Kontynuuj, który po kliknięciu wyświetla następny krok formularza.

Na karcie ustawień zaawansowanych dla pola wprowadzania wiadomości e-mail dodaliśmy wzorzec wyrażenia regularnego, który będzie sprawdzać e-maile.

Następna zakładka jest nieco bardziej skomplikowana.

Tutaj zbieramy numer telefonu użytkownika. Używa wbudowanego pola numeru telefonu i obejmuje wybór międzynarodowy.

Istnieją jednak trzy dodatkowe pola. Zarówno tekst kuponu, jak i pola zgody na datę i godzinę są ukryte przed użytkownikiem frontonu i są dynamicznie wypełniane. Pole zgody to obowiązkowe pole wyboru, które należy zaznaczyć, aby użytkownik mógł przesłać formularz.

Pole zgody na datę jest wypełniane zarówno datą, jak i godziną za pomocą JavaScript. Po przesłaniu formularza informacje te są dodawane do pola ACF, wskazując konkretny moment, w którym użytkownicy składają formularz i wyrażają zgodę. Jest to pomocne, gdy udowadniam, że jest to „prawdziwy” użytkownik, jeśli próbuję eksportować dane do platform SMS lub e-mail marketingu.

Wprowadzany tekst kuponu jest również ukryty przed użytkownikiem. To pole generuje kupon dynamiczny łączący nazwę wyświetlaną użytkownika i losowo wygenerowany ciąg tekstu. Wykorzystamy to, aby automatycznie utworzyć kupon przypisany do przesłanego adresu e-mail w WooCommerce.

izotropowy-2022-07-20-at-16-44-51 — To tworzy kod taki jak: james-d9sa249a

Przycisk przesyłania zawiera kod HTML i wrócimy do tego ponownie podczas stylizowania formularza przy użyciu tlenu i wybranego detektora. Jak na razie formularz wygląda na interfejsie użytkownika:

izotropowy-2022-07-20-at-16-47-01 — Karta 1

izotropowy-2022-07-20-at-16-47-42 — Karta 2

Teraz, gdy formularz zbiera wszystkie potrzebne nam dane, utwórzmy kilka akcji przesyłania. Są to działania, które są podejmowane, gdy użytkownik przesyła formularz.

Po przesłaniu dzieją się 4 rzeczy w kolejności pokazanej powyżej.

Najpierw dodaje do WooCommerce kupon, który został automatycznie wygenerowany w powyższym polu.

Następnie pokazuje użytkownikowi komunikat, że za kilka minut powinien spodziewać się tekstu z kodem.

Następnie, korzystając z integracji WSForm Twilio, wysyła kod SMS-em na numer telefonu wprowadzony podczas przesyłania.

Na koniec aktualizuje informacje o użytkowniku w profilu użytkownika WordPress, dodając zarówno numer telefonu, jak i adres e-mail do niestandardowych pól utworzonych za pomocą ACF.

Dodanie kuponu do WooCommerce odbywa się za pomocą akcji przesyłania „uruchom WordPress hook” wbudowanej w WSForm i niektóre niestandardowe PHP.

<?php // Dodaj filtr add_filter("prog_add_coupon_form", "iso_add_coupon", 10, 2); // Funkcja filtrowania funkcji iso_add_coupon($form, $submit) { // Ustaw metaklucz dla identyfikatora pola 123 (Zmień to na identyfikator pola) $wsf_autocode = "field_1"; $wsf_useremail = "pole_4"; $wsf_userphone = "pole_5"; $coupon_code = $submit->meta[$wsf_autocode]["wartość"]; $kwota = "10"; // Kwota $discount_type = "fixed_cart"; // Wpisz: fixed_cart, percent, fixed_product, percent_product $coupon = [ "post_title" => $coupon_code, "post_content" => "", "post_status" => "publish", "post_author" => 1, "post_type" => "kupon_sklepu", ]; $ new_coupon_id = wp_insert_post ($ kupon); // Dodaj 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", "nie"); 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", "tak"); update_post_meta($new_coupon_id, "darmowa_wysyłka", "nie"); $user_email_res = $submit->meta[$wsf_useremail]["wartość"]; // Email do dodania update_post_meta($new_coupon_id, "customer_email", $user_email_res); }

Ten kod programowo dodaje kupon WooCommerce z kodu wygenerowanego w polu WSform.

izotropowy-2022-07-20-at-17-01-39 — Jest dodawany do WordPressa za pomocą WPCodeBox, narzędzia do zarządzania fragmentami

Po przesłaniu formularza cały ten kod jest uruchamiany.

Otrzymamy e-mail, telefon i kod kuponu z naszego zgłoszenia WSForm. Następnie generujemy kupon.

W tym przykładzie kupon oferuje 10 USD zniżki na koszyk, może być użyty raz i jest ograniczony do adresu e-mail przesłanego w formularzu.

izotropowy-2022-07-20-at-17-03-25 — Oto kupon, który został dodany. W tym przykładzie „admin” to nazwa wyświetlana moich użytkowników. Zwróć uwagę, że kupon może *być używany tylko z* przesłanym e-mailem.

Po dodaniu naszego kuponu do WooCommerce i przypisaniu go do przesłanego e-maila (ma to na celu ograniczenie oszustw), wyświetlamy użytkownikowi komunikat o sukcesie:

Zwróć uwagę na dynamiczne #field(5) używane do personalizacji wiadomości.

Następnie faktycznie wysyłamy tekst do użytkownika. Wykorzystuje integrację Twilio oferowaną przez WSForm i jest łatwa do skonfigurowania.

Najpierw instalujemy dodatek i łączymy go z kontem Twilio wklejając nasz klucz API.

izotropowy-2022-07-20-at-17-05-09 — Uzyskaj klucz API

izotropowy-2022-07-20-at-17-06-20 — Dodaj do ustawień WSForm

Teraz z powrotem pod akcjami przesyłania formularzy konfigurujemy wiadomość tekstową.

Wybieramy numer z, łączymy nasze pole zgody i dynamicznie dodajemy numer telefonu, na który ma zostać wysłana wiadomość. Sama wiadomość jest również tworzona dynamicznie, łącząc statyczną wiadomość powitalną i dynamiczny kupon, wypełniany z automatycznie generowanego ukrytego pola.

W razie potrzeby możemy również dodać GIF-y i multimedia.

Wreszcie, przechowujemy przesłane dane w przydatnym miejscu. W tej sytuacji wykorzystałem ACF pro do stworzenia pól w profilu użytkownika.

Ostatnia akcja używa dodatku WSForm User Management w celu dodania tych danych do pól niestandardowych w profilu użytkownika.

Jednak lepiej będzie, jeśli wyślesz te informacje do GetResponse lub innej platformy marketingowej, korzystając z wielu integracji WSForm:

Teraz, gdy działa ogólna funkcjonalność i mechanizm formularza, zbudujmy nasze wyskakujące okienko, przenosząc ten formularz przechwytywania danych marketingowych na front-end witryny.

Oxygen Builder i WSForm tworzą świetne połączenie. Korzystając z kreatora, łatwo jest przesłać formularz, a jeszcze łatwiej go ostylować.

Używając części wielokrotnego użytku (która pozwala mi wstawić to wyskakujące okienko w dowolnym miejscu), najpierw dodam wyskakujące okienko, dodam formularz, a na końcu nada mu styl.

Używam modalnego, kolumn i kilku innych elementów, aby stworzyć klasyczne wyskakujące okienko 50% 50%.

Formularz wstawiłem za pomocą skróconego kodu.

Uruchamia się na zamiar wyjścia.

Teraz wszystko, co muszę zrobić, to nadać styl WSForm. Mógłbym to zrobić za pomocą wbudowanego konfiguratora, ale to trochę ograniczone. Mógłbym też po prostu napisać niestandardowy CSS, ale to nie jest wizualne. Trzecią opcją jest użycie wbudowanego detektora selektora dostarczanego z Oxygen Builder i stylizacja za pomocą edytora. Jest to coś, z czego wiele osób nie korzysta po prostu dlatego, że nie jest domyślnie włączone. Wejdź więc na stronę ustawień tlenu i włącz wykrywacz selektora.

Teraz kliknij element shortcode i kliknij „detektor selektora” na dole.

Użyj go, aby kliknąć wejścia i przyciski, stylizując za pomocą karty Zaawansowane.

izotropowy-2022-07-20-at-17-37-54 — Styl przy użyciu identyfikatorów WSF i elementów wewnątrz.

Używam elementu krótkiego kodu zamiast wbudowanego elementu tlenowego formularza WS, ponieważ mogę wyłączyć krótki kod, a następnie ponownie go zrenderować, przywracając oryginalną kartę formularza. Jeśli edytuję sam WSForm, mogę renderować krótki kod bez konieczności ponownego ładowania konstruktora.

izotropowy-2022-07-20-at-17-40-51 — Przycisk formularza stylizacji w Oxygen

Za pomocą detektora mogę celować w dowolny fragment kodu HTML, co pozwala mi edytować rozpiętość dodaną w drugim przycisku, zmniejszając czcionkę.

I tak po prostu stworzyliśmy niestandardowy formularz dla naszej witryny WooCommerce, który:

Wyskakuje w zamiarze wyjścia, oferując 10 USD zniżki
Zbiera adresy e-mail i numery telefonów w 2 krokach za pomocą WSForm
Jest niestandardowy i stylizowany zgodnie z wytycznymi marki przy użyciu Oxygen
Dodaje unikalny kod kuponu przypisany do przesłanego e-maila w WooCommerce
Wysyła SMS-a z kodem kuponu na podany numer telefonu
Wysyła te dane do profilu użytkownika (niestandardowe pola dodane z ACF pro)

izotropowy-2022-07-20-at-17-45-12 — Kod, który został wygenerowany przez WSForm i dodany do WooCommerce, został wysłany SMS-em na mój przesłany numer.