Cómo crear un mensaje emergente con promociones

Crea un formulario nuevo para suscriptores, comparte un descuento o haz un anuncio que aparezca cuando los visitantes carguen tu sitio.

Última actualización: 29 de enero de 2025

Puedes crear un mensaje emergente que aparezca cuando los que visitan el sitio aterricen en él. Esta guía explica cómo agregar mensajes emergentes con promociones a tu sitio y las opciones para seleccionar cuándo y dónde aparecen estos mensajes.

Los mensajes emergentes con promociones son muy buenos para lo siguiente:

Cómo acceder a esta función

Los pop-up promocionales están disponibles en los planes Core, Plus, Advanced, Empresa, Commerce Básico y Commerce Avanzado. Para informarte mejor, visita Elegir el plan de Squarespace adecuado.Para crear uno, necesitas hacerlo en una computadora de escritorio. No es posible agregar pop-up promocionales en la aplicación de Squarespace.

Mira el video

Añadir un mensaje emergente con promociones

Para agregar un pop-up promocional:

  1. Abre el panel Pop-up promocional.
  2. Elige un diseño para el pop-up promocional. 
  3. Personaliza el texto, el tiempo y la apariencia de la ventana emergente usando los ajustes de Acción, Contenido, Tiempo de visualización, Imagen y Estilo. Revisa la tabla a continuación para obtener más detalles.
  4. Activa la opción junto a Mostrar ventana emergente y, a continuación, haz clic en Guardar

Para probar tu ventana emergente después de crearla, visita tu sitio en una ventana de incógnito.

Configuración de ventanas emergentes

Haz clic en la configuración del panel Pop-up promocional para personalizar la ventana emergente. Usa esta tabla como guía.

Configuración Descripción
Mostrar el pop-up

Activa o desactiva el botón junto a Mostrar ventana emergente para activar o desactivar la ventana emergente y, a continuación, haz clic en Guardar.

La ventana emergente desactivada conserva todas las configuraciones intactas hasta que estés listo para volver a activarla.

Cambiar diseño

Elige el tamaño de la ventana emergente y si va a cubrir toda la página o solo una pequeña parte. Solo puedes agregar imágenes a las plantillas que las incluyan. 

Desplaza el cursor sobre un diseño y haz clic en Seleccionar para obtener una vista previa, luego haz clic en Guardar para aplicar el diseño. Ten en cuenta que los diseños más grandes pueden afectar el SEO.

Acciones

Elige si la ventana emergente solicitará a los visitantes que se suscriban a un boletín o hagan clic en un botón.

Sigue estos pasos para aplicar la configuración.

Contenido

Agrega texto a la ventana emergente. Haz clic en los campos Título y Cuerpo para agregar texto, luego haz clic en Guardar.

Mantén este texto breve. Demasiado texto puede causar problemas de visualización.

Visualización y frecuencia

Elige cuándo, dónde y con qué frecuencia se mostrará la ventana emergente.

Sigue estos pasos para aplicar la configuración.

Imagen

Agrega una imagen a la ventana emergente si el diseño que elegiste es compatible. 

Sigue estos pasos para subir una imagen.

Estilo

Dale estilo a la ventana emergente para que coincida con el aspecto de tu sitio. Haz clic en un área de la ventana emergente para mostrar solo los ajustes de estilo disponibles para esa área y ocultar el resto. Haz clic en Mostrar todos para ver todos los ajustes disponibles. El mensaje después del envío tiene los mismos ajustes de fuente y color del Cuerpo.

Ajustes de Acción

Usa los ajustes de Acción en el panel Pop-up promocional para agregar una llamada a la acción para tus visitantes.

Suscribirse a una newsletter

Para invitar a los visitantes a suscribirse a tu lista de distribución de correo electrónico, elige Registrarse a tu newsletter.

Botón

Haz clic en la pestaña Botón para cambiar el texto que aparece en la ventana emergente del newsletter.

  • Texto de marcador de posición de campo de correo electrónico: texto que aparece en el recuadro de dirección de correo electrónico. El texto predeterminado es Dirección de correo electrónico.
  • Leyenda del botón de Envío: texto del botón en el que los visitantes hacen clic para enviar su dirección de correo electrónico. El texto precargado es Enviar, pero puedes cambiarlo por algo como Únete o Regístrate.
  • Descargo de responsabilidad: texto que aparece debajo del recuadro de dirección de correo electrónico.

