Plantillas de popups para sitios web: 16 diseños listos para cada objetivo

Un popup vale tanto como el momento en que aparece. El diseño importa, pero lo que decide si convierte o molesta es la segmentación, el momento y si el formato encaja con el mensaje: una barra fina para un aviso de envío, una capa a pantalla completa para un lanzamiento.

A continuación tienes 16 plantillas de popups para sitios web que cubren todos los formatos habituales: barras, modales, capas, notificaciones, interacciones gamificadas e indicadores de progreso. Cada una es una plantilla funcional que puedes configurar — texto, colores, segmentación y frecuencia — sin escribir código. Cada una enlaza a su guía de configuración completa.

Qué hace bueno el diseño de un popup

Antes de las plantillas, los criterios que separan un popup con el que la gente interactúa de uno que cierra sin mirar:

• Un solo objetivo. Un popup que pide un email, promociona una rebaja y anuncia una función nueva no conseguirá ninguna de las tres cosas.
• Formato acorde al peso del mensaje. Mensaje menor, huella menor. Reserva las capas a pantalla completa para momentos que de verdad merezcan la interrupción.
• Salida visible. Un popup difícil de cerrar convierte un rebote en resentimiento y, en móvil, puede acarrear una penalización de Google.
• Límite de frecuencia. La segunda vez que se muestra el mismo mensaje rinde peor que la primera; la quinta hace daño.
• Segmentación antes que temporización. “A los 5 segundos” es una regla burda. “Visitante recurrente, carrito de más de $50, no ha visto esta oferta” es un motivo para aparecer.

Barras: mensajes persistentes y poco intrusivos

Las barras se sitúan en la parte superior o inferior de la página sin tapar el contenido: la opción adecuada para todo lo que debe seguir visible en lugar de exigir una decisión.

Barra de anuncios — una franja fina a todo el ancho para mensajes de todo el sitio: ofertas de envío, rebajas, novedades de producto o avisos legales. Arriba o abajo, fija o estática.

Barra de anuncios rotativa — la misma franja alternando hasta cinco mensajes, cada uno con su enlace, con un temporizador, navegación por puntos y transición de fundido o deslizamiento. Útil cuando varias cosas compiten por un mismo espacio.

Barra de estado de envío gratis — una barra de progreso en tiempo real que lee un valor del perfil del visitante — “Te faltan $65 para el envío gratis” — y se llena a medida que crece su carrito.

Barra de estado por niveles — la versión de fidelidad: muestra el nivel actual, el progreso hacia el siguiente y lo que se desbloquea allí, según puntos, gasto o pedidos.

Popups y modales: peticiones concretas

Modal centrado — un popup centrado sobre una capa oscura, con cuatro diseños de imagen en una sola plantilla y control sobre dónde se sitúa la imagen en móvil. La opción por defecto para una oferta única y clara.

Capa a pantalla completa — una pantalla de bienvenida que ocupa todo el viewport, con fondo de color, degradado o imagen a sangre. Para lanzamientos, campañas de temporada y bienvenidas en la primera visita.

Notificación en esquina — una tarjeta de notificación compacta que combina una imagen con un titular, un mensaje breve y una llamada a la acción. Poco intrusiva: ideal para prueba social, promociones suaves y empujones hacia funciones.

Popup de cupón — un código promocional con varios estilos de revelado: clic para copiar, clic para revelar o siempre visible, además de imagen, titular, CTA y letra pequeña.

Formulario de captación de leads — recoge los datos del visitante y los escribe en el perfil de Personyze para que puedas hacer seguimiento, segmentar o personalizar lo que ve después. Diseño en paralelo o apilado.

Formatos interactivos y gamificados

Estos piden al visitante que haga algo. La interacción es mucho mayor, y también lo es el coste de abusar de ellos.

Ruleta de premios — una ruleta de premios gamificada con probabilidades que tú controlas, en diseño apilado o a pantalla completa. Lo que gana cada visitante se guarda en su perfil para segmentarlo después.

Cuestionario de recomendación — unas pocas preguntas en las que cada respuesta suma a un grupo de resultados y que terminan en una recomendación a medida con su llamada a la acción.

Ambos se tratan con más detalle en la guía de marketing de gamificación.

La Ruleta de premios, en detalle

De las plantillas interactivas, la Ruleta de premios es la que merece una explicación a fondo: convierte bien porque el descuento se siente ganado en lugar de regalado, y recoge mucho más que un canje de cupón si la configuras bien.

Configuras de cuatro a ocho segmentos, cada uno con etiqueta, color, mensaje de premio y código de cupón. El visitante hace clic, la ruleta frena y aparece el mensaje del segmento ganador con confeti o un brillo.

