Ir al contenido principal

Popup Multi-Step: Guía paso a paso

En este artículo vas a aprender a crear un popup de tipo multi-step desde 0.

Armá un popup de varios pasos totalmente a tu medida con un editor de arrastrar y soltar (drag-and-drop): hacé preguntas tipo quiz, pedí el email y el teléfono, y mostrá una pantalla de éxito con el cupón. Al dividir la captación en pasos cortos, reducís la fricción y conseguís más suscriptores y mejor información de tus clientes. Y como los demás popups, también impulsa tus ventas: ¡los visitantes se llevan un cupón de descuento al participar!


¿Cómo crear un popup?

Hacé clic en "Crear popup" y elegí la plantilla de Multi-Step.

En la pantalla de edición vas a encontrar:

  • A la izquierda: el panel para agregar bloques.

  • En el centro: la vista previa en vivo de tu popup (con botones para alternar entre escritorio y móvil).

  • A la derecha: el panel de propiedades de lo que tengas seleccionado.

  • Arriba: la barra de pasos, donde agregás, reordenás y editás cada paso.


¿Cómo funciona el editor?

El popup se arma con pasos y, dentro de cada paso, con bloques.

  • Pasos: son las pantallas por las que avanza el visitante. Podés crear pasos de tipo Pregunta/Quiz, Email, Teléfono/SMS, paso personalizado y Éxito. Los reordenás arrastrándolos desde la barra superior.

  • Bloques: son los elementos dentro de cada paso. Los arrastrás desde el panel izquierdo al lienzo (o hacés clic para agregarlos), los reordenás arrastrándolos, y al seleccionarlos los editás en el panel derecho.


¿Qué se puede configurar?

Bloques disponibles

  • Texto: con editor enriquecido (negrita, cursiva, títulos, alineación).

  • Imagen: subila y elegí ancho y alineación.

  • Botón: definí el texto y la acción (avanzar al paso siguiente, enviar y finalizar, cerrar el popup o abrir una URL).

  • Espaciador: para dar aire entre bloques (con o sin línea divisoria).

  • Campos (inputs): Email, Teléfono, Nombre, Cumpleaños y campos personalizados. Cada uno con su etiqueta, placeholder y opción de obligatorio.

  • Opciones / Quiz: botones, checkboxes o lista desplegable. Podés permitir selección única o múltiple y que al elegir avance solo al paso siguiente.

  • Cupón: muestra el código ganado en la pantalla de éxito, con botón para copiarlo.

Diseño (Estilos)

Personalizá la tipografía, el tamaño del popup, el redondeo, los colores (primario, texto, botones, fondo) y el color del fondo difuminado (backdrop).

También configurás la imagen lateral:

  • En escritorio: sin imagen, a la izquierda o a la derecha.

  • En móvil (donde los costados no entran): ocultarla, ponerla de fondo, arriba o abajo.

Además podés activar un link "No, gracias" configurable (texto y color) que cierra el popup.

Texto

Todos los textos del popup son totalmente editables, de principio a fin: títulos, subtítulos, botones, etiquetas de los campos, opciones del quiz, etc.

Cupones

Elegí el tipo de recompensa:

  • Sin descuento: solo captás el lead (no se muestra ningún código).

  • Generar cupón automático: se crea un código exclusivo y de un solo uso para cada visitante (con tipo de descuento, valor y prefijo configurables).

  • Cupón existente de la tienda: usás un código que ya tenés creado en tu tienda.


Configuración avanzada

Desde la pestaña Config vas a poder definir:

  • Cuándo mostrar el popup: al entrar al sitio o según condiciones (al intentar salir, después de X segundos, o al scrollear X píxeles).

  • Frecuencia: mostrarlo en cada visita o limitar las repeticiones por día, semana o mes.

  • Cuándo dejar de mostrarlo: cuando el visitante ya se suscribió o tras X impresiones.

  • En qué dispositivos aparece: escritorio, móvil y/o tablet.

  • Filtro por URL: mostrarlo solo en ciertas páginas u ocultarlo en otras.

  • Si permitís que un mismo email participe más de una vez.

  • Cómo entregar el cupón:

    • En la pantalla de éxito.

    • Por email (con plantilla editable: remitente, asunto, textos, botón, color).

    • Ambos.

    • Solo integración externa: el código no se muestra ni se envía por email; se lo hacés llegar al cliente mediante un webhook o tu plataforma de email marketing.


Email

Si elegís entregar el cupón por email (o ambos), desde la pestaña Email configurás la plantilla completa: email remitente, asunto, nombre de la tienda, textos, aviso legal, texto del botón, URL del sitio y color.


Funciones Pro

  • Test A/B: probá distintas versiones del popup y quedate con la que mejor convierte.

  • Atribución de ventas: Nuby vincula las compras hechas con el cupón al popup que las generó.

  • Respuestas del quiz: las respuestas de cada visitante se guardan junto al suscriptor y, si tenés una integración activa, se envían a tu webhook para que las uses en tu segmentación.

  • Multi-idioma: el popup se muestra automáticamente en español, inglés o portugués según el idioma del visitante.


¡Listo!

Una vez que termines de configurarlo, hacé clic en Guardar y tu popup queda activo en tu tienda. Podés editarlo, duplicarlo o pausarlo cuando quieras desde la sección de Campañas.

¿Ha quedado contestada tu pregunta?