Almacenamiento

Para recopilar las respuestas de los visitantes, haz clic en la pestaña Almacenamiento para conectar una opción de almacenamiento.

  • Haz clic en Campañas de Squarespace o haz clic en Conectar otros servicios para elegir Mailchimp o Google Drive para guardar tus envíos.
  • No puedes conectar envíos de boletines al correo electrónico u otro servicio de terceros.

Verificación

Haz clic en la pestaña Verificación para revisar las opciones de verificación de suscriptores. La opción predeterminada es Enviar correo electrónico de confirmación, pero, si habilitas Google reCAPTCHA, puedes desactivar el correo electrónico de confirmación. Se requiere al menos un método de verificación para las lista de distribución de correo de Email Marketing de Squarespace.

Después del envío

Haz clic en la pestaña Posterior al envío para cambiar el texto que aparece después de que un visitante se suscribe a tu lista de distribución de correo.

  • Mensaje posterior al envío: el texto que aparece después de que un visitante envía un formulario, debajo del título, el cuerpo del texto y el descargo de responsabilidad. 
  • HTML posterior al envío: si tienes conocimientos de codificación, puedes agregar código personalizado a este recuadro para mostrarlo junto con el mensaje posterior al envío debajo del título, el cuerpo del texto y el descargo de responsabilidad. El HTML posterior al envío no reemplaza el mensaje posterior al envío.

Hacer clic en un botón

Puedes agregar hasta dos botones que vinculen con otra página de tu sitio, un archivo, otro sitio o cualquier componente que desees que descubran los que visitan el sitio web. 

  1. En los ajustes de Acción, elige Hacer clic en un botón.
  2. Agrega un rótulo para el botón en el primer campo. Este pasará a ser el texto del botón.
  3. Añade un enlace para el botón en la casilla de URL o haz clic en “the para acceder a otras opciones del enlace.
  4. Repite estos pasos para el segundo botón. Si deseas que haya solo un botón, deja el segundo rótulo y la segunda casilla de URL en blanco.

Ajustes de tiempo de visualización

Usa los ajustes Tiempo de visualización en el panel Pop-up promocional para agregar una llamada a la acción para tus visitantes.

Seleccionar las páginas para el mensaje emergente

En la sección Páginas, elige las páginas en las que se mostrará el pop-up. Para mostrar el pop-up en la primera página que ve la persona que visita el sitio, selecciona Cualquier primera página en el menú desplegable.

Selecciona Solo ciertas páginas para limitar dónde aparece la ventana emergente. Esto puede ser útil para ocultar la ventana emergente de una página que ya tiene un formulario de newsletter o solo mostrarla en tu página de inicio. La ventana emergente aparecerá en cualquiera de las páginas que el visitante elija en primer lugar. Una vez que hayas elegido las páginas, haz clic fuera del menú de la página para cerrarla.

Ten en cuenta lo siguiente:

  • No puedes tener una ventana emergente en las páginas dentro de un sitio para miembros ni en las subpáginas de Índice.
  • Si seleccionas varias páginas, las reglas que establezcas a continuación se aplicarán a esas páginas.
  • Incluso si seleccionas varias páginas para la ventana emergente, esta solo aparecerá en cualquiera de las páginas elegidas a la que el visitante llegue primero. 

Elegir cuándo aparece el mensaje emergente (en desplazamiento o temporizador)

Selecciona si la ventana emergente debería aparecer en un temporizador o desplázate en la sección Tiempo. Después de hacer tu selección, usa los otros menús desplegables para establecer la hora, el porcentaje de desplazamiento o ambos.

Si eliges un tiempo y una posición de desplazamiento, el mensaje emergente aparecerá cuando ocurra la primera acción. Por ejemplo, si configuraste el tiempo en Después de 10 segundos y el porcentaje de desplazamiento en 25 % hacia abajo, hay dos maneras en las que puede aparecer el mensaje emergente:

  • El que visita el sitio accede y se desplaza inmediatamente 25 % hacia abajo en la página.
  • El que visita el sitio accede a la página y no se desplaza, sino que permanece allí durante 10 segundos.

Si el visitante accede a una página protegida con contraseña, tu mensaje emergente seguirá las normas de visualización y tiempo que hayas elegido después de que ingrese la contraseña.

Elige una frecuencia

