> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nubea.com.ar/llms.txt
> Use this file to discover all available pages before exploring further.

# Popup para captar emails y teléfonos

> Captá emails y teléfonos con popups personalizables que se disparan cuando vos quieras.

## Cómo funciona

Los popups de Nubea son ventanas emergentes que aparecen en tu tienda para
captar emails, teléfonos o entregar cupones de descuento. Vos definís el diseño,
los campos del formulario y el momento exacto en que se muestran al visitante.

***

## Elegí el formato: Popup o Ruleta

Cuando creás una campaña popup en Nubea elegís entre **dos formatos**. Los dos
son formularios emergentes que captan emails y teléfonos — cambia cómo entregan
el incentivo.

<div
  style={{
maxWidth: 600,
padding: 20,
background: '#0f0f11',
border: '1px solid #1f2937',
borderRadius: 12
}}
>
  <div
    style={{
  fontSize: 11,
  color: '#9ca3af',
  marginBottom: 4,
  textTransform: 'uppercase',
  letterSpacing: 0.5,
  fontWeight: 600
}}
  >
    Paso 1 de 5
  </div>

  <div style={{ fontSize: 16, fontWeight: 600, color: '#fff', marginBottom: 14 }}>
    Tipo de popup
  </div>

  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
    <div
      style={{
    padding: 16,
    background: '#1a1a1f',
    border: '2px solid #3B82F6',
    borderRadius: 10,
    position: 'relative'
  }}
    >
      <div
        style={{
      position: 'absolute',
      top: 10,
      right: 10,
      width: 18,
      height: 18,
      borderRadius: '50%',
      background: '#3B82F6',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: '#fff',
      fontSize: 11,
      fontWeight: 700
    }}
      >
        ✓
      </div>

      <div style={{ fontSize: 24, marginBottom: 8 }}>📩</div>

      <div
        style={{
      fontWeight: 600,
      fontSize: 14,
      color: '#fff',
      marginBottom: 4
    }}
      >
        Popup clásico
      </div>

      <div style={{ fontSize: 12, color: '#9ca3af', lineHeight: 1.5 }}>
        Captura simple con un cupón fijo
      </div>
    </div>

    <div
      style={{
    padding: 16,
    background: '#1a1a1f',
    border: '1px solid #2d2d35',
    borderRadius: 10
  }}
    >
      <div style={{ fontSize: 24, marginBottom: 8 }}>🎡</div>

      <div
        style={{
      fontWeight: 600,
      fontSize: 14,
      color: '#fff',
      marginBottom: 4
    }}
      >
        Ruleta de premios
      </div>

      <div style={{ fontSize: 12, color: '#9ca3af', lineHeight: 1.5 }}>
        El visitante gira y gana un cupón aleatorio
      </div>
    </div>
  </div>

  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
    <button
      style={{
    background: '#3B82F6',
    color: '#fff',
    border: 0,
    borderRadius: 6,
    padding: '8px 16px',
    fontSize: 13,
    fontWeight: 600,
    cursor: 'pointer'
  }}
    >
      Siguiente →
    </button>
  </div>
</div>

<CardGroup cols={2}>
  <Card title="Popup clásico" icon="window-restore">
    **Cómo funciona:** el visitante deja sus datos y recibe un cupón fijo
    (o nada).

    **Cuándo conviene:** captura simple, lead magnet (newsletter) o bienvenida
    con **un solo cupón** (ej. "10% off para nuevos").

    Más prolijo, sin gamificación.
  </Card>

  <Card title="Ruleta de descuentos" icon="dharmachakra" href="/funcionalidades/ruleta">
    **Cómo funciona:** el visitante deja sus datos, gira la ruleta y "gana"
    un cupón aleatorio.

    **Cuándo conviene:** eventos comerciales (Hot Sale, Cyber, Black Friday)
    y cuando querés **gamificar la captura** para que el cupón se sienta ganado.

    Convierte mejor pero pide más setup (un cupón por premio).
  </Card>
</CardGroup>

