Generador de Popup
Un generador de pop-ups monta la ventana que quieres y te da el código para incrustarla. Pon el título, el mensaje, el botón y los colores, elige un disparador y con qué frecuencia puede reaparecer, y el panel Código de inserción imprime una única etiqueta script que apunta a popup.min.js con tus ajustes como atributos data: data-trigger, data-delay, data-bg y demás.
Contenido
Activación y comportamiento
Personalizar
Preajustes
Vista previa en vivo
Código de Inserción
Herramientas populares
Acerca de Generador de Popup
El formulario tiene cuatro bloques. Content recoge el título, el mensaje, el texto del botón y su URL. Trigger & Behavior elige entre Timed Delay, Scroll %, Exit Intent y On Page Load, con un retardo en segundos o un porcentaje de desplazamiento según el caso, una frecuencia Every Visit, Once Per Session, Once Per Day u Once Forever, y una animación Fade o Slide. El bloque de estilo fija el fondo, el color del texto, el del botón y un control de radio, además de los interruptores Overlay Backdrop, Close on Overlay Click y la línea de marca. Cuatro preajustes —Newsletter, Discount, Dark y Exit Intent— lo rellenan todo de golpe.
La vista previa en vivo redibuja la ventana mientras escribes, y el panel Código de inserción muestra la etiqueta que vas a pegar. Es un solo elemento script que carga popup.min.js desde este sitio y solo lleva los ajustes distintos de los valores por defecto, así que un pop-up de newsletter corriente da una etiqueta corta en lugar de veinte atributos.
Los disparadores se comportan de forma concreta. Exit Intent vigila que el puntero salga por la parte superior de la ventana —un mouseout sin destino relacionado a menos de cinco píxeles del borde—, así que funciona en escritorio y nunca en una pantalla táctil. Scroll % mide la posición dentro de la altura desplazable y se dispara una vez pasado tu valor. La frecuencia se recuerda en el dispositivo del visitante: Once Per Session en sessionStorage, y Once Per Day y Once Forever en localStorage, bajo una clave construida con el título del pop-up.
Límites: el pop-up es un mensaje con un enlace, no un formulario; no recoge direcciones de correo, y no hay analítica, ni test A/B, ni segmentación por página, así que dónde pegues la etiqueta decide dónde aparece. El generador solo escribe código, aquí no se guarda nada, y el script se sirve desde este sitio: para una copia sin conexión tendrías que alojar popup.min.js tú mismo.
Casos de uso
Cómo usar
Rellena el título, el mensaje, el texto del botón y su URL en Content, o pulsa uno de los preajustes Newsletter, Discount, Dark o Exit Intent.
En Trigger & Behavior elige Timed Delay, Scroll %, Exit Intent u On Page Load y ajusta el retardo o el porcentaje, la frecuencia y la animación.
Fija el fondo, el color del texto, el del botón y el control de radio, y decide sobre Overlay Backdrop, Close on Overlay Click y la línea de marca.
Mira la vista previa en vivo, que se redibuja mientras escribes.
Copia la única etiqueta script del panel Código de inserción y pégala en tu página justo antes de la etiqueta de cierre de body.
Revisa la ventana modal en el panel Vista previa en directo, luego pulsa Copiar en el panel Código de inserción y pega la etiqueta script en el HTML de tu web.
Consejos Pro
- El código solo lista los ajustes distintos de los valores por defecto, así que una etiqueta corta no significa que falte algo: 5 segundos de retardo y Once Per Session ya son el comportamiento del widget.
- Exit Intent nunca se dispara en un móvil: depende de que el puntero salga por arriba de la ventana, y una pantalla táctil no tiene puntero. Combínalo con un pop-up por desplazamiento o por tiempo si el móvil importa.
- La frecuencia se guarda por título de pop-up, así que cambiar el título le da al widget una clave nueva y todos los que ya habían cerrado el anterior verán el nuevo.
- Desmarca la línea de marca y la etiqueta gana data-branding="false", lo que quita el pequeño Powered by FreeWebTools de debajo del botón.
- El widget también entiende data-position="bottom", que el formulario no ofrece: añádelo a mano a la etiqueta para anclar el pop-up abajo en lugar de centrarlo.
Solución de problemas
El pop-up no aparece nunca en mi sitio.
Comprueba tres cosas por orden: que la etiqueta se pegó en el HTML de la página y no en un campo de texto o Markdown, que tu frecuencia no esté ya cumplida —Once Per Session lo oculta hasta cerrar la pestaña— y que el disparador elegido pueda ocurrir, porque Exit Intent necesita ratón.
Funciona en el ordenador pero no en el móvil.
La causa habitual es Exit Intent: depende de que el puntero salga por arriba de la ventana, y una pantalla táctil nunca genera ese evento. Cambia a Timed Delay o Scroll % para el tráfico móvil, o sirve una segunda etiqueta con otro disparador.
Solo vi el pop-up una vez y ya no vuelve.
Es la frecuencia haciendo su trabajo. Once Per Session se recuerda en sessionStorage hasta cerrar la pestaña; Once Per Day y Once Forever, en localStorage. Borra el almacenamiento del sitio, o abre una ventana privada, para volver a verlo mientras haces pruebas.
He cambiado el diseño pero los visitantes siguen viendo el pop-up antiguo.
La etiqueta es el pop-up, así que una etiqueta vieja que siga en la página conserva sus ajustes. Sustituye el elemento script entero, no solo una parte, y vacía después la caché de página y la del CDN. Conviene descartar también una copia caducada en tu propio navegador.
Cambiar el título ha reiniciado la frecuencia de todo el mundo.
La clave de almacenamiento se deriva del título del pop-up: un título nuevo es una clave nueva y los cierres anteriores dejan de contar. Va bien cuando quieres que una campaña se vuelva a ver a propósito, y conviene recordarlo cuando solo ibas a corregir una errata.
Preguntas frecuentes
Una etiqueta script de HTML. Apunta a popup.min.js de este sitio y lleva tus ajustes como atributos data: data-title, data-text, data-btn-text, data-trigger, data-bg y demás, omitiendo lo que se quede en su valor por defecto. Pega esa etiqueta en tu página y el pop-up aparece; bórrala y desaparece.
Copia la etiqueta del panel Código de inserción y pégala en el HTML de la página, justo antes de la etiqueta de cierre de body. En WordPress eso es un bloque HTML personalizado o el pie del tema; en un sitio estático, la plantilla. No hay cuenta, ni plugin, ni paso de compilación.
Cuatro. Timed Delay espera los segundos del campo Delay. Scroll % espera a que el visitante haya bajado ese porcentaje. Exit Intent espera a que el puntero salga por arriba de la ventana. On Page Load muestra el pop-up al instante. El formulario solo enseña el campo Delay o Scroll que corresponde.
El script escucha un evento mouseout en el documento que no tiene destino relacionado y ocurre a menos de cinco píxeles del borde superior de la ventana: el gesto de quien se dirige a la barra de direcciones o a otra pestaña. Se dispara una vez por carga. Como depende del puntero, nunca ocurre en móvil o tableta.
Lo decide Frequency. Every Visit lo muestra en cada carga; Once Per Session una vez hasta que se cierre la pestaña; Once Per Day espera 24 horas antes de repetirlo; Once Forever lo muestra una sola vez. Once Per Session es el valor por defecto y por eso no aparece en la etiqueta generada.
En el navegador del visitante, no en un servidor. Once Per Session escribe en sessionStorage, y Once Per Day y Once Forever en localStorage, bajo una clave hecha con el título de tu pop-up. Borrar los datos del sitio, o abrir una ventana privada, lo reinicia y el pop-up vuelve a salir.
No. El pop-up muestra un titular, una línea de texto y un botón que enlaza a la URL que indiques: no hay campo de formulario y no se envía nada a ningún sitio. Para captar direcciones, apunta Button URL a una página o formulario de tu proveedor de correo y deja que esa página recoja los datos.
Sí, pero por dónde lo pegues y no por un ajuste. El script se ejecuta allí donde esté la etiqueta: en un pie común sale en todas partes, y pegada en el HTML de una sola página se limita a esa. En el generador no hay reglas de URL, ni segmentación, ni programación.
El formulario siempre lo centra, pero el widget acepta data-position="bottom". Copia la etiqueta, añade ese atributo a mano y la ventana se ancla a 24 píxeles del borde inferior en vez de quedarse en el centro. El resto de atributos siguen funcionando igual.
Desmarca la línea de marca antes de copiar. La etiqueta incluye entonces data-branding="false" y el widget se salta el pequeño enlace Powered by FreeWebTools que añadiría bajo el botón. Dejarlo solo cuesta una línea gris de 10 píxeles.