Configura la frecuencia con la que ven el mensaje emergente quienes vuelven a visitar el sitio en el menú desplegable Frecuencia. Si lo han visto una vez, tal vez te convenga que lo visualicen la siguiente vez que ingresen en el sitio. Para una experiencia más fluida, puedes configurarlo para que vuelva a aparecer después de un determinado tiempo o directamente ocultarlo para quienes regresan al sitio.

Puedes elegir entre las siguientes opciones de frecuencia:

  • Al día siguiente (los visitantes que regresan vuelven a ver la ventana emergente después de 24 horas.)
  • En 1 semana
  • En 2 semanas
  • En 30 días
  • Nunca (los visitantes que regresan nunca vuelven a ver la ventana emergente.)

Usamos cookies para identificar a quienes visitan el sitio por primera vez y a quienes regresaron. Si siguen teniendo nuestra cookie en su navegador, tu sitio los considerará visitas repetidas. Si borraron su caché o visitan el sitio desde un navegador web, se considerarán visitas nuevas.

No volver a mostrar después del registro para la newsletter

Si usas un mensaje emergente de newsletter, puedes ocultarlo de quienes visitan el sitio y ya se han suscrito marcando No volver a mostrar después del registro para la newsletter.

Consejo

Solo las suscripciones hechas a través del mensaje emergente se consideran para esta regla. Si una persona se suscribe desde otra área de tu sitio, por ejemplo, un bloque de newsletter o en el momento de finalizar la compra, el mensaje emergente podría seguir apareciendo.

Mostrar u ocultar en dispositivos móviles

Para mostrarles tu pop-up a los que visitan el sitio desde un dispositivo móvil, marca Mostrar en dispositivos móviles.

Para lograr el mejor aspecto, el mensaje emergente lucirá diferente en los dispositivos móviles. Para personalizarlo, usa los ajustes de estilo en la sección Dispositivos móviles del panel de Estilo. Puedes ver cómo aparecerá con la vista en dispositivo.

Reconfigurar las vistas

Para volver a mostrar el mensaje emergente a todos los que visiten el sitio la próxima vez, incluso si tu configuración lo impide, haz clic en el botón Restablecer.

Esto es útil si has cambiado el mensaje emergente y deseas que los que regresan al sitio vean el diseño nuevo la próxima vez. Después de que ellos hayan visto el contenido nuevo una vez, el mensaje emergente volverá a la regla de frecuencia configurada.

Configuración de imágenes

En Configuración de imagen, haz clic en el recuadro de carga de imagen y luego haz clic en Cargar imagen. También puedes reutilizar una imagen que ya hayas agregado a tu sitio o usar una imagen de stock. Para usar un color de fondo uniforme en lugar de una imagen, deja el panel Imagen vacío y elige un color de fondo en el panel Estilo.

Ten en cuenta lo siguiente:

  • Solo se aceptan archivos .jpg, .png o .gif.
  • Asegúrate de dar formato a tus imágenes correctamente antes de subirlas.
  • Revisa las mejores prácticas de imágenes de stock si las usas.
  • Sube varias imágenes para crear una presentación. No es posible agregar controles de navegación ni controlar la velocidad de transición en las presentaciones de diapositivas.
  • Para obtener más control sobre las dimensiones de la imagen, habilita los ajustes Diseño avanzado de superposición en Diseño de superposición en el panel Estilo.

Ejemplos de ventanas emergentes

Haz clic en las pestañas para revisar los posibles ajustes de los pop-up promocionales comunes. Puedes usar cualquier plantilla y configuración de estilo para crear estas ventanas emergentes, pero solo las plantillas que incluyen imágenes pueden admitirlas. 

sale promotional popup.png
Configuración Ejemplo 
Acciones Botón
Texto de botón “Comprar la oferta”
Enlace del botón La categoría de ofertas
Contenido

Texto del título: “10 % de descuento en todos los trajes de baño”

Cuerpo del texto: “En pedidos superiores a 50 USD”

Visualización y frecuencia

Mostrar el pop-up en: cualquier primera página

Tiempo: mostrar en el temporizador después de 5 segundos

Frecuencia: al día siguiente

 

age restriction promotional popup.png
Configuración Ejemplo
Acciones Botón
Texto de botón “Sí”
Enlace del botón Tu página de inicio
Contenido

Texto del título: “Debes tener más de 21 años para visitar este sitio”