<Tip>
  Ambos son la misma feature de fondo (captura de datos + cupón), así que las
  buenas prácticas de copy, momento de aparición y diseño aplican a los dos. La
  diferencia es la mecánica de entrega del cupón.
</Tip>

Esta página cubre el **popup clásico**. Para la mecánica de la ruleta, la
configuración de premios y probabilidades, mirá la
[guía de Ruleta de descuentos →](/funcionalidades/ruleta).

***

## Requisitos

* Tienda conectada ([Tiendanube](/guias/conectar-tiendanube) o
  [Shopify](/guias/conectar-shopify)).
* Las campañas popup funcionan en **todos los planes**, incluido el trial de 15
  días.
* Sin límite de cuántas veces se muestra.

***

## Pasos

<Steps>
  <Step title="Entrá a Campaña popup" icon="window-restore">
    En el menú lateral, sección **Marketing**, hacé click en **Campaña popup**.

    Si es la primera vez, te aparece un cartel de bienvenida con tour guiado. Lo
    podés cerrar con "Siguiente" → botón de cerrar.
  </Step>

  <Step title="Definí el comportamiento general" icon="gear">
    Andá a la pestaña **Configuración** y desplegá el acordeón **Comportamiento**.

    El campo clave es **Aparece después de (segundos)**: cuántos segundos
    espera el sistema antes de mostrar el popup desde que el visitante entra a
    la página. El default es 10. Probar con 30 suele tener mejor resultado
    (deja que el visitante explore antes de interrumpirlo).

    <Tip>
      No te olvides de activar el switch **Activado** al final, si no, no se
      muestra en tu tienda.
    </Tip>
  </Step>

  <Step title="Diseñá el popup" icon="palette">
    El acordeón **Diseño del popup** tiene varias sub-pestañas. Acá editás todo
    lo visual:

    * **Plantillas**: galería con varias opciones pre-armadas (Bold, Minimal,
      Temporada, entre otras). Click en una y se aplica al instante.
    * **Layout**: elegís la disposición — **Centrado (clásico)**, **Pantalla
      completa**, **Imagen a la izquierda**, **Imagen a la derecha**. Si elegís
      un layout con imagen, tenés que subirla; si no, el sistema te bloquea el
      guardado.
    * **Imagen**: subís el archivo (JPG/PNG). Recomendado al menos 600px de
      ancho para que no se pixele.
    * **Colores**: cambiás fondo del popup, color de los botones y color del
      texto. Usás código Hex (ej: `#2360E5`) o el selector visual.
    * **Contenido**: editás título, descripción, texto del botón principal y
      texto del botón secundario (ej: "No, gracias"). La vista previa a la
      derecha se actualiza en tiempo real.

          <img src="https://mintlify.s3.us-west-1.amazonaws.com/nubea/images/docs/popup-plantillas.png" alt="Galería de plantillas de popup" />

    <Tip>
      Probá una plantilla cercana a tu marca y después solo retocá colores y
      copy. Es más rápido que armar uno desde cero.
    </Tip>
  </Step>

  <Step title="Configurá los campos del formulario" icon="list-check">
    Pestaña superior **Qué le pedís al visitante**. Por default viene con
    email. Hacé click en **Agregar campo** para sumar nombre, teléfono, fecha
    de nacimiento, etc.

    Más abajo activás el **Checkbox de consentimiento** (GDPR). Podés marcarlo
    como obligatorio para que el visitante no pueda suscribirse sin aceptar.

    <Warning>
      Cuantos más campos pidas, menos gente se suscribe. Empezá con email solo y
      sumá campos cuando necesites segmentar.
    </Warning>
  </Step>

  <Step title="Elegí cuándo se activa el popup" icon="bolt">
    La pestaña **Cuándo aparece** te deja decidir **en qué momento querés que
    aparezca el popup** al visitante. Podés combinar varios:

    * **Después de X segundos**: aparece pasado un tiempo desde que entró a la
      página. El más usado. Probar entre 15-30s.
    * **Al hacer scroll**: aparece cuando bajó cierto % de la página (ej: 25%,
      50%). Útil para no interrumpir si el visitante se fue rápido.
    * **Cuando el visitante está por irse (exit intent)**: detecta cuando el
      cursor va hacia el botón de cerrar la pestaña. Última oportunidad antes
      de que se vaya.

    <Info>
      **En celulares no hay cursor**, así que "cuando el visitante está por
      irse" se reemplaza automáticamente por una demora de tiempo. El sistema
      lo aclara cuando lo elegís.
    </Info>
  </Step>

  <Step title="(Opcional) Sumá un cupón" icon="ticket">
    Si querés que el popup entregue un código de descuento, andá a la pestaña
    **Cupón** y elegí uno de los cupones que tengas creados en tu tienda.

    Después en la pestaña **Mensaje después de dejar los datos** activá
    **Mostrar código del cupón** para que se muestre al suscribirse.

    <Warning>
      Si activás "Mostrar cupón" en el mensaje post-suscripción pero no
      elegiste ningún cupón en la pestaña Cupón, el sistema te muestra una
      advertencia. Tenés que tener los dos coherentes: o ambos activos, o
      ambos desactivados.
    </Warning>
  </Step>

  <Step title="Guardá los cambios" icon="check">
    Click en **Guardar cambios** al final de la página.

    * Si todo está OK: aparece un cartel verde **"Cambios guardados con éxito"**.
    * Si hay errores: aparece un cartel rojo abajo a la derecha. Mirá el cuadro
      amarillo arriba de la sección Diseño para entender qué falta.
  </Step>
