Envío de un código de descuento a los clientes a través de una ventana emergente - Tutorial - (WSForm, Twilio, Oxygen)

Publicado: 2022-07-22

En este tutorial, vamos a crear una ventana emergente que recopila el número de teléfono y la dirección de correo electrónico de un cliente para crear una lista de marketing por SMS y correo electrónico para nuestra tienda WooCommerce. En el momento del envío, les enviaremos un mensaje de texto con un código de cupón de descuento del 10 % y agregaremos estos datos a su perfil de usuario.

Para hacer esto, usaremos WSForm para crear el formulario, integrarlo con Twilio y activar nuestra creación de cupones. Usaremos Oxygen Builder para la ventana emergente general y el estilo del formulario. Y usaremos ACF Pro para almacenar el correo electrónico de marketing y el número de teléfono (junto con los datos de suscripción) en el perfil de usuario.

Curso de construcción de oxígeno - ¡Próximamente!

El curso Oxygen Builder Mastery lo llevará de principiante a profesional: módulos ACF, MetaBox y WooCommerce incluidos.

Obtenga notificación de lanzamiento y descuento

Primero, configuremos el formulario. Este será un formulario de dos pasos, destinado a recopilar primero un correo electrónico y luego recopilar un número de teléfono. Con él, podemos crear dos listas separadas para usar en marketing por SMS y marketing por correo electrónico.

Lo estoy dividiendo en dos pasos que, con suerte, deberían aumentar la tasa de conversión, ya que una vez que alguien ha ingresado un correo electrónico, es menos probable que abandone el formulario cuando se le presenta otra entrada de texto.

Primero, agregamos 2 pestañas, una para el correo electrónico y otra para el número de teléfono.

La primera pestaña tiene una entrada de correo electrónico, junto con un botón de continuar que muestra el siguiente paso del formulario cuando se hace clic en él.

En la pestaña de configuración avanzada para el campo de entrada de correo electrónico, hemos agregado un patrón de expresión regular que validará los correos electrónicos.

La siguiente pestaña es un poco más complicada.

Aquí, recopilamos el número de teléfono de los usuarios. Esto utiliza el campo de número de teléfono incorporado e incluye una selección internacional.

Sin embargo, hay tres campos adicionales. Tanto el texto del cupón como los campos de consentimiento de fecha y hora están ocultos para el usuario final y se completan dinámicamente. El campo de consentimiento es una casilla de verificación obligatoria que debe seleccionarse para que el usuario envíe el formulario.

El campo de consentimiento de fecha se completa con la marca de fecha y hora usando JavaScript. Cuando se envía el formulario, esta información se agrega a un campo ACF, que muestra el momento específico en que se envía el formulario y se da su consentimiento. Esto es útil para demostrar que se trata de un usuario "real" si intento exportar datos a plataformas de marketing por SMS o correo electrónico.

La entrada de texto del cupón también está oculta para el usuario. Este campo genera un cupón dinámico que combina el nombre para mostrar de los usuarios y una cadena de texto generada aleatoriamente. Usaremos esto para crear automáticamente un cupón asignado a la dirección de correo electrónico enviada en WooCommerce.

isotropic-2022-07-20-at-16-44-51 — Esto hace un código como: james-d9sa249a

El botón Enviar tiene algo de HTML, y lo revisaremos cuando diseñemos el formulario usando Oxygen y el detector seleccionado. A partir de ahora, así es como se ve el formulario en la interfaz:

isotropic-2022-07-20-at-16-47-01 — Pestaña 1

isotropic-2022-07-20-at-16-47-42 — Pestaña 2

Ahora que el formulario recopila todos los datos que necesitamos, creemos algunas acciones de envío. Estas son acciones que se realizan cuando el usuario envía el formulario.

En el envío, suceden 4 cosas, en el orden que se muestra arriba.

Primero, agrega el cupón que se generó automáticamente en el campo mencionado anteriormente a WooCommerce.

Luego, le muestra al usuario un mensaje que debe esperar un texto con el código en unos minutos.

Luego, utilizando la integración WSForm Twilio, envía un mensaje de texto con el código al número de teléfono ingresado durante el envío.

Finalmente, actualiza la información del usuario en el perfil de usuario de WordPress, agregando tanto el número de teléfono como el correo electrónico a los campos personalizados creados con ACF.

Agregar el cupón a WooCommerce se realiza mediante la acción de envío "ejecutar enlace de WordPress" integrada en WSForm y algunos PHP personalizados.

<?php // Añadir filtro add_filter("prog_add_coupon_form", "iso_add_coupon", 10, 2); // Función de filtro función iso_add_coupon($formulario, $enviar) { // Establecer clave meta para el ID de campo 123 (Cámbielo a su ID de campo) $wsf_autocode = "field_1"; $wsf_useremail = "campo_4"; $wsf_usuario = "campo_5"; $código_cupón = $enviar->meta[$wsf_autocode]["valor"]; $cantidad = "10"; // Importe $tipo_descuento = "carrito_fijo"; // Escriba: Fixed_cart, percent, fixed_product, percent_product $coupon = [ "post_title" => $coupon_code, "post_content" => "", "post_status" => "publish", "post_author" => 1, "post_type" => "shop_coupon", ]; $nuevo_cupón_id = wp_insert_post($cupón); // Añadir meta update_post_meta($new_coupon_id, "discount_type", $discount_type); update_post_meta($new_coupon_id, "coupon_amount", $cantidad); update_post_meta($new_coupon_id, "uso_individual", "no"); 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", "yes"); update_post_meta($new_coupon_id, "free_shipping", "no"); $user_email_res = $submit->meta[$wsf_useremail]["valor"]; // El correo electrónico que se agregará update_post_meta($new_coupon_id, "customer_email", $user_email_res); }

