Inviare un codice sconto ai clienti tramite popup - Tutorial - (WSForm, Twilio, Oxygen)
Pubblicato: 2022-07-22In questo tutorial, creeremo un popup che raccoglie il numero di telefono e l'indirizzo e-mail dei clienti per creare un elenco di SMS e e-mail marketing per il nostro negozio WooCommerce. Al momento dell'invio, invieremo loro un codice coupon di sconto del 10% e aggiungeremo questi dati al loro profilo utente.
Per fare ciò, utilizzeremo WSForm per creare il modulo, integrarlo con Twilio e attivare la creazione del coupon. Useremo Oxygen Builder per il popup generale e lo stile dei moduli. E utilizzeremo ACF Pro per memorizzare l'e-mail di marketing e il numero di telefono (oltre ai dati di attivazione) nel profilo utente.
Corso Oxygen Builder - Prossimamente!
Il corso Oxygen Builder Mastery ti porterà dal principiante al professionista - inclusi i moduli ACF, MetaBox e WooCommerce.
Per prima cosa, impostiamo il modulo. Questo sarà un modulo in due passaggi, volto a raccogliere prima un'e-mail e quindi un numero di telefono. Con esso, possiamo creare due elenchi separati da utilizzare per il marketing tramite SMS e il marketing tramite e-mail.
Lo sto suddividendo in due passaggi che si spera dovrebbero aumentare il tasso di conversione poiché una volta che qualcuno ha inserito un'e-mail, è meno probabile che abbandoni il modulo quando viene presentato con un altro input di testo.
Innanzitutto, aggiungiamo 2 schede, una per l'e-mail e una per il numero di telefono.
La prima scheda ha un input di posta elettronica, insieme a un pulsante continua che visualizza il passaggio successivo del modulo quando viene cliccato.
Nella scheda delle impostazioni avanzate per il campo di immissione dell'e-mail, abbiamo aggiunto un modello di espressione regolare che convaliderà le e-mail.
La scheda successiva è un po' più complicata.
Qui raccogliamo il numero di telefono degli utenti. Questo utilizza il campo del numero di telefono integrato e include una selezione internazionale.
Tuttavia, ci sono tre campi aggiuntivi. Sia il testo del coupon che i campi del consenso della data e dell'ora sono nascosti all'utente front-end e popolati dinamicamente. Il campo del consenso è una casella di controllo obbligatoria che deve essere selezionata affinché l'utente possa inviare il modulo.
Il campo del consenso alla data viene compilato con la data e l'ora utilizzando JavaScript. Quando il modulo viene inviato, queste informazioni vengono aggiunte a un campo ACF, mostrando il momento specifico in cui utilizzano il modulo e acconsentono. Questo è utile per dimostrare che si tratta di un utente "reale" se sto cercando di esportare dati in piattaforme di SMS o email marketing.
Anche l'input di testo del coupon è nascosto all'utente. Questo campo genera un coupon dinamico che combina il nome visualizzato degli utenti e una stringa di testo generata casualmente. Lo useremo per creare automaticamente un coupon assegnato all'indirizzo email inviato in WooCommerce.
Il pulsante di invio contiene del codice HTML e lo rivisiteremo durante lo styling del modulo utilizzando Oxygen e il rilevatore selezionato. A partire da ora, ecco come appare il modulo sul frontend:
Ora che il modulo sta raccogliendo tutti i dati di cui abbiamo bisogno, creiamo alcune azioni di invio. Si tratta di azioni che vengono eseguite quando l'utente invia il modulo.
Al momento dell'invio, accadono 4 cose, nell'ordine visualizzato sopra.
Innanzitutto, aggiunge a WooCommerce il coupon che è stato generato automaticamente nel campo sopra menzionato.
Quindi, mostra all'utente un messaggio che dovrebbe aspettarsi un testo con il codice in pochi minuti.
Quindi, utilizzando l'integrazione WSForm Twilio, invia il codice al numero di telefono inserito durante l'invio.
Infine, aggiorna le informazioni dell'utente nel profilo utente di WordPress, aggiungendo sia il numero di telefono che l'e-mail ai campi personalizzati creati con ACF.
L'aggiunta del coupon a WooCommerce viene eseguita utilizzando l'azione di invio "esegui WordPress hook" integrata in WSForm e alcuni PHP personalizzati.
Questo codice aggiunge a livello di codice un coupon WooCommerce dal codice generato nel campo WSform.
Quando il modulo viene inviato, tutto questo codice viene eseguito.
Riceviamo l'e-mail, il telefono e il codice coupon dal nostro invio WSForm. Quindi generiamo un coupon.
In questo esempio, il coupon offre uno sconto di $ 10 sul carrello, può essere utilizzato una sola volta ed è limitato all'e-mail inviata nel modulo.
Dopo aver aggiunto il nostro coupon a WooCommerce e averlo assegnato all'e-mail inviata (questo viene fatto per ridurre le frodi), mostriamo un messaggio di successo all'utente:
Notare il #field(5) dinamico utilizzato per personalizzare il messaggio.
Quindi, inviamo effettivamente il testo all'utente. Questo utilizza l'integrazione Twilio offerta da WSForm ed è facile da configurare.
Innanzitutto, installiamo l'addon e lo colleghiamo all'account Twilio incollando la nostra chiave API.
Ora, tornando alle azioni di invio del modulo, configuriamo il messaggio di testo.
Scegliamo il numero da, colleghiamo il nostro campo di consenso e aggiungiamo dinamicamente il numero di telefono a cui inviare il messaggio. Anche il messaggio stesso viene creato dinamicamente, combinando un messaggio di benvenuto statico e un coupon dinamico, popolato dal campo nascosto generato automaticamente.
Possiamo anche aggiungere GIF e file multimediali, se lo desideri.
Infine, memorizziamo i dati inviati in un luogo utile. In questa situazione, ho utilizzato ACF pro per creare campi nel profilo utente.
L'azione finale utilizza il componente aggiuntivo WSForm User Management per aggiungere questi dati ai campi personalizzati sotto il profilo utente.
Tuttavia, potresti essere più utile inviando queste informazioni a GetResponse o a un'altra piattaforma di marketing utilizzando le numerose integrazioni di WSForm:
Ora che la funzionalità generale e il meccanismo del modulo funzionano, creiamo il nostro popup, portando questo modulo di acquisizione dei dati di marketing nel front-end del sito web.
Oxygen Builder e WSForm costituiscono un'ottima combinazione. Utilizzando il builder, è facile inviare il modulo e ancora più facile dargli uno stile.
Usando una parte riutilizzabile (che mi consente di inserire questo popup dove voglio), prima aggiungerò il popup, aggiungerò il modulo e infine lo modellerò.
Sto usando un modale, colonne e pochi altri elementi per creare un classico popup 50% 50%.
Ho inserito il modulo utilizzando uno shortcode.
Si attiva con l'intento di uscita.
Ora, tutto ciò che devo fare è modellare WSForm. Potrei farlo usando il personalizzatore integrato, ma è un po' limitato. Potrei anche scrivere semplicemente CSS personalizzati, ma non è visivo. La terza opzione utilizza il rilevatore di selezione integrato fornito con Oxygen Builder e lo stile utilizzando l'editor. Questo è qualcosa di cui molte persone non approfittano semplicemente perché non è abilitato per impostazione predefinita. Quindi vai nella pagina delle impostazioni per l'ossigeno e abilita il rilevatore di selezione.
Ora, fai clic sull'elemento shortcode e fai clic su "rilevatore selettore" in basso.
Usalo per fare clic negli input e nei pulsanti, applicando lo stile utilizzando la scheda Avanzate.
Uso l'elemento del codice breve invece dell'elemento Oxygen del modulo WS integrato perché posso disabilitare il codice breve e quindi eseguirne il rendering, riportandomi alla scheda originale del modulo. Se modifico il WSForm stesso, posso eseguire nuovamente il rendering dello shortcode senza dover ricaricare il builder.
Usando il rilevatore, posso indirizzare qualsiasi pezzo di HTML, permettendomi di modificare l'intervallo aggiunto nel secondo pulsante, riducendo il carattere.
E proprio così, abbiamo creato un modulo personalizzato per il nostro sito WooCommerce che:
- Si apre con l'intenzione di uscita, offrendo $ 10 di sconto
- Raccoglie e-mail e numeri di telefono in 2 passaggi utilizzando WSForm
- È personalizzato e modellato secondo le linee guida del marchio utilizzando Oxygen
- Aggiunge un codice coupon univoco assegnato all'e-mail inviata in WooCommerce
- Invia il codice coupon al numero di telefono inviato
- Invia questi dati al profilo utente (campi personalizzati aggiunti con ACF pro)