</Steps>

***

## Estilos disponibles

Nubea trae varias plantillas pre-armadas que podés personalizar con tus colores,
copy y tipografía. Estos son ejemplos de cómo pueden quedar — todas son
customizables.

<CardGroup cols={2}>
  <Frame caption="Imagen lateral — split con foto, ideal para moda e indumentaria">
    <img src="https://mintcdn.com/nubea/NqPVdXzTsAAMX4V6/images/popup/estilo-imagen-lateral.png?fit=max&auto=format&n=NqPVdXzTsAAMX4V6&q=85&s=d8fd00723e9ca3a555100dc17ca60992" alt="Popup estilo imagen lateral" width="972" height="772" data-path="images/popup/estilo-imagen-lateral.png" />
  </Frame>

  <Frame caption="Minimal — paleta acotada y composición simple, foco en el copy">
    <img src="https://mintcdn.com/nubea/NqPVdXzTsAAMX4V6/images/popup/estilo-minimal.png?fit=max&auto=format&n=NqPVdXzTsAAMX4V6&q=85&s=4845e8b39c77e7b4f92d001122c28e39" alt="Popup estilo minimal" width="984" height="722" data-path="images/popup/estilo-minimal.png" />
  </Frame>

  <Frame caption="Bold — saturado y festivo, ideal para promos y fechas comerciales">
    <img src="https://mintcdn.com/nubea/NqPVdXzTsAAMX4V6/images/popup/estilo-bold.png?fit=max&auto=format&n=NqPVdXzTsAAMX4V6&q=85&s=b0b5375993cfc015dc2280417601b2ba" alt="Popup estilo bold" width="2816" height="1536" data-path="images/popup/estilo-bold.png" />
  </Frame>

  <Frame caption="Gradiente — vibrante y moderno, ideal para marcas jóvenes y beauty">
    <img src="https://mintcdn.com/nubea/NqPVdXzTsAAMX4V6/images/popup/estilo-gradiente.png?fit=max&auto=format&n=NqPVdXzTsAAMX4V6&q=85&s=477e2dfc86374c934e17fb1d89ca0e45" alt="Popup estilo gradiente" width="2816" height="1536" data-path="images/popup/estilo-gradiente.png" />
  </Frame>
</CardGroup>

### Pantalla de éxito post-suscripción

Cuando el visitante se suscribe, recibe el cupón con instrucción clara:

