Popup de Sitio Web te permite captar números de teléfono, direcciones de email y otros datos del perfil del cliente sin sacar a los visitantes de tu sitio.
Es una misión de captura, no una misión agéntica ni una ruta. El popup crea o actualiza un perfil del cliente. Puedes asignar una ruta activa de bienvenida o seguimiento y, de forma opcional, un cupón. Guardar un dato de contacto no equivale por sí solo a completar una suscripción verificada.
Popup de Sitio Web se está habilitando de forma progresiva. Si aparece como A solicitud, está deshabilitado o no aparece en el grupo Captura dentro de Explorar misiones, confirma su disponibilidad con tu equipo de Hellotext antes de planificar el lanzamiento.
Cuándo usar Popup de Sitio Web
Usa Popup de Sitio Web cuando quieres:
- Captar datos de visitantes y, con una ruta y la verificación correspondientes, incorporarlos como personas suscritas.
- Captar un número de teléfono, email u otras propiedades del perfil del cliente.
- Presentar una oferta sin enviar al visitante a otra página.
- Usar más de un paso para mantener breve la primera interacción.
- Adaptar la experiencia para mobile y desktop.
- Iniciar una ruta de bienvenida después de la suscripción.
Usa un Formulario Web cuando el formulario deba vivir dentro de la página en lugar de abrirse sobre ella. Usa un Link Compartible cuando el opt-in comience fuera de tu sitio, por ejemplo desde redes sociales, un anuncio o un email.
Antes de empezar
Decide qué datos realmente necesitas al momento de la suscripción. Un número de teléfono o un email suele ser suficiente para el primer paso. Los campos adicionales pueden usar propiedades existentes del perfil del cliente, incluidas las propiedades personalizadas creadas por tu negocio.
También confirma:
- A qué canal se suscribe el visitante.
- Qué valor u oferta comunica el popup.
- Si se debe entregar un cupón después de la suscripción.
- Si una ruta debe comenzar al completar la captura.
- Quién puede instalar Hellotext en el sitio si hace falta una instalación manual.
- Que el aviso de consentimiento describa correctamente los mensajes que el visitante acepta recibir.
Para revisar elegibilidad por canal y consentimiento, consulta A quién puedes escribirle.
Crea el popup
- Abre Misiones y haz clic en Explorar misiones.
- Busca el grupo Captura y elige Popup de Sitio Web.
- Dale un nombre que identifique su ubicación o propósito.
- Construye los pasos de suscripción y el estado Completado.
- Revisa Estilo, Diseño y Ajustes.
- Haz clic en Guardar & Continuar para guardar el borrador y abrir la asignación opcional de cupón y ruta.
- Revisa el método de instalación antes de confirmar la activación del popup.
Los íconos de móvil y escritorio cambian la vista del editor. Vista previa abre una vista separada que permite revisar la experiencia sin publicar el popup. Revisa ambas mientras trabajas en lugar de considerar que la vista de desktop representa el resultado final para todos los visitantes.
Construye los pasos de suscripción
Un popup puede usar varios pasos. Esto te permite pedir primero un dato importante y solicitar más información solamente después de que el visitante continúa.
En cada paso puedes:
- Editar el título, texto de apoyo, botón, links y aviso de consentimiento.
- Agregar campos basados en propiedades estándar o personalizadas del perfil del cliente.
- Cambiar el placeholder de cada campo que lo admite.
- Marcar campos como obligatorios cuando el flujo no pueda continuar sin ellos.
- Agregar, eliminar, renombrar y reordenar pasos.
- Ver cómo se muestra el paso en mobile y desktop.
Usa el estado Completado para explicar qué ocurrirá después del formulario. La vista previa de este estado es una simulación de diseño; no confirma una suscripción, verificación o entrega real. Haz que este mensaje sea útil incluso cuando no hayas asignado un cupón.
No pidas todas las propiedades disponibles solo porque existen. Cada campo adicional exige más esfuerzo al visitante y puede reducir la cantidad de personas que completan el popup. Para publicar, incluye y marca como obligatorio al menos un campo de email o teléfono. Capta lo mínimo necesario para el primer seguimiento útil y enriquece el perfil más adelante mediante conversaciones, compras, formularios u otras señales.
Escribe textos claros para el popup
El visitante debería entender el valor, los datos solicitados y la siguiente acción antes de ingresar información.
- Comienza con el beneficio concreto o la razón para suscribirse.
- Usa el texto de apoyo para explicar qué recibirá el visitante, no para repetir el título.
- Haz que el botón describa la acción, por ejemplo Obtén mi descuento o Notifícame, en lugar de usar una etiqueta vaga.
- Mantén el primer paso lo bastante breve como para leerlo fácilmente en un teléfono.
- Mantén el aviso de consentimiento legible y separado de la promesa promocional.
- Haz que el estado completado explique si debe revisar WhatsApp, SMS o email, seguir comprando o esperar un seguimiento.
- No crees urgencia falsa ni prometas un cupón, canal de entrega o tiempo de respuesta que el flujo configurado no puede ofrecer.
Lee todos los pasos como una sola secuencia. Un buen primer paso igualmente puede resultar confuso si el segundo cambia la oferta, pide datos inesperados o usa una llamada a la acción diferente.
Configura el estilo, layout y apertura
El editor separa la configuración del popup en tres áreas:
| Área | Qué controla |
|---|---|
| Estilo | La tipografía, los colores de texto y fondo y el tamaño de fuente. Los controles del botón y de la cabecera se editan también desde esos elementos de la vista previa. |
| Diseño | La disposición usada en desktop y mobile. Cada dispositivo puede usar el layout que mejor se adapte a su pantalla. |
| Ajustes | Si el popup se abre automáticamente o primero aparece como una burbuja y si se muestra en mobile, desktop o ambos. |
Abre Estilo para revisar tipografía, colores y tamaño. Estos controles comparten la tipografía y los colores del popup.
Abre Diseño para comparar las disposiciones disponibles. Elige un layout separado para cada dispositivo y revisa el resultado con los íconos de móvil y escritorio.
Cuando el popup usa una burbuja, los visitantes ven un pequeño acceso flotante y abren el popup completo al seleccionarlo. Configura el texto, color de texto, color de fondo y alineación de la burbuja para que sea visible sin cubrir controles importantes del sitio.
El panel Ajustes muestra la selección de dispositivos y las opciones No mostrar burbuja y Mostrar una burbuja. En esta versión no presenta un selector de demora; no supongas que puedes programar un retraso desde ese panel.
El editor revisado no ofrece condiciones por URL, scroll, ubicación o visualizaciones anteriores. Confirma con Hellotext cualquier requisito de segmentación adicional antes de planificar el lanzamiento.
Elige el tamaño correcto de la imagen
La imagen del encabezado es el elemento visual más grande del popup, así que prepárala según el layout que elegiste. Sube cada imagen al doble del tamaño en que se muestra, para que se vea nítida en pantallas de alta densidad. Usa archivos JPG o PNG de hasta 10 MB.
Las medidas siguientes corresponden a la configuración por defecto: una imagen de 200 px de alto arriba y una imagen lateral que ocupa el 40 % del ancho. Si cambias el alto o el ancho de la imagen en el editor, súbela al doble del tamaño con el que termina mostrándose.
| Dónde se ve | Se muestra a | Sube a (2×) |
|---|---|---|
| Desktop, imagen arriba | 768 × 200 px | 1536 × 400 px |
| Desktop, imagen a un lado | Cerca de 307 × 450 px | 620 × 900 px |
| Mobile (todos los layouts) | 350 × 200 px | 700 × 400 px |
- Altura mínima: en desktop el popup nunca es más bajo que 450 px, así que una imagen a un lado debe cubrir al menos esa altura. Si tu popup es más alto por su contenido, la imagen lateral crece con él: revisa la altura en la vista previa y súbela al doble de esa altura.
- Mobile siempre usa la imagen arriba, sin importar el layout que elegiste para desktop.
- Cubrir o Ajustar: Cubrir llena el espacio y recorta los bordes cuando la proporción no coincide. Ajustar muestra la imagen completa y deja franjas del color de fondo.
- Deja lo importante cerca del centro, como un logo o el producto. Evita poner texto importante dentro de la imagen, porque se reduce en el teléfono.
Revisa la vista previa en desktop y mobile antes de publicar.
Asigna un cupón y una ruta
La asignación de cupón y ruta es opcional.
Selecciona una ruta activa con un disparador de suscripción para que el contacto entre al flujo de bienvenida. El formulario registra la captura de datos; la suscripción y la entrada a la ruta esperan la verificación de los datos de contacto requeridos. Una ruta desactivada no aparece como opción compatible.
Si también ofreces un cupón, revisa que la ruta contenga el mensaje que lo entrega. La asignación muestra una advertencia si falta la ruta o si el mensaje no contiene un cupón. Lee la advertencia antes de continuar: seleccionar un cupón no demuestra que ya se haya enviado.
La entrega requiere un canal disponible para los datos ingresados. El teléfono puede usar WhatsApp si la configuración y plantilla son compatibles, con SMS como alternativa; el email usa correo electrónico. No lo presentes como una elección automática del canal más barato.
El estado completado puede mostrar un destino y permitir cambiarlo o reenviar después de una espera, según la configuración. Comprueba ese flujo en tu instalación; las acciones del preview no son envíos reales.
Si no necesitas seguimiento, puedes dejar las selecciones vacías. El ejemplo muestra los controles y un cupón ficticio sin guardar la asignación; no muestra un mensaje enviado ni una ruta activa. Una captura sin ruta no debe presentarse como una suscripción completada.
Instala el popup
El paso de instalación ofrece los métodos disponibles para el sitio conectado:
- Instalación automática: úsala cuando aparece una tienda Shopify conectada o una integración compatible de VTEX o Fenicio. Las opciones no disponibles se muestran deshabilitadas.
- Instalación manual: instala Hellotext.js y luego agrega al sitio el código de inicialización generado para este popup.
Usa el código generado exactamente como aparece porque incluye los identificadores de tu negocio y del popup. Si un desarrollador o una agencia administra el sitio, envíale las instrucciones completas de instalación manual que aparecen en este paso.
Continuar en una opción automática confirma la publicación del popup. Con la opción manual, Continuar abre las instrucciones; la confirmación final con Cerrar publica el popup y registra su instalación. Revisa el diseño y prepara una prueba controlada antes de confirmar cualquiera de esas acciones. Una vista previa correcta no demuestra que Hellotext.js esté instalado ni que el envío de datos funcione en el sitio.
Prueba antes de publicar
Revisa primero los pasos y dispositivos con Vista previa. Después de una activación controlada, valida la experiencia en el sitio con datos de prueba autorizados, teniendo en cuenta que un envío real puede generar verificaciones, mensajes y entradas a rutas.
Confirma que:
- El popup se abre mediante la activación automática o la burbuja configurada.
- Aparece en los dispositivos mobile y desktop previstos.
- No cubre la navegación, checkout, controles de consentimiento u otras acciones esenciales del sitio.
- Cada paso cabe en la pantalla sin texto ni controles cortados.
- Los campos obligatorios detienen envíos incompletos y explican qué falta corregir.
- Los teléfonos, emails y otras propiedades llegan al perfil del cliente correcto.
- El aviso de consentimiento coincide con el canal y tipo de mensaje.
- El estado completado explica claramente la siguiente acción.
- El cupón asignado llega al destino esperado cuando la entrega está habilitada.
- La ruta asignada comienza una sola vez y no se superpone con otro flujo de bienvenida.
- Cerrar, volver a abrir y usar la burbuja funciona como esperas.
Repite la prueba en una ventana privada y en un teléfono real. Esto permite detectar problemas de instalación, sesión y layout responsive que la vista previa del editor no puede mostrar.
Si el popup no aparece
Revisa estos puntos en orden:
- Confirma que el popup se haya guardado, instalado y publicado.
- Confirma que Hellotext.js y el código de inicialización del popup carguen en la página.
- Revisa si el popup está limitado a mobile o desktop.
- Revisa si se abre automáticamente, o solamente desde una burbuja.
- Prueba en una ventana privada para evitar que una sesión anterior afecte el resultado.
- Confirma que el popup corresponda al sitio y dispositivo que estás probando.
- Vuelve a abrir el paso de instalación y compara el código generado con el que se ejecuta en el sitio.
Al reportar un problema, incluye el nombre del popup, URL probada, dispositivo, hora aproximada, forma de apertura y si el popup no apareció o falló después del envío.