Envoyer un code de réduction aux clients via une fenêtre contextuelle - Tutoriel - (WSForm, Twilio, Oxygen)
Publié: 2022-07-22Dans ce didacticiel, nous allons créer une fenêtre contextuelle qui collecte le numéro de téléphone et l'adresse e-mail d'un client afin de créer une liste de marketing par SMS et par e-mail pour notre boutique WooCommerce. Lors de la soumission, nous leur enverrons un code de réduction de 10 % par SMS et ajouterons ces données à leur profil d'utilisateur.
Pour ce faire, nous utiliserons WSForm pour créer le formulaire, l'intégrer à Twilio et déclencher la création de notre coupon. Nous utiliserons Oxygen Builder pour le style général des fenêtres contextuelles et des formulaires. Et nous utiliserons ACF Pro pour stocker l'e-mail marketing et le numéro de téléphone (avec les données d'activation) dans le profil de l'utilisateur.
Cours Oxygen Builder - Bientôt disponible !
Le cours Oxygen Builder Mastery vous amènera du débutant au professionnel - modules ACF, MetaBox et WooCommerce inclus.
Tout d'abord, configurons le formulaire. Il s'agira d'un formulaire en deux étapes, visant d'abord à collecter un e-mail, puis à collecter un numéro de téléphone. Avec lui, nous pouvons créer deux listes distinctes à utiliser pour le marketing par SMS et le marketing par e-mail.
Je le divise en deux étapes qui devraient, espérons-le, augmenter le taux de conversion, car une fois que quelqu'un a saisi un e-mail, il est moins susceptible d'abandonner le formulaire lorsqu'il est présenté avec une autre saisie de texte.
Tout d'abord, nous ajoutons 2 onglets, un pour le courrier électronique et un pour le numéro de téléphone.
Le premier onglet comporte une entrée d'e-mail, couplée à un bouton Continuer qui affiche l'étape suivante du formulaire lorsqu'on clique dessus.
Sous l'onglet des paramètres avancés pour le champ de saisie de l'e-mail, nous avons ajouté un modèle d'expression régulière qui validera les e-mails.
L'onglet suivant est un peu plus compliqué.
Ici, nous collectons le numéro de téléphone des utilisateurs. Cela utilise le champ de numéro de téléphone intégré et inclut une sélection internationale.
Cependant, il y a trois champs supplémentaires. Le texte du coupon et les champs de consentement de la date et de l'heure sont masqués pour l'utilisateur frontal et remplis de manière dynamique. Le champ de consentement est une case à cocher obligatoire qui doit être cochée pour que l'utilisateur puisse soumettre le formulaire.
Le champ de consentement de date est rempli avec la date et l'heure à l'aide de JavaScript. Lorsque le formulaire est soumis, ces informations sont ajoutées à un champ ACF, indiquant le moment précis qu'ils utilisent pour soumettre le formulaire et consentir. Ceci est utile pour prouver qu'il s'agit d'un "vrai" utilisateur si j'essaie d'exporter des données vers des plateformes de marketing par SMS ou par e-mail.
La saisie du texte du coupon est également masquée pour l'utilisateur. Ce champ génère un coupon dynamique combinant le nom d'affichage de l'utilisateur et une chaîne de texte générée aléatoirement. Nous l'utiliserons pour créer automatiquement un coupon attribué à l'adresse e-mail soumise dans WooCommerce.
Le bouton d'envoi contient du code HTML, et nous y reviendrons lors du style du formulaire à l'aide d'Oxygen et du détecteur sélectionné. Pour l'instant, voici à quoi ressemble le formulaire sur le frontend :
Maintenant que le formulaire collecte toutes les données dont nous avons besoin, créons quelques actions de soumission. Ce sont des actions qui sont prises lorsque l'utilisateur soumet le formulaire.
Lors de la soumission, 4 choses se produisent, dans l'ordre affiché ci-dessus.
Tout d'abord, il ajoute le coupon généré automatiquement dans le champ mentionné ci-dessus à WooCommerce.
Ensuite, il montre à l'utilisateur un message indiquant qu'il doit s'attendre à un texte avec le code dans quelques minutes.
Ensuite, à l'aide de l'intégration WSForm Twilio, il envoie le code par SMS au numéro de téléphone saisi lors de la soumission.
Enfin, il met à jour les informations utilisateur dans le profil utilisateur WordPress, en ajoutant à la fois le numéro de téléphone et l'e-mail aux champs personnalisés créés avec ACF.
L'ajout du coupon à WooCommerce se fait en utilisant l'action de soumission "exécuter le crochet WordPress" intégrée à WSForm et certains PHP personnalisés.
Ce code ajoute par programme un coupon WooCommerce à partir du code généré dans le champ WSform.
Lorsque le formulaire est soumis, tout ce code s'exécute.
Nous obtenons l'e-mail, le téléphone et le code de réduction de notre soumission WSForm. Nous générons ensuite un coupon.
Dans cet exemple, le coupon offre 10 $ de réduction sur un panier, peut être utilisé une fois et est limité à l'e-mail qui a été soumis dans le formulaire.
Après avoir ajouté notre coupon à WooCommerce et l'avoir attribué à l'e-mail soumis (ceci est fait pour réduire la fraude), nous montrons un message de réussite à l'utilisateur :
Remarquez le champ dynamique #field(5) utilisé pour personnaliser le message.
Ensuite, nous envoyons réellement le texte à l'utilisateur. Cela utilise l'intégration Twilio offerte par WSForm et est facile à configurer.
Tout d'abord, nous installons l'addon et le connectons au compte Twilio en collant notre clé API.
Maintenant, de retour sous les actions de soumission de formulaire, nous configurons le message texte.
Nous choisissons le numéro de départ, connectons notre champ de consentement et ajoutons dynamiquement le numéro de téléphone auquel envoyer le message. Le message lui-même est également créé dynamiquement, combinant un message de bienvenue statique et un coupon dynamique, rempli à partir du champ masqué généré automatiquement.
Nous pouvons également ajouter des GIF et des médias si vous le souhaitez.
Enfin, nous stockons les données soumises dans un endroit utile. Dans cette situation, j'ai utilisé ACF pro pour créer des champs dans le profil utilisateur.
L'action finale utilise le module complémentaire WSForm User Management pour ajouter ces données aux champs personnalisés sous le profil utilisateur.
Cependant, vous serez peut-être mieux servi en envoyant ces informations à GetResponse ou à une autre plate-forme marketing en utilisant les nombreuses intégrations de WSForm :
Maintenant que la fonctionnalité globale et le mécanisme du formulaire fonctionnent, construisons notre fenêtre contextuelle, en amenant ce formulaire de capture de données marketing à l'avant du site Web.
Oxygen Builder et WSForm forment une excellente combinaison. En utilisant le générateur, il est facile de soumettre le formulaire et encore plus facile de le styliser.
En utilisant une partie réutilisable (qui me permet d'insérer ce pop up où je veux), je vais d'abord ajouter le popup, ajouter le formulaire, et enfin le styler.
J'utilise un Modal, des colonnes et quelques autres éléments pour créer un popup classique 50% 50%.
J'ai inséré le formulaire en utilisant un shortcode.
Il se déclenche à l'intention de sortie.
Maintenant, tout ce que j'ai à faire est de styliser le WSForm. Je pourrais le faire en utilisant le personnalisateur intégré, mais c'est un peu limité. Je pourrais aussi écrire du CSS personnalisé, mais ce n'est pas visuel. La troisième option consiste à utiliser le détecteur de sélecteur intégré fourni avec Oxygen Builder et le style à l'aide de l'éditeur. C'est quelque chose dont beaucoup de gens ne profitent pas simplement parce qu'il n'est pas activé par défaut. Allez donc dans votre page de paramètres pour Oxygen et activez le détecteur de sélecteur.
Maintenant, cliquez sur l'élément de code court, puis cliquez sur "détecteur de sélecteur" en bas.
Utilisez-le pour cliquer sur les entrées et les boutons, en stylisant à l'aide de l'onglet Avancé.
J'utilise l'élément de code court au lieu de l'élément Oxygen du formulaire WS intégré car je peux désactiver le code court, puis le restituer, me ramener à l'onglet d'origine du formulaire. Si je modifie le WSForm lui-même, je peux restituer le shortcode sans avoir à recharger le constructeur.
À l'aide du détecteur, je peux cibler n'importe quel morceau de HTML, ce qui me permet de modifier l'étendue ajoutée dans le deuxième bouton, ce qui réduit la taille de la police.
Et juste comme ça, nous avons créé un formulaire personnalisé pour notre site WooCommerce qui :
- Apparaît à l'intention de sortie, offrant 10 $ de réduction
- Collecte les e-mails et les numéros de téléphone en 2 étapes à l'aide de WSForm
- Est personnalisé et conçu selon les directives de la marque en utilisant Oxygen
- Ajoute un code de coupon unique attribué à l'e-mail soumis dans WooCommerce
- Envoie le code de coupon au numéro de téléphone soumis
- Envoie ces données au profil de l'utilisateur (champs personnalisés ajoutés avec ACF pro)