<div
  style={{
maxWidth: 360,
padding: 28,
background: '#fff',
border: '1px solid #e5e7eb',
borderRadius: 12,
boxShadow: '0 12px 32px rgba(0,0,0,0.08)',
textAlign: 'center',
position: 'relative'
}}
>
  <div
    style={{
  position: 'absolute',
  top: 12,
  right: 14,
  color: '#9ca3af',
  fontSize: 18,
  cursor: 'pointer'
}}
  >
    ×
  </div>

  <div style={{ fontSize: 40, marginBottom: 8 }}>🎉</div>

  <div style={{ fontSize: 18, fontWeight: 700, color: '#111', marginBottom: 6 }}>
    ¡Listo! Acá está tu cupón
  </div>

  <div style={{ fontSize: 13, color: '#6b7280', marginBottom: 20 }}>
    Te lo mandamos también por email
  </div>

  <div
    style={{
  background: '#f9fafb',
  border: '2px dashed #3B82F6',
  borderRadius: 8,
  padding: '14px 16px',
  marginBottom: 16
}}
  >
    <div
      style={{
    fontSize: 11,
    color: '#6b7280',
    textTransform: 'uppercase',
    letterSpacing: 1,
    fontWeight: 600,
    marginBottom: 4
  }}
    >
      Tu cupón
    </div>

    <div
      style={{
    fontSize: 22,
    fontWeight: 700,
    color: '#3B82F6',
    letterSpacing: 2,
    fontFamily: 'monospace'
  }}
    >
      BIENVENIDA10
    </div>

    <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 4 }}>
      10% off · Válido 48hs
    </div>
  </div>

  <button
    style={{
  width: '100%',
  background: '#3B82F6',
  color: '#fff',
  border: 0,
  borderRadius: 8,
  padding: '12px',
  fontSize: 14,
  fontWeight: 600,
  cursor: 'pointer',
  marginBottom: 8
}}
  >
    Copiar y empezar a comprar
  </button>

  <div style={{ fontSize: 11, color: '#9ca3af' }}>
    Pegalo en el campo "Cupón de descuento" del checkout
  </div>
</div>

<Tip>
  Probá una plantilla cercana a tu marca y después solo retocá colores y copy.
  Es más rápido que armar uno desde cero.
</Tip>

***

## Mandá los contactos a Marketing Nube (Perfit)

Si querés que los emails y teléfonos que captura el popup se carguen
automáticamente en tus listas de Perfit (la plataforma de email marketing
integrada con Tiendanube), activá el switch **Marketing Nube**.

<Steps>
  <Step title="Encontrá la tarjeta Marketing Nube" icon="link">
    Está al final de la configuración del popup, en la sección de integraciones.
  </Step>

  <Step title="Activá el switch" icon="toggle-on">
    El switch en azul indica que el envío automático a Perfit está activo.
  </Step>

  <Step title="Configurá tu cuenta de Perfit" icon="user-gear">
    Click en **Configurar cuenta** y vinculás tu cuenta de Perfit con Nubea. Si
    no tenés cuenta, te guía a crearla.
  </Step>
</Steps>

Una vez activo, cada nuevo contacto que se suscribe al popup queda en la lista
de Perfit que elegiste. Podés usarlos en campañas de email, secuencias de
bienvenida, segmentaciones, etc.

<Info>
  Si no usás Perfit, dejá el switch apagado. Los contactos siguen quedando
  guardados en Nubea de todos modos.
</Info>

***

## Probalo antes de activarlo

Mientras editás el popup, vas a ver una **vista previa en vivo dentro del mismo
dashboard** (al costado del editor) que se actualiza con cada cambio que hacés.
Útil para confirmar colores, copy y diseño antes de activar — sin salir del
panel.

***

## Si algo no funciona