Cuerpo del texto: “¿Tienes más de 21 años?”

Visualización y frecuencia

Mostrar el pop-up en: cualquier primera página

Tiempo: se muestra en un temporizador y al desplazarse, después de 5 segundos y 25 % hacia abajo

Frecuencia: al día siguiente

 

newsletter promotional popup.png
Configuración Ejemplo
Acciones

Registrarse a una newsletter

Texto del marcador de posición del campo de correo electrónico: “dirección de correo electrónico”

Etiqueta del botón Enviar: “Registrarse”

Contenido

Texto del título: “Obtén un 10 % de descuento”

Cuerpo del texto: “Regístrate para obtener un 10 % de descuento en tu primera compra de $50 o más”

Almacenamiento Campañas por correo electrónico de Squarespace
Después del envío “¡Gracias!”
Visualización y frecuencia

Mostrar la ventana emergente en: cualquier primera página

Tiempo: se muestra al desplazarse, 25 % hacia abajo

Frecuencia: al día siguiente

 

Seguimiento de la interacción con pop-up promocional

Usa las conversiones de formulario y botón para ver la interacción entre los visitantes y tus pop-up promocionales. Puedes monitorear la tasa de conversión, que compara el número de vistas que recibió una ventana emergente con el número de envíos que recibió.

Mensajes emergentes con promociones en dispositivos móviles

Los mensajes emergentes con promociones funcionan en los dispositivos móviles, pero se ven distintos que en las computadoras de escritorio:

  • El mensaje emergente ocupa la mitad de la pantalla.
  • No aparecen las imágenes
  • En los diseños que centran el texto en las computadoras, el texto siempre estará alienado a la izquierda en los dispositivos móviles para asegurar que el icono X sea visible

Puedes definir estilos específicos para dispositivos móviles en el panel Estilo o desactivar las ventanas emergentes para dispositivos móviles en el panel Visualización y tiempo.

Mensajes emergentes y SEO

El uso de mensajes emergentes con promociones puede tener un impacto negativo en la clasificación de tu sitio en los motores de búsqueda. Si te preocupa el SEO, te recomendamos que elijas un diseño de mensaje emergente que solo cubra parte de la pantalla de un equipo de escritorio.

Es especialmente importante asegurarse de que los mensajes emergentes no restrinjan el acceso a tu contenido web en dispositivos móviles. De lo contrario, es posible que Google no clasifique tu sitio en los primeros resultados de búsqueda para dispositivos móviles. Para ayudarte a evitar este problema, todos los pop-ups promocionales solo llenan la mitad de la página en dispositivos móviles. También puedes optar por pop-ups en dispositivos móviles.

Nota

La estrategia SEO queda fuera del alcance del soporte técnico de Squarespace. Ofrecemos funciones compatibles con SEO y una lista de comprobación para SEO completa para optimizar tu sitio para los motores de búsqueda y los visitantes, pero no podemos proporcionar consejos específicos sobre la clasificación del sitio.

Solución de problemas

El mensaje emergente sigue apareciendo aunque no lo he aceptado

Si los visitantes ven que el mensaje emergente aparece nuevamente durante la misma sesión de navegación, tal vez estén visitando tu sitio en una ventana privada o de incógnito. Las ventanas privadas no reconocen cada visita, es decir, el mensaje emergente seguirá las normas de tiempo y frecuencia predeterminadas cada vez que las personas actualicen o visiten una página nueva de tu sitio.

La ventana emergente muestra una barra de desplazamiento 

Demasiado texto agrega una barra de desplazamiento y puede causar problemas de visualización en dispositivos móviles. Intenta limitar el título a una frase y el cuerpo a tres.

La ventana emergente demora en cargarse

Subir una gran cantidad de imágenes en alta resolución puede afectar el tiempo de carga de tu ventana emergente.

Limitaciones

  • Solo puedes activar un mensaje emergente a la vez. Para mostrar otro mensaje en tu sitio, agrega una barra de anuncios.
  • Los mensajes emergentes no admiten código personalizado.
  • Los pop-up promocionales solo aparecen cuando la persona que visita el sitio llega a una página. No es posible configurar un pop-up que aparezca cuando la persona sale de tu sitio.
  • No puedes cargar un archivo de video en un pop-up. Para simular el aspecto de un video, te recomendamos usar un .gif animado.
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Cómo crear un mensaje emergente con promociones