Este código agrega mediante programación un cupón de WooCommerce a partir del código generado en el campo WSform.

isotropic-2022-07-20-en-17-01-39 — Se agrega a WordPress usando WPCodeBox, una herramienta de administración de fragmentos

Cuando se envía el formulario, se ejecuta todo este código.

Obtenemos el correo electrónico, el teléfono y el código de cupón de nuestro envío de WSForm. Luego generamos un cupón.

En este ejemplo, el cupón ofrece $10 de descuento en un carrito, se puede usar una vez y está restringido al correo electrónico que se envió en el formulario.

isotropic-2022-07-20-en-17-03-25 — Aquí está el cupón que se agregó. En este ejemplo, "admin" es el nombre para mostrar de mis usuarios. Tenga en cuenta que el cupón está restringido para *usarse solo con* el correo electrónico que se envió.

Después de agregar nuestro cupón a WooCommerce y asignarlo al correo electrónico enviado (esto se hace para reducir el fraude), mostramos un mensaje de éxito al usuario:

Observe el #field(5) dinámico utilizado para personalizar el mensaje.

Luego, enviamos el texto al usuario. Esto utiliza la integración de Twilio que ofrece WSForm y es fácil de configurar.

Primero, instalamos el complemento y lo conectamos a la cuenta de Twilio pegando nuestra clave API.

isotropic-2022-07-20-en-17-05-09 — Obtener clave API

isotropic-2022-07-20-en-17-06-20 — Agregar a la configuración de WSForm

Ahora, de vuelta en las acciones de envío del formulario, configuramos el mensaje de texto.

Elegimos el número de origen, conectamos nuestro campo de consentimiento y agregamos dinámicamente el número de teléfono para enviar el mensaje. El mensaje en sí también se crea dinámicamente, combinando un mensaje de bienvenida estático y un cupón dinámico, que se completa a partir del campo oculto generado automáticamente.

También podemos agregar GIF y medios si lo desea.

Finalmente, almacenamos los datos enviados en algún lugar útil. En esta situación, utilicé ACF pro para crear campos en el perfil de usuario.

La acción final utiliza el complemento de administración de usuarios de WSForm para agregar estos datos a los campos personalizados en el perfil de usuario.

Sin embargo, es mejor que envíe esta información a GetResponse u otra plataforma de marketing utilizando las numerosas integraciones de WSForm:

Ahora que la funcionalidad general y el mecanismo del formulario están funcionando, construyamos nuestra ventana emergente, trayendo este formulario de captura de datos de marketing al frente del sitio web.

Oxygen Builder y WSForm hacen una gran combinación. Con el generador, es fácil enviar el formulario y aún más fácil diseñarlo.

Usando una parte reutilizable (que me permite insertar esta ventana emergente donde quiera), primero agregaré la ventana emergente, agregaré el formulario y finalmente le daré estilo.

Estoy usando un Modal, columnas y algunos otros elementos para hacer una ventana emergente clásica 50% 50%.

He insertado el formulario usando un shortcode.

Se activa en el intento de salida.

Ahora, todo lo que tengo que hacer es diseñar el WSForm. Podría hacer esto usando el personalizador incorporado, pero eso es un poco limitado. También podría simplemente escribir CSS personalizado, pero eso no es visual. La tercera opción es usar el detector selector incorporado que viene con Oxygen Builder y diseñar usando el editor. Esto es algo que muchas personas no aprovechan simplemente porque no está habilitado de forma predeterminada. Así que vaya a la página de configuración de Oxígeno y habilite el detector selector.

Ahora, haga clic en el elemento de código abreviado y haga clic en "detector de selector" en la parte inferior.

Úselo para hacer clic en las entradas y los botones, diseñando usando la pestaña Avanzado.

isotropic-2022-07-20-at-17-37-54 — Estilo usando las ID de WSF y los elementos dentro.

Utilizo el elemento de código corto en lugar del elemento Oxígeno del formulario WS incorporado porque puedo desactivar el código corto y luego volver a procesarlo, llévame de vuelta a la pestaña original del formulario. Si edito el propio WSForm, puedo volver a generar el código abreviado sin necesidad de volver a cargar el generador.

isotropic-2022-07-20-at-17-40-51 — Botón de formulario de estilo en Oxygen

Usando el detector, puedo apuntar a cualquier pieza de HTML, lo que me permite editar el intervalo agregado en el segundo botón, haciendo que la fuente sea más pequeña.

Y así, creamos un formulario personalizado para nuestro sitio de WooCommerce que:

Aparece en la intención de salida, ofreciendo $ 10 de descuento
Recopila correos electrónicos y números de teléfono en 2 pasos usando WSForm
Está personalizado y diseñado según las pautas de la marca usando Oxygen
Agrega un código de cupón único asignado al correo electrónico enviado en WooCommerce
Envía un mensaje de texto con el código del cupón al número de teléfono enviado
Envía estos datos al perfil de usuario (campos personalizados agregados con ACF pro)

isotropic-2022-07-20-at-17-45-12 — El código, que fue generado por WSForm y agregado a WooCommerce, se envió por mensaje de texto a mi número enviado.