Un formulario Flyout se desliza sin problemas desde el borde de la pantalla en lugar de aparecer en el centro como un popup tradicional. Proporciona alta visibilidad sin bloquear contenido, perfecto para campañas optimizadas para móviles.
Esta guía muestra cómo crear, personalizar y optimizar un formulario emergente para tu tienda.
Antes de empezar
Los formularios Flyout utilizan el mismo comportamiento y configuraciones de tema que los formularios popup. Para obtener detalles completos sobre los elementos, diseños, comportamientos y personalización de temas, consulte la Guía del Formulario de suscripción Popup.
El fragmento de JavaScript de Omnisend debe estar instalado en tu sitio web. Para Shopify, BigCommerce o WooCommerce, esto se agrega automáticamente cuando conectas tu tienda. Para plataformas personalizadas, instala el fragmento manualmente.
¿Por qué usar un formulario flyout?
Los flyouts ofrecen tres ventajas clave sobre los popups centrales:
Entrada no intrusiva: Se desliza desde el borde de la pantalla en lugar de bloquear el contenido abruptamente. Los visitantes pueden navegar mientras el formulario permanece visible.
Optimizado para móviles: Se adhiere sin problemas a los bordes de la pantalla sin márgenes horizontales ni recortes incómodos.
Visibilidad persistente: Permanece visible mientras se desplaza; el fondo sigue siendo completamente interactivo y clicable.
💡 Mejor para: Tiendas móviles, ofertas de intención de salida y campañas sutiles de construcción de listas.
Cómo crear un formulario emergente
Paso 1. Crear un nuevo formulario emergente
Ve a Formularios → Crear Formulario → Tipo → Desplegable → Elige una plantilla.
💡 También puedes cambiar el estilo de un formulario existente (por ejemplo, de Popup a formulario Flyout) en Configuraciones de tema → Diseño del formulario.
Paso 2. Personaliza tu formulario
Utiliza el constructor de formularios de arrastrar y soltar para ajustar:
Elementos: Agregar o eliminar campos (correo electrónico, teléfono, nombre), botones, imágenes, bloques de texto o casillas de verificación de consentimiento legal.
Diseños: Elige un paso único o múltiples pasos (recoge el correo electrónico primero, luego el teléfono en el Paso 2). Aprende más sobre formularios de varios pasos
Copia: Escribe titulares orientados a la acción (por ejemplo, "Obtén un 15% de descuento en tu primer pedido" en lugar de "Suscríbete a nuestro boletín").
Mensaje de éxito: Personaliza lo que los visitantes ven después de enviar (texto de agradecimiento o código de descuento).
💡 Consejo: Mantén los campos al mínimo – los formularios solo de correo electrónico convierten un 20–30% más que las versiones de múltiples campos.
Paso 3. Configurar ajustes de comportamiento
Controla cuándo, dónde y a quién aparece tu formulario emergente:
Disparadores de visualización
Elige uno o más:
Tiempo en la página: Mostrar después de 6–10 segundos (recomendado para visitantes primerizos).
Profundidad de desplazamiento: Trigger al 50% de desplazamiento (bueno para publicaciones de blog).
Intención de salida: Mostrar cuando los visitantes se mueven para cerrar la pestaña (escritorio y móvil).
Trigger personalizado: Utiliza eventos de JavaScript para escenarios avanzados. Ver guía de disparadores personalizados
Nota: Todos los disparadores utilizan lógica "O" – si configuras "10 segundos O 50% de desplazamiento," el formulario aparece cuando cualquiera de las condiciones se cumple.
Segmentación
Decide quién ve el formulario:
Todos los visitantes: Mostrar a todos.
No mostrar a contactos existentes: Dirigirse solo a nuevos visitantes (recomendado para evitar molestar a los suscriptores).
Segmentación por página: Mostrar en URL específicas (por ejemplo,
/collections/sale) o excluir páginas (por ejemplo,/pago).Segmentación por ubicación: Mostrar a visitantes en países o regiones específicas.
Frecuencia
Establece con qué frecuencia el formulario reaparece para el mismo visitante:
Una vez por sesión: Se cierra después de ser desestimado; reaparece en la próxima visita.
Una vez cada X días: Se oculta durante 7/14/30 días después de verlo.
Redirigir después de la presentación
Usa Redirigir después de la presentación para enviar automáticamente a los visitantes a una URL seleccionada después de que envíen el formulario.
5bc Aprende más: Configuraciones del comportamiento de formularios de inscripción.
Paso 4. Personaliza la configuración del tema
Ajusta el flyout a tu marca:
Diseño del formulario: Confirmar tipo de visualización = Flyout. Ajustar ancho (móvil vs. escritorio).
Posición: Elige el borde izquierdo o derecho (los flyouts se deslizan desde los lados, no desde el centro).
Colores: Establece los colores de fondo, botón y texto para que coincidan con el tema de tu tienda.
Fuentes: Usa las fuentes de tu marca o las predeterminadas de Omnisend.
Botón de cerrar: Mostrar/ocultar el botón X; ajustar color y estilo.
5bc Aprende más: Configuraciones del tema de formularios de inscripción.
Paso 5. Agregar un teaser (opcional)
Un teaser es un pequeño botón que permanece visible después de que se cierra el formulario emergente. Al hacer clic, se reabre el formulario completo.
Para agregar: Desplázate hasta el menú inferior en el Creador de Formularios 9d039f0 + icono 9d039f0 Teaser.
4a1 Mejor para: Flyouts de intención de salida u ofertas de descuento da a los visitantes una segunda oportunidad para registrarse sin volver a activar el deslizamiento completo.
Paso 6. Habilitar tu formulario
Haz clic en Habilitar formulario en el menú superior izquierdo. Tu flyout se activará inmediatamente en tu sitio web.
Antes de habilitar, verifica:
La vista previa móvil se ve bien (prueba en el teléfono o usa la vista móvil del Creador de Formularios).
Las reglas de segmentación son correctas (no quieres flyouts en las páginas de pago).
La casilla de verificación de consentimiento legal está habilitada si es necesario (cumplimiento del RGPD). Ver guía de RGPD.
Rastrear rendimiento
Después de habilitar, monitorea los resultados en Informes 9d039f0 Formularios 9d039f0 Abre el informe dedicado de tu flyout.
Métricas clave:
Vistas: Cuántos visitantes vieron el flyout.
Envíos: Cuántos enviaron el formulario.
Tasa de inscripción: Cuántos se registraron como nuevos suscriptores.
💡 Consejo: Ejecuta un Prueba A/B para comparar las tasas de conversión de flyout vs. popup para tu audiencia.
FAQ
¿Cuál es la diferencia entre un flyout y un popup?
Los formularios emergentes se deslizan desde el borde de la pantalla; los popups aparecen en el centro con un fondo atenuado. Ambos utilizan la misma segmentación, activadores de visualización y opciones de personalización. Los flyouts son menos disruptivos, especialmente en móviles.
¿Puedo agregar un teaser a un flyout?
Sí. Agrega un teaser en el Creador de Formularios (menú inferior 9d039f0 + icono 9d039f0 Teaser).Después de que se cierra el flyout, el botón del teaser permanece visible. Al hacer clic se reabre el formulario completo.
¿Debería usar flyout o popup para visitantes móviles?
Los flyouts son mejores para móviles porque no bloquean toda la pantalla. Los visitantes pueden desplazarse y navegar mientras el flyout permanece visible en el lado.
¿Puedo recopilar tanto correo electrónico como SMS en un solo flyout?
Sí. Add both Email Input and Phone Number fields. For higher completion rates, use a para recopilar correo electrónico en el Paso 1, teléfono en el Paso 2.
¿El flyout funciona con intención de salida en móviles?
Sí. La intención de salida en móviles se basa en un desplazamiento rápido hacia arriba (detectado cuando los visitantes deslizan para cerrar la pestaña).
¿Puedo cambiar en qué lado aparece el flyout (izquierda vs. derecha)?
Sí. Ir a Configuraciones del tema → Diseño del formulario → Posición y seleccionar Izquierda o Derecha. Esto determina desde qué borde de la pantalla se desliza el flyout.
¿Puedo redirigir a los visitantes a una página de agradecimiento después de la inscripción?
Sí. Configura tus ajustes de redirección enConfiguraciones de comportamiento → Redirigir después de la presentación.
¿Puedo programar mi flyout para que se muestre solo durante fechas específicas (por ejemplo, Black Friday)?
Sí. Ir a Comportamiento → Programar y establecer fechas de inicio/fin. Tu flyout solo aparecerá durante ese período. Perfecto para campañas estacionales, ventas flash u ofertas por tiempo limitado.
¿Necesitas ayuda con algo? Nuestro equipo de soporte está listo para ayudar a través de chat en la aplicación o en [email protected].