Popup de suscripción con cupón de bienvenida (sólo PRO)
El popup es una de las formas más eficaces de conseguir suscriptores en una tienda online: aparece en el momento adecuado, ofrece un descuento y pide solo el email. Con esta función tienes tu propio popup sin necesidad de Elementor ni de otros plugins.
Así funciona para el visitante:
- El popup aparece en tu tienda y le ofrece un descuento por suscribirse.
- Escribe su email y marca la casilla para aceptar recibir tus emails.
- En la misma ventana ve su código de descuento, que además ya queda aplicado a su carrito. No tiene que copiarlo ni esperar al email.
Y en tu Mautic, la persona aparece como contacto suscrito, con las etiquetas que elijas, dentro del segmento de tu newsletter y con la prueba de su consentimiento.
Puedes elegir cuándo sale, en qué páginas, en qué posición, cómo aparece y cómo se va, y su diseño completo: colores, fuente, tamaños, esquinas, bordes, sombra e imagen. Todo con una vista previa en vivo para ver cómo queda antes de guardar.
Antes de empezar necesitas:
- La versión PRO del plugin, conectada con Mautic (Conectar WordPress con Mautic).
- WooCommerce instalado y el módulo WooCommerce activado (Activar los módulos).
- El cupón de bienvenida activado y configurado (El cupón de bienvenida). Sin él, el popup solo suscribe, sin dar descuento.
Consejo: si ya usas un popup de Elementor con el cupón, puedes seguir usándolo. Este popup es una opción más, no sustituye a nada.
1. Activar el popup
- Ve a IndedLabs → Mautic PRO → Ajustes de Módulos → WooCommerce → Popup de cupón.
- Marca Activar popup (Mostrar el popup de suscripción en la tienda).
- Revisa el resto de opciones de esta sección, que te explicamos abajo.
- Pulsa Guardar cambios.
| Opción | Qué hace |
|---|---|
| Cuándo aparece | A los pocos segundos en la página, Cuando el visitante baja por la página (al llegar al tanto por ciento que indiques) o Cuando el visitante va a salir: cuando el ratón sale por arriba de la ventana, para ir a otra pestaña o cerrarla. |
| Mostrar a los | Los segundos que espera antes de aparecer. |
| Mostrar al llegar al | El tanto por ciento de la página que tiene que bajar el visitante (por ejemplo, 50 es la mitad). |
| Páginas | Todas las páginas, Solo la tienda (la tienda, las categorías y los productos), Solo la página de inicio o La tienda y la página de inicio. |
| Móvil | Si lo desmarcas, no aparece en los móviles. |
| Si el visitante lo cierra | Volver a mostrarlo pasados X días. |
| Etiquetas en Mautic | Las etiquetas que se añaden a quien se suscribe por el popup, separadas por comas. Por defecto, Popup. Así sabes en Mautic de dónde viene cada suscriptor. |
El popup nunca aparece en el carrito, el checkout ni en Mi cuenta, para no molestar a quien está comprando, ni a los clientes que ya están suscritos a tu newsletter. Quien se suscribe desde el popup no lo vuelve a ver en ese navegador.
Nota: en móviles y tablets no hay ratón, así que la opción Cuando el visitante va a salir no puede saberlo. En esos dispositivos el popup aparece pasados los segundos que indiques en Mostrar a los.
2. La vista previa
A la derecha de los ajustes tienes una vista previa del popup sobre una página de ejemplo. Cada cambio que hagas se ve al momento, sin necesidad de guardar, y la vista previa te acompaña mientras bajas por los ajustes.
Con los botones de arriba cambias lo que ves:
- Ordenador y Móvil: cómo se verá en cada tipo de pantalla.
- Formulario y Pantalla del cupón: el primer paso (donde se deja el email) y el segundo (el que ve tras suscribirse, con el código).
- Ver la entrada y Ver la salida: repiten las animaciones para que veas cómo aparece y cómo se cierra.
También puedes escribir un email en la vista previa y pulsar el botón para ver el paso del cupón. La vista previa no envía nada a Mautic ni crea cupones: usa un código de ejemplo.
Importante: la vista previa muestra los cambios, pero no los guarda. Cuando te guste cómo queda, pulsa Guardar cambios.
3. Posición y animación
| Opción | Qué hace |
|---|---|
| Posición en ordenador | Centrado, oscureciendo la página (el clásico), Esquina inferior derecha, Esquina inferior izquierda, Abajo en el centro o Arriba en el centro. |
| Posición en móvil | Centrado, Pegado abajo (sube desde el borde inferior, como las ventanas de las apps) o Pegado arriba. |
| Cómo aparece | Fundido, Zoom, entrando desde abajo, arriba, la izquierda o la derecha, o Sin animación. |
| Cómo se cierra | Igual, pero hacia fuera: fundido, zoom, saliendo hacia un lado o sin animación. |
| Velocidad de la animación | En milisegundos. 400 es una velocidad normal; con menos va más rápido y con más, más lento. |
Centrado, el popup oscurece la página y el visitante tiene que cerrarlo o suscribirse para seguir. En las esquinas y arriba o abajo no oscurece nada y el visitante puede seguir navegando con el popup a la vista: es una opción menos insistente.
Consejo: en móvil, Pegado abajo con la animación Entra desde abajo es la combinación que resulta más natural, porque es como funcionan muchas aplicaciones.
4. El diseño del formulario
Aquí das al popup el aspecto de tu marca.
| Opción | Qué hace |
|---|---|
| Colores | El color del fondo, del texto, del botón y del texto del botón. Pulsa sobre cada uno para elegirlo o pega el código de color de tu marca (por ejemplo, #1a73e8). |
| Fuente | La misma que la web usa la fuente de tu tema. Las demás (Arial, Verdana, Georgia...) son fuentes que ya tienen todos los dispositivos, así que no se carga nada de fuera y tu web no va más lenta. |
| Tamaño del título y Tamaño del texto | En píxeles. |
| Alineación del texto | Centrado o a la izquierda. |
| Ancho | El ancho máximo del popup, en píxeles. En móvil se adapta solo a la pantalla. |
| Margen interior | El espacio entre el borde del popup y su contenido. |
| Esquinas redondeadas | Por separado para el popup, los botones y el cupón, y el campo del email. Con 0 las esquinas quedan rectas; cuanto más alto, más redondeadas. |
| Borde | El grosor (0 es sin borde) y el color del borde del popup. |
| Sombra | Ninguna, suave o fuerte. |
| Oscurecido de la página | El color que cubre la página detrás del popup y su opacidad. Con 0 no se oscurece. Solo se usa cuando el popup está centrado o en el móvil. |
| Imagen | Una imagen opcional de tu biblioteca de medios: arriba, a la izquierda (en móvil pasa arriba) o de fondo. |
Consejo: si pones la imagen de fondo, elige un color de texto que se lea bien encima. Una imagen oscura con texto blanco suele funcionar bien.
Si has hecho muchas pruebas y quieres volver al principio, el botón Restaurar el diseño por defecto deja todos los valores de diseño como venían. Después, pulsa Guardar cambios.
5. El diseño de la pantalla del cupón
La pantalla que aparece después de suscribirse, con el código de descuento, puede tener su propio aspecto: por ejemplo, un fondo de otro color para celebrar el descuento o una imagen distinta.
| Opción | Qué hace |
|---|---|
| Colores | El fondo, el texto, el botón de copiar, el texto del botón de copiar y el marco del cupón (la línea discontinua que rodea el código). Si dejas un color vacío, se usa el del formulario. |
| Imagen | Otra imagen para esta pantalla. Si no eliges ninguna, se mantiene la del formulario. Marca Sin imagen en esta pantalla para quitarla. |
Para ver cómo queda, pulsa Pantalla del cupón encima de la vista previa.
6. Los textos
Todos los textos del popup se pueden cambiar. Si dejas uno vacío, se usa el texto por defecto, en el idioma de tu web.
| Texto | Dónde se ve |
|---|---|
| Título | El encabezado del formulario. Escribe {discount} donde quieras que aparezca el descuento de tu cupón. Por ejemplo, Consigue un {discount} en tu primer pedido se verá como Consigue un 10% en tu primer pedido. |
| Texto | Debajo del título. |
| Botón | El botón para suscribirse. |
| Casilla de consentimiento | El texto de la casilla que el visitante tiene que marcar. |
| Título tras suscribirse y Texto junto al cupón | La pantalla del cupón. |
| Título de agradecimiento sin cupón | Lo que se ve si no hay cupón que dar; por ejemplo, si has desactivado el cupón de bienvenida. |
Importante: el texto de la casilla de consentimiento se guarda en Mautic, en el campo Consent Text del contacto, junto con la fecha y la IP del visitante. Es tu prueba de que aceptó recibir tus emails, así que redáctalo con claridad (por ejemplo, Quiero recibir ofertas y novedades por email). Lo explicamos en El newsletter en el checkout.
7. Cómo lo ve tu cliente
Con el popup activado y guardado, abre tu tienda en una ventana privada del navegador (así lo ves como un visitante nuevo) y espera a que aparezca.
Tras suscribirse, el visitante ve su código y un botón para copiarlo. El descuento ya está aplicado a su carrito, también si todavía no ha añadido ningún producto: se aplica en cuanto añada el primero.
Además, recibe el email de bienvenida con su código, si lo tienes configurado en el cupón de bienvenida (El cupón de bienvenida).
8. Qué pasa en Mautic
Cada suscripción desde el popup:
- Crea el contacto en Mautic o, si ya existía, completa los datos que le faltan.
- Lo marca como suscrito (Accepts Marketing = Sí) y guarda la prueba del consentimiento: el texto de la casilla, la fecha y la IP.
- Le añade las etiquetas del popup y lo mete en el segmento del newsletter de tu tienda.
- Genera su cupón de bienvenida, igual que desde el checkout o un formulario de Elementor.
Si tienes activado el Registro de actividad, verás estas altas con el origen Popup de suscripción. Y si mides conversiones con Google Tag Manager, cada nuevo suscriptor envía el evento intmau_new_subscriber con method: popup.
Preguntas frecuentes
He activado el popup pero no me aparece. Revisa estas cosas:
- Que no hayas cerrado el popup antes en ese navegador (espera los días indicados o abre una ventana privada).
- Que no estés en el carrito, el checkout o Mi cuenta, y que la página esté entre las elegidas en Páginas.
- Que no hayas entrado con un usuario que ya está suscrito al newsletter.
- Si usas un plugin de caché, vacía la caché de la web después de guardar los cambios.
¿Qué pasa si alguien que ya tenía cupón se suscribe otra vez? No se crea un segundo cupón. Si el suyo sigue siendo válido, se le muestra de nuevo; si ya lo usó o caducó, se le avisa. Lo explicamos en El cupón de bienvenida.
¿El popup ralentiza mi web? No. Es un archivo pequeño que se carga al final de la página, no usa fuentes ni librerías externas y no cambia los estilos de tu tema.
¿Lo pueden usar los robots para llenar mi Mautic de contactos falsos? El popup tiene protecciones contra envíos automáticos y un límite de envíos por visitante, así que los robots lo tienen muy difícil.