Introducción

EWM Modal CTA es un plugin profesional para WordPress que permite la creación y gestión avanzada de modales interactivos. Está diseñado para la captura de leads a través de formularios multi-paso y para mostrar anuncios dinámicos, con una integración profunda con WooCommerce para potenciar las ventas.

Sus características clave incluyen un Custom Post Type (ew_modal) para una gestión organizada, un constructor visual basado en pestañas, un sistema de inyección automática para mostrar modales sin shortcodes, y una arquitectura optimizada para el rendimiento y la seguridad.

Instalación y Creación

Instalación del Plugin

1. Descarga el archivo .zip del plugin EWM Modal CTA.

2. En tu panel de administración de WordPress, ve a Plugins > Añadir nuevo.

3. Haz clic en el botón Subir plugin en la parte superior de la página.

4. Selecciona el archivo .zip que descargaste y haz clic en Instalar ahora.

5. Una vez instalado, haz clic en Activar plugin.

Crear un Nuevo Modal

Crear un modal es un proceso centralizado gracias al constructor visual:

1. En el menú de administración, ve a EWM Modals > Modal Builder.

2. Si es un modal nuevo, serás dirigido al constructor. Si deseas editar uno existente, ve a EWM Modals > All Modals y haz clic en “Editar”.

3. El constructor utiliza un sistema de pestañas para configurar todos los aspectos del modal.

Uso del Modal Builder

El constructor visual es el corazón del plugin y te permite configurar cada detalle de tu modal de forma intuitiva.

Pestaña General

Aquí defines la configuración base del modal:

• Modal Title: El título interno para identificar tu modal en el administrador.
• Modal Mode: Elige entre “Multi-Step Form” (para capturar datos) o “Announcement/Notification” (para mostrar un mensaje simple).
• Modal Active: Activa o desactiva el modal globalmente.
• Use global configuration: Permite que el modal se muestre automáticamente según las reglas de las pestañas “Triggers” y “Advanced”. Si se desactiva, solo funcionará con shortcode.

Pestaña Pasos y Campos

Esta sección te permite construir el contenido del modal:

• Añadir Pasos: Para modales de formulario, puedes crear múltiples pasos para dividir la captura de datos. Cada paso tiene su propio título, subtítulo y descripción.
• Añadir Campos: Dentro de cada paso, puedes agregar campos de formulario como texto, email, teléfono, área de texto, selectores, radios y checkboxes.
• Mensajes de Éxito: Configura el título y el mensaje que se mostrará al usuario después de completar el formulario con éxito.

Pestaña Diseño

Personaliza la apariencia de tu modal:

• Modal Size: Define el ancho del modal (Pequeño, Mediano, Grande).
• Animation: Elige la animación de entrada (Fade, Slide, Zoom).
• Colors: Selecciona los colores primarios, secundarios y de fondo para que coincidan con la identidad de tu marca.

Visualización y Triggers

Controla dónde, cuándo y cómo aparecen tus modales.

Reglas de Visualización (Pestaña Avanzado)

Define las condiciones para la inyección automática:

• Target Devices: Elige si el modal se mostrará en escritorio, tablet o móvil.
• Target Pages: Incluye o excluye el modal en páginas específicas (Home, Blog, páginas concretas).
• User Roles: Muestra el modal solo a ciertos roles de usuario (ej. todos, solo visitantes, solo administradores).
• Omit on WC pages: Evita que los modales generales aparezcan en páginas de productos o categorías de WooCommerce para no interferir con promociones específicas.

Configuración de Triggers (Pestaña Triggers)

Define las acciones que activarán el modal:

• Exit Intent: Se muestra cuando el usuario intenta abandonar la página.
• Time Delay: Aparece después de un número determinado de segundos.
• Scroll Trigger: Se activa cuando el usuario ha hecho scroll un porcentaje de la página.
• Manual Trigger: Permite activar el modal con un clic en un elemento específico (usando data-ewm-modal="ID").
• Display Frequency: Controla la frecuencia con la que un mismo usuario ve el modal (siempre, una vez por sesión, por día, etc.).

Uso de Shortcodes

Para un control manual, puedes insertar el modal en cualquier parte de tu contenido usando su shortcode. Después de guardar un modal, se generará un shortcode único que podrás copiar y pegar.

Ejemplo: [ew_modal id="123"]

Integración con WooCommerce

EWM Modal CTA incluye funcionalidades específicas para mejorar las conversiones en tiendas WooCommerce.

Activación y Configuración

1. En la pestaña General del constructor, marca la casilla “WooCommerce Integration”.

2. Esto activará una nueva pestaña llamada WooCommerce y adaptará la interfaz para crear un modal de promoción.

3. En la pestaña WooCommerce, podrás seleccionar un cupón de descuento existente en tu tienda.

Crear un Modal de Promoción

Una vez activada la integración:

• Selección de Cupón: Elige un cupón y el plugin mostrará sus detalles.
• Contenido de la Promoción: Escribe un título y descripción para la oferta. Puedes usar el botón “Auto-llenar” para generar texto basado en los detalles del cupón.
• Urgency Timer: Habilita un temporizador de cuenta regresiva para crear una sensación de urgencia y motivar la compra.
• Auto-aplicar Cupón: Configura el botón CTA para que aplique el cupón al carrito y redirija al usuario.

Estos modales están diseñados para aparecer en páginas de productos y evitar conflictos, por ejemplo, no mostrándose si un cupón similar ya está aplicado.

Gestión de Envíos

Todos los datos enviados a través de los formularios de los modales se guardan de forma segura y se pueden gestionar fácilmente.

1. En el menú de administración, ve a EWM Modals > Submissions.

2. Verás un listado de todos los envíos. Cada entrada muestra los datos enviados, el modal de origen y la página desde la cual se envió el formulario.

3. Puedes hacer clic en cada envío para ver los detalles completos.

Características Avanzadas

Seguridad y Sanitización

El plugin implementa un sistema de sanitización personalizado que protege contra ataques XSS sin eliminar el HTML necesario para el correcto funcionamiento de los formularios y el contenido del modal. Todas las entradas son validadas y el contenido de los campos se sanitiza de forma segura.

Rendimiento

EWM Modal CTA está optimizado para no afectar la velocidad de tu sitio. Los scripts y estilos solo se cargan en las páginas donde hay un modal activo, gracias a un sistema de detección inteligente que funciona tanto con shortcodes como con la inyección automática.

REST API

El plugin expone varios endpoints en la REST API de WordPress para funcionalidades como el envío de formularios desde el frontend, la obtención de datos de usuario para auto-relleno y la consulta de visibilidad de modales de WooCommerce. Esto permite integraciones avanzadas y un funcionamiento desacoplado (headless).