• Tú controlas las probabilidades. Cada segmento tiene un peso relativo de probabilidad de ganar — pesos de 35/25/20/12/5 se convierten directamente en esos porcentajes. Mantén los grandes premios raros y los pequeños frecuentes.
• Añade una casilla perdedora para crear suspense. Da a un segmento una etiqueta como Inténtalo de nuevo y deja su cupón en blanco: contará como casilla sin premio.
• Controla los reintentos. Modo de intentos puede ser Único (un giro y resultado fijo), Reintento (volver a girar solo en una casilla perdedora hasta ganar) o Múltiple (un número fijo de giros).
• Integrada o a pantalla completa. Insértala en una página o céntrala sobre una capa oscurecida, con las mismas probabilidades en ambos casos.
• Guarda el resultado en el perfil. Esta es la parte que la mayoría de las ruletas pasan por alto: el premio y el código ganadores se escriben en el perfil del visitante, así que puedes hacer seguimiento de quienes ganaron envío gratis pero nunca compraron, o excluir a quien ya lo reclamó.

La versión con formulario, cuando quieres el email

La ruleta estándar no pone a propósito un formulario antes del giro: la recompensa es el propio giro, lo que mantiene baja la fricción. Cuando el lead importa más que el juego, la ruleta de premios con formulario coloca un formulario delante.

La ruleta se ve desde el primer momento, pero en gris y con un candado, para que el visitante sepa exactamente a cambio de qué da su dirección. Al enviar, el formulario se sustituye por un agradecimiento, la ruleta se desbloquea y gira, y el email y el premio ganado llegan al mismo perfil. Una advertencia: cuando alguien ha “pagado” con su dirección, una casilla perdedora duele, así que que sean raras o haz que todas las casillas den algo.

La configuración completa está en la documentación de la plantilla Ruleta de premios, y hay un artículo más extenso en la guía de la ruleta de premios.

Progreso, estatus y urgencia

Tarjeta de estado — el formato en tarjeta de la mecánica de progreso: lo cerca que está el visitante del envío gratis o de una recompensa, como tarjeta centrada o popup, a partir de un valor del perfil en tiempo real.

Tarjeta de estado por niveles — la misma tarjeta mostrando la progresión por niveles de fidelidad: Bronce, Plata, Platino, con lo que falta para el siguiente nivel.

Plantillas de cuenta atrás — tres variantes — tarjeta, barra y barra de evento — que comparten un mismo motor de temporizador, para una rebaja que termina, un precio que sube o un evento que empieza.

Cuenta atrás con progreso del evento — una barra que se llena a medida que se acerca la fecha en lugar de depender solo de números, con un botón de registro. Pensada para webinars, lanzamientos y sesiones en directo.

En la página: el espacio del hero

Slider de hero — un banner hero rotativo con hasta cuatro diapositivas, cada una con su imagen, titular, subtítulo y botón: texto junto a la imagen o superpuesto sobre un fondo a sangre.

Ejemplos de popups por objetivo

Si sabes qué resultado quieres, este es el camino más corto hacia un formato:

• Hacer crecer la lista de email — Formulario de captación de leads, una Ruleta de premios que pide la dirección después del premio o la Ruleta de premios con formulario que la pide antes.
• Aumentar el valor medio del pedido — Barra de estado de envío gratis o Tarjeta de estado.
• Impulsar una promoción — Popup de cupón, con una cuenta atrás si el plazo es real.
• Anunciar algo en todo el sitio — Barra de anuncios, o la versión rotativa para varios mensajes.
• Ayudar a los visitantes a elegir — Cuestionario de recomendación.
• Conseguir registros a eventos — Cuenta atrás con progreso del evento.
• Retener y recompensar — Barra o Tarjeta de estado por niveles.

No tienes por qué elegir una plantilla

Todo lo anterior da por hecho que exploras una biblioteca y eliges. Hay un camino más rápido: describe el popup que quieres y deja que el agente de IA lo cree. Así, tu trabajo pasa de elegir una plantilla y cambiarle el estilo a revisar algo que ya está terminado.

Tres cosas hacen que esto sea más que un generador de plantillas:

• Aplica el estilo de tu sitio real. Antes de crear nada, el agente analiza tus páginas en busca de colores de marca, tipografías, estilo de botones y el tono de tus textos. El resultado parece de tu sitio y no una plantilla puesta encima, y ningún visitante notará que se ha generado.
• Las palabras normales se convierten en segmentación real. Di “visitantes nuevos en móvil que han llegado a la página de precios” y lo convierte en reglas de segmentación reales, y después te lee las reglas compiladas para que puedas comprobarlas.
• Nada llega al tráfico real. Todo lo que crea se genera en staging — visible solo para visitantes que llegan desde una IP de staging. Lo previsualizas en tus páginas reales y lo publicas tú.

