Empieza con una plantilla, describe tu campaña y mejora el resultado mediante una conversación. En Onvocado, el diseño aparece junto al chat para que puedas revisar el texto, el formulario y la versión móvil mientras trabajas.
Esta guía sigue una oferta de bienvenida de MOSS, una marca ficticia de cuidado de la piel, por el editor actual: elegir una plantilla, aplicar las indicaciones, añadir un campo, ajustar la versión móvil, probar el registro y revisar las reglas de visualización. Las capturas son recientes y el vídeo es una grabación real de la aplicación.
El proceso: elige un objetivo y una plantilla, adapta el diseño con IA, revisa ordenador y móvil, prueba el formulario, configura la visualización, revisa y publica. Después, instala el fragmento de código de tu sitio y comprueba un registro en la web.
Las capturas muestran la interfaz en inglés. Las indicaciones se han traducido al español; conservamos el texto del ejemplo y los nombres de los controles en inglés para que puedas compararlos con las imágenes. El vídeo incluye capítulos en español.
Para más ideas, consulta nuestros ocho ejemplos de popups e indicaciones de IA (en inglés). Aquí completamos un único flujo práctico.
Antes de empezar: elige un objetivo de registro
Para una primera campaña de ecommerce, elige una tarea: captar un correo a cambio de una oferta de bienvenida real, invitar a una newsletter o crear una lista de acceso anticipado. Evita pedir a un solo popup que explique todos tus productos y recopile todos los datos del cliente.
Prepara lo siguiente:
- Tu web y una forma de instalar código personalizado, directamente o mediante una configuración compatible de tu plataforma o gestor de etiquetas.
- Un titular breve, un beneficio claro y los campos que realmente necesitas.
- Los colores de tu marca y una imagen que tengas permiso para utilizar, si el diseño la necesita.
- Un código de descuento, archivo o enlace de destino real, si lo prometes.
- La información de privacidad y las opciones de consentimiento adecuadas para la campaña.
Un popup no crea un descuento en el checkout ni envía una newsletter solo porque el texto lo mencione. Configura esas acciones en tu tienda o plataforma de email y pruébalas.
1. Elige una plantilla y escribe las indicaciones
Abre la biblioteca de plantillas y elige un punto de partida próximo a tu objetivo. Para este ejemplo seleccionamos The Sunday edit, cuya ilustración botánica encaja con una campaña de cuidado de la piel de estilo tranquilo.
Selecciona Use template («Usar plantilla»). La siguiente pantalla pregunta qué estilo quieres usar y si deseas cambiar algo. Conservamos el estilo de la plantilla y enviamos las indicaciones de campaña siguientes para mantener su ilustración.
Crea una oferta de bienvenida tranquila para MOSS, una tienda de cuidado botánico de la piel. Usa un fondo marfil (#FAF7F0), verde bosque oscuro (#173D31), un titular con tipografía serif cálida y detalles en verde salvia. Titular: “A little care, on us.” Texto: “Join MOSS for 10% off your first order.” Botón: “Get my welcome offer”. Conserva un único campo de correo obligatorio, la opción de consentimiento existente y la ilustración botánica. Mantén todo el formulario legible en ordenador y móvil.
Pulsa Start designing («Empezar a diseñar») y revisa el resultado. Utiliza tu propia oferta, información de privacidad y destino. Mencionar un 10% de descuento no crea un código válido en la tienda: debes configurarlo y probarlo por separado.
2. Revisa el primer diseño de la IA
La primera solicitud cambió el titular, el mensaje y los colores, y conservó el campo de correo, la opción de consentimiento y la ilustración botánica. El resultado apareció junto a la conversación de edición, con vistas para ordenador y móvil.
Lee el titular y el botón, comprueba los campos obligatorios y revisa los elementos que pediste conservar. El primer borrador ofrece una base concreta para mejorar. En este ejemplo, el pequeño texto sobre el titular y parte de la tipografía aún necesitaban otra solicitud.
3. Añade un campo y ajusta los detalles
A continuación pedimos un campo opcional para el nombre:
Añade un campo opcional para el nombre encima del campo de correo. Etiquétalo First name. Conserva la oferta, la ilustración, el correo obligatorio y la opción de consentimiento.
La IA añadió el campo, pero lo colocó inicialmente debajo del correo. La vista previa permitió detectar la diferencia. Enviamos otra solicitud para corregir el orden y ajustar los detalles de la marca:
Cambia el pequeño texto sobre el titular a MOSS SKINCARE. Mueve el campo opcional First name antes de Email address dentro del mismo formulario; no añadas un duplicado. Usa una fuente sans-serif system-ui para el cuerpo, las etiquetas y el botón, manteniendo el titular serif. Conserva la oferta, la ilustración, las claves de los campos, el consentimiento y las acciones de confirmación.
Una última solicitud concretó la tipografía del titular y mantuvo sencillos el cuerpo y los controles:
Establece explícitamente Georgia como fuente del titular de la oferta, con un tamaño de 38px en ordenador y 28px en móvil. Mantén el cuerpo, las etiquetas y el botón en system-ui. No cambies el texto, el orden de los campos, los requisitos, los colores, la ilustración ni las acciones.
Haz solicitudes concretas y comprueba lo que se ha guardado. Si un cambio empeora el diseño, usa Undo y prueba una instrucción más precisa. Mide los registros por separado para evaluar el efecto del diseño en las conversiones.
4. Revisa el móvil antes de continuar
Cambia a Mobile y revisa todo el formulario. El primer ajuste móvil de este recorrido utilizó la siguiente solicitud:
Solo en móvil, establece el titular en 28px y reduce el espacio alrededor del formulario para que el botón de registro quepa con comodidad. Mantén los estilos de ordenador, las etiquetas y todo el texto sin cambios.
La vista móvil final también incluye los ajustes posteriores de marca, orden de campos y tipografía. Muestra el nombre opcional, el correo obligatorio, la opción de consentimiento y la acción de registro en un flujo vertical.
Vuelve a ordenador y compara también esa versión. Revisa las etiquetas largas, los errores de validación y el formulario con el teclado del teléfono abierto. Para una visualización respetuosa, consulta la guía de popups no intrusivos.
Mira el recorrido por la versión actual de v2
Esta grabación sigue el mismo borrador de MOSS por el editor actual. Incluye solicitudes reales de IA, vistas adaptables, la prueba del formulario, la configuración de visualización y la revisión. Se han acortado las esperas largas de procesamiento y los periodos sin actividad.
Descargar el vídeo MP4 en 1080p.
Los capítulos en español están incluidos en el vídeo. El reproductor ofrece además una pista de subtítulos en español.
Recorrido en texto
- Elige una plantilla y escribe las indicaciones de campaña.
- Revisa el primer diseño de bienvenida de MOSS.
- Añade un campo opcional para el nombre.
- Revisa el móvil y aprueba el diseño.
- Ajusta la marca y el orden de los campos.
- Compara móvil y ordenador.
- Especifica la tipografía que necesitas.
- Prueba el registro y la confirmación con datos ficticios.
- Configura la visualización y revisa el flujo completo.
5. Prueba el formulario y la confirmación
Usa Test the popup («Probar el popup») para recorrer el proceso como visitante. Prueba valores incorrectos y campos obligatorios vacíos; después, completa un registro válido. Si un campo es opcional, prueba también a dejarlo vacío.
En este recorrido introdujimos datos de contacto ficticios, enviamos el formulario de vista previa y llegamos a la confirmación:
En una oferta de bienvenida, comprueba qué recibe realmente el visitante. Sustituye los marcadores por un código válido, un enlace o una explicación clara antes de publicar. En recorridos más largos, prueba cada transición y verifica que el envío final contenga los campos previstos. La guía de popups de varios pasos ayuda a planificar la secuencia.
6. Configura la visualización y revisa el flujo
Selecciona Continue to targeting («Continuar a las reglas de visualización») para decidir dónde y cuándo aparece la campaña. Mencionar un público o un retraso en una solicitud de diseño no configura estas reglas.
- Cuándo: elige un retraso, una condición de desplazamiento o una regla compatible de intención de salida en ordenador.
- A quién: comprueba el sitio, los filtros de páginas y los dispositivos.
- Con qué frecuencia: revisa la repetición y el comportamiento después del cierre.
Continúa a Review («Revisión»). Inspecciona cada pantalla y ambas vistas, y comprueba la información de instalación y entrega de contactos antes de publicar.
La siguiente acción es Publish campaign («Publicar campaña») cuando tu campaña esté lista. La grabación termina en la revisión; completa la configuración de tu web con las comprobaciones siguientes.
7. Publica, instala y verifica un registro en tu web
El recorrido grabado termina en Review. Para mostrar la campaña en la web, completa la publicación y la instalación.
Publicar una campaña y añadir el fragmento de código al sitio son pasos distintos. El visitante necesita una campaña activa, el código del sitio correcto y unas reglas que se cumplan.
- Copia el código de instalación de tu sitio. Usa el fragmento proporcionado para esa web y sigue el procedimiento compatible de código personalizado o gestor de etiquetas de tu plataforma.
- Instálalo una sola vez en las páginas previstas. Comprueba el estado de instalación y visita la web pública. La vista previa del editor no demuestra que el código esté instalado.
- Publica o activa la campaña revisada. Verifica el sitio, las páginas, los dispositivos y los tiempos.
- Visita la web como usuario de prueba. Usa un contexto de navegación limpio cuando corresponda para evitar que un cierre o envío anterior suprima el popup. Comprueba ordenador y teléfono.
- Envía datos identificados como prueba. Verifica la confirmación y que el registro aparezca en Leads con los valores previstos.
- Comprueba las conexiones prometidas. Si conectaste una plataforma de email compatible, confirma el registro de destino y el estado de entrega. Configura las newsletters y mensajes posteriores en esa plataforma.
Usa las instrucciones de instalación de tu cuenta. Cuando corresponda, consulta la integración con WordPress (en inglés) o la configuración de Google Tag Manager (en inglés). El directorio de integraciones incluye las conexiones y sus requisitos.
Si el popup no aparece, comprueba la web, el código, la publicación, las exclusiones, el disparador, los dispositivos y el historial de frecuencia antes de cambiar de nuevo el diseño. Si aparece pero el contacto no llega a una herramienta externa, revisa la conexión y la entrega por separado.
Después del lanzamiento: mide la acción que buscabas
Mide las visualizaciones elegibles del popup y los registros válidos durante el mismo periodo, y revisa el móvil por separado. Un cambio puede mejorar el aspecto sin aumentar los registros. Aplica los principios de las pruebas A/B para preparar una comparación justa cuando el tráfico y los controles disponibles lo permitan.
Por ejemplo, 20 registros válidos entre 1.000 visualizaciones elegibles equivalen a una tasa del 2%. Es un cálculo ilustrativo, no una referencia de Onvocado ni una promesa para tu tienda.
Empieza con una campaña clara, verifica que lleguen los contactos y decide el siguiente cambio a partir de lo observado. Explora las plantillas o el caso de uso de captación de correos para encontrar un punto de partida.
Sobre este ejemplo
MOSS es una marca ficticia. Las capturas y la grabación se realizaron en la versión actual de v2 el 26 de octubre de 2026, con solicitudes reales de IA y datos ficticios. El vídeo está editado para agilizarlo. Se comprobó el registro en vista previa; la instalación en producción, la entrega real a una plataforma de email y las mejoras de conversión quedan fuera de la grabación.