<AccordionGroup>
  <Accordion title="No me deja guardar y sale un cartel rojo">
    Lo más común: elegiste un **Layout** que requiere imagen (Imagen a la
    izquierda / a la derecha) pero no subiste ninguna. Solución rápida: cambiá
    el layout a **Centrado (clásico)** o **Pantalla completa**, o subí la
    imagen.

    El aviso del problema está en el **cuadro amarillo arriba de la sección
    Diseño** — el sistema no hace foco automático ahí, tenés que buscarlo.
  </Accordion>

  {' '}

  <Accordion title="El popup no aparece en mi tienda">
    1. Revisá que el switch **Activado** en Configuración → General esté en verde.
    2. Verificá que el sitio esté publicado y que no estés viendo una versión
       cacheada (probá en incógnito). 3. Si tenés más de un popup activo, el sistema
       muestra uno solo por visita. Pausá los otros si querés que se vea uno
       específico.
  </Accordion>

  <Accordion title="Aparece un aviso amarillo que no se va">
    Los avisos amarillos son **preventivos**, no bloqueantes. Indican que algo
    está incoherente (ej: activaste mostrar cupón pero no elegiste cupón).
    Mientras no sean rojos, podés guardar igual — pero conviene resolverlos para
    que el popup funcione como esperás.
  </Accordion>
</AccordionGroup>

***

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Puedo usar los colores de mi marca?">
    Sí. En **Diseño → Colores** cambiás fondo, botones y textos con código Hex o
    selector visual.
  </Accordion>

  {' '}

  <Accordion title="¿Qué pasa con 'Intento de salida' en celulares?">
    Como no hay cursor que se mueva hacia afuera de la ventana, Nubea lo reemplaza
    automáticamente por una demora de tiempo. No tenés que configurar nada extra —
    el sistema lo maneja solo.
  </Accordion>

  {' '}

  <Accordion title="¿Puedo pedir el teléfono además del email?">
    Sí, sumalo desde la pestaña **Qué le pedís al visitante**. Tené en cuenta que
    pedir más datos baja la tasa de suscripción. Si lo único que querés es activar
    **Carrito abandonado por WhatsApp**, el teléfono lo capturás cuando el cliente
    hace checkout — no necesitás pedirlo en el popup.
  </Accordion>

  {' '}

  <Accordion title="¿Puedo tener varios popups activos a la vez?">
    Podés tenerlos creados, pero el sistema muestra uno por visita. Útil si querés
    probar variantes (A/B) o tener uno solo para mobile y otro para desktop.
  </Accordion>

  {' '}

  <Accordion title="¿Cuántas veces se le muestra el popup al mismo visitante?">
    No hay un tope rígido. El sistema respeta cuándo elegiste mostrarlo — si un
    visitante cumple las condiciones (ej: scrolleó 25% y pasaron 30s), se le
    muestra. Si ya se suscribió, no se le muestra de nuevo.
  </Accordion>

  {' '}

  <Accordion title="¿Dónde veo los emails y teléfonos que se suscriben?">
    En la sección **Suscriptores** del panel de Nubea. Desde ahí podés exportarlos
    a CSV o usarlos en campañas de WhatsApp. Si activaste **Marketing Nube**,
    también aparecen en tus listas de Perfit automáticamente.
  </Accordion>

  <Accordion title="¿Qué pasa si un contacto se vuelve a suscribir?">
    Aunque ya esté en tu lista de Perfit (en "Contactos de Nubea" o en
    otra), lo sumamos igual a la lista de Nubea cuando se vuelve a
    suscribir desde el popup. Es a propósito: así le entregamos el cupón
    nuevo y le mandamos la secuencia de bienvenida aunque sea un cliente
    que ya tenías. Perfit no cobra doble por tener al mismo contacto en
    varias listas, así que no afecta tu factura.
  </Accordion>
</AccordionGroup>

***

## Asegurate de que tus visitantes usen el cupón

El problema más común después de que el visitante recibe un cupón en el popup:
**lo pierde antes de pagar**. Cierra el modal, sigue navegando, se distrae, y
cuando llega al checkout ya no recuerda el código.

Para resolver esto, te recomendamos sumar **3 capas** de visibilidad del cupón:

### 1. Mostralo claro en la pantalla de éxito

Cuando el visitante se suscribe y recibe el cupón, la pantalla de éxito tiene
que mostrarlo grande y con instrucción explícita:

> 🎁 **Tu cupón: BIENVENIDA10**
>
> Copialo y pegalo en el campo "Cupón de descuento" del checkout, justo antes de
> pagar.

### 2. Mandáselo por WhatsApp o email