Cómo es en la práctica

Puedes empezar por cualquiera de los dos extremos. “Crea un popup de oferta de bienvenida para visitantes nuevos” te da un popup terminado, con la imagen de tu marca y la segmentación incluida. O elige una plantilla de la biblioteca anterior y deja que el agente la adapte a tu marca manteniendo tu oferta. En ambos casos ajustas conversando — “conviértelo en una barra”, “prueba otro color”, “dirígelo también a visitantes recurrentes” — sin abrir un panel de CSS.

También funciona al revés: pregunta “¿qué debería mejorar esta semana?” y te devuelve oportunidades ordenadas en todas tus páginas y campañas, cada una con una acción de un solo toque. En un sitio con unos cientos de páginas, saber dónde merece la pena añadir un popup suele ser la mitad más difícil.

El agente funciona dentro del panel de Personyze — consulta el agente de personalización con IA — y las mismas funciones están disponibles desde Claude o ChatGPT si prefieres trabajar con un asistente que ya usas. Más detalles en la guía del agente de marketing con IA.

¿Prefieres trabajar desde Claude? Instala el conector desde el directorio: Personyze en el directorio de Claude.

Buenas prácticas para popups

• Respeta el móvil. Google trata los intersticiales intrusivos en móvil como un problema de posicionamiento. Las barras y las notificaciones son más seguras ahí que las capas.
• Activa por intención, no solo por tiempo. La intención de salida, la profundidad de scroll, el valor del carrito y las visitas repetidas superan a un retraso arbitrario.
• Suprime después de la acción. Quien ya se suscribió no debería volver a ver el popup de suscripción.
• Prueba la oferta antes que el diseño. Cambiar el incentivo mueve la conversión mucho más que cambiar el color del botón.
• Guarda el resultado. Un popup que capta una preferencia y la escribe en el perfil del visitante sigue dando frutos cuando termina la campaña.

Plantillas de popups: preguntas frecuentes

¿Cuántos popups son demasiados?

Una sola petición activa por visita es una regla segura. Una barra persistente y un popup interactivo pueden convivir porque la barra no exige una decisión, pero dos capas que compiten se anularán entre sí.

¿Los popups perjudican al SEO?

Solo cuando son intrusivos en móvil. Las barras, las notificaciones y los popups que aparecen tras una interacción real no se penalizan. Más sobre esto en personalización y SEO.

¿Puedo editar estas plantillas?

Sí — cada una es un punto de partida. Texto, colores, diseño, imágenes, activadores, reglas de segmentación y frecuencia son configurables, y el HTML y el CSS subyacentes siguen siendo editables si quieres ir más allá.

¿Qué diferencia hay entre un popup y una barra de anuncios?

Un popup se superpone a la página e interrumpe la visita para pedir una decisión. Una barra reserva una franja en el borde del viewport y no estorba, por lo que es más adecuada para mensajes continuos que para peticiones puntuales.

¿Puede la IA crear un popup por mí?

Sí. Describe lo que quieres y el agente de IA de Personyze lo crea, tras analizar primero tu sitio en busca de colores de marca, tipografías, estilo de botones y tono para que el resultado encaje con tus páginas. La segmentación en lenguaje natural se compila en reglas reales que te lee de vuelta, y todo se crea en staging, así que el tráfico real no se ve afectado hasta que publicas.

¿Cómo decide la Ruleta de premios lo que gana cada persona?

Cada uno de los cuatro a ocho segmentos tiene un peso relativo de probabilidad de ganar, y los pesos se suman para calcular las probabilidades reales — así, pesos de 35, 25, 20, 12 y 5 se convierten en esos porcentajes. Un segmento con una etiqueta como Inténtalo de nuevo y sin cupón actúa como casilla perdedora. El premio y el código ganadores se guardan en el perfil del visitante para segmentar después.

Empieza ahora

Las 16 plantillas se pueden configurar y segmentar sin código. Reserva una demo o consulta los planes.

Crea cualquiera de ellas con solo pedirlo: el agente de personalización con IA.

Lecturas relacionadas

• Marketing de gamificación — las mecánicas detrás de las plantillas interactivas.
• Ruletas de premios de gira y gana — la ruleta a fondo.
• Barras de envío gratis y de niveles de fidelidad — la estrategia para subir el ticket medio.
• Popups y banners — cómo funcionan la segmentación y la frecuencia.