Si el visitante dejó WhatsApp o email, mandale el cupón en el mensaje de
bienvenida con la misma instrucción de dónde aplicarlo. Así si pierde el modal,
lo encuentra en el chat.

### 3. Activá la Barra de cupón (la solución más efectiva)

La **Barra de cupón** es una barra fija que aparece en la parte inferior de tu
tienda con el código visible y un botón **Copiar** de un click. Mientras el
visitante navega, la barra lo acompaña con countdown del vencimiento — no se
pierde el cupón ni aunque cierre el modal.

<div
  style={{
background: '#111827',
color: '#fff',
padding: '14px 20px',
borderRadius: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 16,
maxWidth: 720,
boxShadow: '0 -8px 24px rgba(0,0,0,0.15)'
}}
>
  <div
    style={{
  display: 'flex',
  alignItems: 'center',
  gap: 12,
  flex: 1,
  minWidth: 0
}}
  >
    <span style={{ fontSize: 22 }}>🎁</span>

    <div style={{ minWidth: 0 }}>
      <div
        style={{
      fontSize: 11,
      color: '#9ca3af',
      textTransform: 'uppercase',
      letterSpacing: 0.5
    }}
      >
        Tu cupón expira en
      </div>

      <div
        style={{
      fontSize: 16,
      fontWeight: 700,
      fontVariantNumeric: 'tabular-nums'
    }}
      >
        00:24:35
      </div>
    </div>
  </div>

  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <code
      style={{
    background: '#1f2937',
    color: '#fff',
    padding: '8px 12px',
    borderRadius: 6,
    fontSize: 14,
    fontWeight: 700,
    letterSpacing: 1,
    border: '1px dashed #4b5563'
  }}
    >
      BIENVENIDA10
    </code>

    <button
      style={{
    background: '#f59e0b',
    color: '#111827',
    border: 0,
    borderRadius: 6,
    padding: '8px 14px',
    fontSize: 13,
    fontWeight: 700,
    cursor: 'pointer'
  }}
    >
      Copiar
    </button>
  </div>
</div>

#### Cómo configurarla

<Steps>
  <Step title="Activá la barra" icon="toggle-on">
    En la configuración del popup, buscá la sección **Barra de cupón** y activá
    el switch **Barra activa**.
  </Step>

  <Step title="Definí la duración del cupón" icon="clock">
    Campo **Duración (minutos)**: cuántos minutos dura el cupón antes de
    expirar. El countdown empieza apenas el visitante recibe el cupón.
    Sugerencia: 25-60 minutos para crear urgencia genuina.
  </Step>

  <Step title="Personalizá el copy" icon="text-size">
    * **Texto**: lo que aparece antes del countdown (ej: "Tu cupón expira en").
    * **Botón**: el texto del botón (ej: "Copiar").
  </Step>

  <Step title="Ajustá los colores a tu marca" icon="palette">
    Configurá fondo, color del texto y color del botón para que matchee con la
    identidad visual de tu tienda. Por default viene en negro con botón en color
    de acento.
  </Step>
</Steps>

<Tip>
  La barra es la capa más efectiva de las 3. La mayor caída de conversión
  post-cupón viene de visitantes que pierden el código. Si tus métricas muestran
  muchas suscripciones pero pocas conversiones, activá la barra y vas a ver el
  cambio.
</Tip>

<Warning>
  **No abuses del countdown.** Si el cupón vence en 5 minutos genera ansiedad y
  muchos visitantes lo cierran. Entre 25 y 60 minutos es el sweet spot —
  suficiente para terminar de elegir productos sin sentirse perseguido.
</Warning>

***

## Próximos pasos

<CardGroup cols={2}>
  <Card title="Mejores prácticas de WhatsApp" icon="lightbulb" href="/guias/mejores-practicas-whatsapp">
    Tips de copy y timing para que tus envíos automáticos rindan más.
  </Card>

  <Card title="Activar los mensajes automáticos" icon="bolt" href="/guias/configurar-automatizaciones">
    Activá carrito abandonado, pago pendiente y pedido enviado por WhatsApp.
  </Card>
</CardGroup>