Así es como sus empresas favoritas utilizan ventanas emergentes de sitios web para crecer (¡y usted también puede hacerlo!)

Publicado: 2020-04-02

Hay dos tipos de personas.

Aquellos que aman las ventanas emergentes de sitios web y aquellos que los odian.

El primer grupo sabe lo ridículamente efectivas que pueden ser las ventanas emergentes de sitios web. El segundo grupo los encuentra ridículamente molestos.

Pero, ¿cuál es la diferencia real entre una buena ventana emergente de un sitio web y una mala?


Al examinar cientos de ellos, llegamos a la siguiente conclusión. Todo se reduce a tres cosas:

  • Cómo se ven estas ventanas emergentes

  • Qué valor ofrecen

  • Cuando exactamente aparecen

Quiero decir, sí, algunas ventanas emergentes son interruptores de experiencias molestos, desagradables y desagradables.

Pero eso se debe a que se han configurado de forma incorrecta.

Por ejemplo, eche un vistazo a esta impresionante ventana emergente en el sitio web de Nike:

La ventana emergente del sitio web en el sitio web de Nike anuncia una venta en todo el sitio

¿Alguien lo llamaría detestable o molesto?

Pensé tanto.

La ventana emergente de Nike se ve elegante y ofrece valor (los descuentos se aplican automáticamente al finalizar la compra, ¡hurra!). Y seguramente tampoco interrumpe la experiencia. En todo caso, es una parte integral de ello.

Hay miles de empresas grandes y conocidas que utilizan con éxito ventanas emergentes de sitios web para recopilar correos electrónicos, anunciar ventas y mostrar llamadas a la acción. Tome como ejemplo The New York Times, Adidas, The Guardian, Century 21 o Slack, ¡y la lista puede seguir y seguir!

Entonces, ¿por qué no aprender de los mejores y aplicar su enfoque para hacer crecer su negocio?

Probablemente piense que necesita un desarrollador o los presupuestos de estas grandes empresas para agregar una ventana emergente de aspecto profesional a su sitio web. Bueno, eso no es cierto.

En esta publicación de blog, le mostraremos 15 ejemplos de ventanas emergentes de sitios web utilizados por algunas de las empresas más conocidas en varios nichos. También le explicaremos por qué cada ventana emergente es tan efectiva.

¿La mejor parte? Le mostraremos exactamente cómo recrearlos en su sitio web en minutos usando Getsitecontrol.

Para ayudarlo a navegar, hemos dividido la lista en 3 categorías. Está a punto de ver ventanas emergentes del sitio web que le ayudarán:

  • Obtenga suscriptores de correo electrónico

  • Mostrar llamadas a la acción

  • Anuncie cualquier actualización

No dude en pasar a la categoría que más le interese.

Ventanas emergentes de sitios web que ayudan a las marcas a crear listas de correo electrónico

Todo el mundo está loco por hacer crecer sus listas de correo electrónico en este momento. ¡Y tú también deberías estarlo!

En caso de que se lo haya perdido, el correo electrónico tiene un ROI de $ 44 por cada dólar gastado.

Tener personas en su lista de correo electrónico significa que posee ese permiso exclusivo para reunirse con ellos directamente en sus bandejas de entrada, desarrollar una relación y convertirlos en clientes recurrentes.

Espera, pero ¿cuál es la mejor manera de hacer crecer una lista de correo electrónico? Apuesto a que ya sabes la respuesta.

Son ventanas emergentes de sitios web.

Veamos cómo las marcas de las que seguramente ha oído hablar (y de las que probablemente incluso haya comprado) utilizan ventanas emergentes para recopilar direcciones de correo electrónico.

1. Tienda The New York Times: 10% de descuento en su primer pedido

The New York Times fue uno de los primeros en evolucionar hacia un medio de suscripción paga en línea.

Hoy en día, este es el sitio de periódicos más visitado. Y utilizan ventanas emergentes de sitios web para diversos fines.

Por ejemplo, mire este formulario de suscripción por correo electrónico minimalista que aparece tan pronto como ingresa a la tienda en línea de The New York Times.

La tienda del New York Times utiliza una ventana emergente del sitio web para recopilar correos electrónicos.

Esto es lo que hace que esta ventana emergente de sitio web sea excelente:

  • Diseño cohesivo
    La ventana emergente tiene el mismo tema de color y la misma fuente que el resto de The NYT Store. Aparece como una parte integral y creíble del sitio web.

  • Imán de plomo
    No solo se le ofrece suscribirse a nuevas ofertas, sino que también obtiene un 10% de descuento en su primer pedido si se une a la lista.

  • Apariencia instantánea
    Siempre no está claro si las ventanas emergentes del sitio web deben aparecer de una vez o después de que un visitante pasa algún tiempo en una página. En este caso, mostrar el formulario al instante es ciertamente mejor que después de que un cliente potencial realiza una compra, ¿no es así?

¿Desea agregar una ventana emergente de suscripción similar a su sitio web?

Hemos seguido el espíritu creativo de The New York Times para crear un formulario de suscripción similar. Haga clic en la ventana emergente del sitio web a continuación para verlo en acción. Luego siga las sencillas instrucciones que aparecerán en el lado derecho de la página.

Ventana emergente de creación de listas de correo electrónico minimalista impulsada por Getsitecontrol Ver vista previa en vivo →

La plantilla de vista previa en vivo se agregará directamente a su panel de control de Getsitecontrol. A partir de ahí, podrá modificar los detalles como el porcentaje de descuento, el título y el tema de color para que sea una combinación perfecta para su sitio web.

Entonces, podrá utilizar el Orientación settings para especificar la página donde desea que aparezca la ventana emergente.

2. Century 21: desbloquea $ 25 de descuento o paga el precio completo

Century 21, el gigante minorista de la moda con precios rebajados se puso en línea hace unos años y también ha entrado en el juego de la creación de listas de correo electrónico. Echa un vistazo a la ventana emergente que se muestra unos segundos después de llegar a su sitio web.

Century 21 usa un botón de exclusión negativo en su ventana emergente

Esto es lo bueno de esta ventana emergente de sitio web:

  • Microcopia de formato de correo electrónico
    Century 21 eligió especificar cómo debería ser una dirección de correo electrónico para asegurarse de que los clientes la hagan bien. Sabiendo que su audiencia es muy amplia e incluye personas que no son necesariamente conocedoras de la tecnología, esta es una gran decisión.

  • Botón de exclusión negativa
    Seguro, no tienes que registrarte si no quieres. Pero eso significa que está dispuesto a pagar el precio completo, ¿verdad? El botón de exclusión voluntaria es un pequeño detalle que le hace pensar dos veces antes de rechazar la oferta.

  • Elección inteligente de colores
    Tenga en cuenta que los colores de esta ventana emergente no solo se correlacionan con el tema del sitio web, sino que el botón "Continuar" también se enfatiza con rojo. Mientras tanto, el botón de exclusión voluntaria simplemente se mezcla con el fondo.

¿Quiere una ventana emergente con un botón de exclusión voluntaria para su sitio web?

Si le gusta esta ventana emergente del sitio web, volver a crearla es tan fácil como 1-2-3. Simplemente haga clic en la plantilla a continuación y siga las instrucciones.

Una ventana emergente de suscripción de correo electrónico con botones de Getsitecontrol Ver vista previa en vivo →

Una vez que llegue al tablero, vaya a Contenido configuración para ajustar la copia y el tema de color si es necesario. Siguiendo el ejemplo de Century 21, es posible que también desee agregar su logotipo en la parte superior.

3. Marie Claire: el efecto FOMO en acción

Si cree que los botones de exclusión negativos pueden funcionar solo para las tiendas en línea, piénselo de nuevo.

Cuando ofrezca contenido de alta calidad por correo electrónico, también podría recordarle a la gente las consecuencias de no suscribirse. Solo mire cómo la revista Marie Claire usa el efecto FOMO en su botón de exclusión voluntaria.

Marie Claire ofrece un lead magnet a cambio de una suscripción

Esto es lo que nos gusta de esta ventana emergente de sitio web:

  • El botón de exclusión negativa
    Además del efecto FOMO, observe cómo Marie Claire convirtió el botón de exclusión voluntaria en una declaración de amor propio.

  • La copia de la CTA de registro de correo electrónico
    Hay tantas llamadas a la acción de incentivo que puede colocar en el botón de registro en lugar de simplemente "Suscribirse". "¡Muéstrame lo que hay dentro!" es uno de ellos.

  • La elección de una imagen
    Y en este caso, no es una imagen cualquiera. Es una foto de Saoirse Ronan, una talentosa actriz que la mayoría de los lectores seguramente reconocerán.

¿Por qué la imagen es tan importante aquí?

Tener una imagen que se correlacione con las expectativas de sus suscriptores es crucial para aumentar la tasa de registro de correo electrónico. Porque no solo se suscriben a algunas tendencias de cabello. Se suscriben para recibir la receta para lucir como una estrella de Hollywood en la alfombra roja.

¿Crees que podrías querer una ventana emergente de un sitio web como esta?

El generador de ventanas emergentes Getsitecontrol tiene una plantilla que le ayudará a recrear fácilmente el ejemplo anterior. Compruébalo a continuación.

Una plantilla emergente de sitio web con una imagen que ocupa la mitad del espacio. Ver vista previa en vivo →

Una vez que lo agregue a su tablero, podrá reemplazar fácilmente la imagen con su imagen o elegir una imagen alternativa de la galería.

4. Adidas: obtenga un 15% de descuento a cambio de una suscripción por correo electrónico

Adidas ofrece un descuento del 15% para los nuevos suscriptores con una ventana emergente que aparece después de pasar un tiempo en su sitio web.

Ventana emergente del sitio web de Adidas con una casilla de verificación de consentimiento

Ahora, esto es lo que es especialmente bueno sobre la ventana emergente del sitio web de Adidas:

  • La microcopia en la parte inferior Para aliviar el miedo a recibir spam con correos electrónicos irrelevantes, Adidas especificó exactamente a qué se suscribe.

  • Casilla de verificación de confirmación de edad De acuerdo con la Ley de Protección de la Privacidad Infantil en Línea (COPPA), cada suscriptor debe confirmar que es mayor de 13 años. Esta casilla de verificación también se puede usar para recopilar el consentimiento explícito para recibir correos electrónicos de marketing.

  • Segmentación basada en el género Según su respuesta, Adidas luego aplicará reglas de segmentación para enviarle el contenido más relevante. Sin embargo, también es inteligente establecer este campo como opcional dada la cantidad de artículos de género neutro que produce Adidas.

  • Confirmación de suscripción Una vez que se registre, verá un llamado "mensaje de éxito de envío" que le indica qué esperar.

Mensaje de éxito de envío de formulario en el sitio web de Adidas

Una opción alternativa aquí sería mostrar el código de descuento para que las personas lo copien y peguen al finalizar la compra. De esta forma, podrían seguir comprando sin salir de la tienda para abrir su correo electrónico.

5. Ahrefs: no te pierdas el próximo artículo

Pasemos al mundo de las TI.

Ahrefs, un conocido desarrollador de software de SEO, usa esta linda diapositiva para sugerir que se suscriba a su boletín una vez que llegue al final de una publicación de blog.

Ahrefs usa una pequeña diapositiva lateral para mostrar un formulario de registro de correo electrónico

Esto es lo que tiene de genial:

  • Un formato diferente
    A diferencia de las ventanas emergentes modales, las diapositivas son menos molestas pero lo suficientemente pegadizas como para llamar la atención. Pueden ser una opción perfecta para proyectos de contenido en los que desea que la experiencia de lectura sea lo más fluida posible.

  • Activador de comportamiento en la página
    El formulario solo aparece cuando llega al final de una publicación de blog. Es el momento perfecto para sugerir la suscripción porque el nivel de participación es alto.

  • El principio FOMO
    Si llegaste al final de uno de los textos largos de Ahref, es muy probable que lo hayas disfrutado. Y no querrás perderte otra gran pieza como esta.

¿Quiere agregar una diapositiva similar a su sitio web?

Recrear este formulario de suscripción es fácil. Hemos creado una ventana deslizable similar a la derecha para que pueda instalarla rápidamente en su sitio web.

Una plantilla deslizable de suscripción por correo electrónico de Getsitecontrol Ver vista previa en vivo →

Haga clic en el widget para verlo en acción y siga las instrucciones.

Una vez listo, use el Orientación configuración para seleccionar páginas específicas en su sitio web donde desea que aparezca la diapositiva, así como las condiciones para cuando debería aparecer.

6. Product Hunt: suscríbase al boletín diario

Product Hunt es una de las comunidades en línea más grandes donde se lanzan productos tecnológicos asombrosos todos los días. Aquellos que no tienen tiempo para visitar el sitio web diariamente pueden obtener resúmenes de las actualizaciones más importantes a través de una suscripción por correo electrónico.

Para aumentar la cantidad de suscripciones, Product Hunt presenta una barra de registro de correo electrónico flotante en la parte inferior de la página.

Product Hunt utiliza una barra de suscripción de correo electrónico flotante para recopilar correos electrónicos

Esto es lo bueno de este formulario de suscripción:

  • Distracción mínima
    Las barras flotantes son las menos molestas de todas las ventanas emergentes de sitios web. Permanecen en la parte superior o inferior de una página web mientras se desplaza por el contenido y esperan pacientemente hasta que esté listo para suscribirse.

  • Frecuencia del boletín
    La copia le dice exactamente con qué frecuencia recibirá correos electrónicos de Product Hunt.

  • Diseño auténtico
    El emoji y el color del botón son los elementos característicos de Product Hunt. Es una gran decisión usarlos en el formulario.

¿Quiere una barra de registro de correo electrónico flotante propia?

Puede agregar un widget similar a su sitio web y mostrarlo en todo el sitio o en páginas específicas. Use la plantilla lista para usar a continuación para comenzar.

Barra flotante simple con un campo de correo electrónico de Getsitecontrol Ver vista previa en vivo →

La copia y el diseño de la plantilla son bastante versátiles, así que siéntete libre de usarla en tu sitio web tal como está.

Ventanas emergentes del sitio web para mostrar su llamado a la acción

¡Es hora de pasar a la siguiente categoría!

La segunda gran razón por la que las empresas usan ventanas emergentes de sitios web es para alentar a los visitantes a obtener un descuento, ver una nueva publicación de blog, participar en un sorteo; en otras palabras, tomar medidas .

Veamos cómo lo están haciendo las empresas de la vida real.

7. Century 21: obtenga un descuento antes de ir

Si comienza a navegar por la tienda en línea de Century 21, debe tener una inmensa cantidad de fuerza de voluntad y resistir la tentación de aprovechar las ofertas especiales que lo esperan en cada esquina.

Primero, le piden que se suscriba a cambio de un cupón de descuento de $ 25. Y luego, si está tratando de irse sin realizar una compra, verá esta ventana emergente del sitio web:

Century 21 utiliza la tecnología de intención de salida para ofrecer un descuento

Si presiona "¡Sí, por favor!" , el código de cupón se muestra directamente en la ventana emergente. Puede copiar el código y pegarlo al finalizar la compra. Sencillo. Eficaz.

He aquí por qué el enfoque de intención de salida funciona tan bien:

  • Atención garantizada
    Simplemente no hay forma de perderse una oferta de descuento que aparece frente a sus ojos cuando navega para salir.

  • Último recurso
    Las ventanas emergentes con intención de salida prácticamente le brindan esa oportunidad única de convertir a las personas que estaban a punto de irse. Seguro, no todos los visitantes que abandonan responderán. Pero algunos de ellos lo harán, y cada esfuerzo cuenta, ¿verdad?

¿Quiere colocar una ventana emergente con intención de salida en su sitio web?

Consulte la plantilla a continuación. Ya está configurado para aparecer justo cuando sus visitantes comiencen a navegar para salir de la página.

Una plantilla emergente con intención de salida con una oferta de descuento de Getsitecontrol Ver vista previa en vivo →

Colóquelo en su sitio web con unos pocos clics, luego vaya al Orientación settings para especificar la página donde se supone que debe aparecer. Por ejemplo, es posible que desee colocarlo en páginas de productos, páginas de categorías o incluso al finalizar la compra para evitar el abandono del carrito de compras.

8. Skillshare: promoción del programa de referencia

Skillshare, una plataforma de aprendizaje en línea, está ejecutando un programa de referencia que le permite ganar meses gratis de clases invitando a amigos. Observe la barra flotante que han colocado en la parte superior de cada página.

Skillshare utiliza una barra flotante superior para promover su programa de referidos.

Lo que Skillshare hizo aquí:

  • Color contrastante
    Skillshare eligió el blanco porque atrae la atención dado el tema de color azul oscuro del sitio web.

  • Solo suficientes detalles
    A pesar de la falta de espacio, la copia proporciona información suficiente para que usted decida si está interesado o no.

  • Botón de llamada a la acción clara
    El botón "Invitar amigos" establece expectativas claras. Lo lleva a la página dedicada donde puede conocer los detalles y obtener su enlace de referencia.

9. The New York Times: lea las actualizaciones importantes ahora

Si su proyecto se centra en el contenido, puede utilizar ventanas emergentes para promocionar la última pieza en el blog, actualizaciones importantes sobre temas seleccionados o simplemente materiales relevantes.

Por ejemplo, así es como The New York Times estaba dirigiendo la atención de sus lectores a las actualizaciones en vivo sobre el brote de COVID-19.

The New York Times instaló una barra flotante para llamar la atención sobre las noticias importantes

Las barras de llamada a la acción en la parte inferior de una página web son utilizadas por varios medios de comunicación para diversos fines. Solo mira nuestro siguiente ejemplo con una ventana emergente de apariencia similar.

10. The Guardian: apoya a The Guardian hoy

A diferencia de The New York Times, The Guardian optó por mantener todos sus materiales en acceso abierto, mientras que los lectores pueden participar en la financiación del periódico en forma de donaciones. Vea cómo comunican este mensaje mediante una ventana emergente en la parte inferior de la página.

The Guardian utiliza una barra adhesiva amarilla para animar a los visitantes a hacer donaciones.

¿Quiere utilizar una ventana emergente similar en su sitio web?

Cuando desee poner énfasis en el mensaje, claramente, estas barras adhesivas son perfectos para captar la atención. Consulte la plantilla a continuación si desea agregar una a su sitio web.

Una plantilla de barra adhesiva inferior de Getsitecontrol Ver vista previa en vivo →

Una vez que lo agregue al tablero de Getsitecontrol, vaya al Contenido pestaña y abra la configuración del botón para colocar el enlace a la página deseada.

Ventanas emergentes del sitio web para realizar anuncios en todo el sitio

La última categoría de ventanas emergentes de sitios web tiene como objetivo informar a los visitantes en lugar de alentarlos a tomar medidas.

Si desea mantener a su audiencia actualizada con las noticias y los términos actuales, las ventanas emergentes del sitio web son perfectas.

Puede usarlos para correr la voz sobre los cambios en las operaciones comerciales, las ofertas actuales o las nuevas políticas, como la política de consentimiento de cookies, por ejemplo.

Echemos un vistazo a cómo Reebok, Tiffany, Nespresso, Intercom y Slack manejan ese tipo de comunicación.

11. Reebok: anuncio de venta en todo el sitio

Para garantizar que todos los que accedan a su sitio web estén informados sobre la venta en todo el sitio, Reebok ha colocado una barra de anuncios flotante en la parte superior de una página web.

Reebok anuncia una venta en todo el sitio utilizando una barra adhesiva negra en la parte superior de la página

Este anuncio no requiere ninguna acción por parte del visitante del sitio web. Puedes pensar en ello como una agradable sorpresa y el incentivo para seguir navegando por la tienda.

12. Tiffany & Co. - recordatorio de servicio gratuito

Así es como Tiffany & Co. informa a los visitantes de la tienda en línea que el envío y las devoluciones son gratuitos para todos los pedidos. Están usando una barra flotante azul Tiffany característica en la parte superior de una página web.

Tiffany & Co elige su color característico para la barra de anuncios adhesiva

Si tiene los códigos de color para el tema de su sitio web, puede usarlos en la ventana emergente Apariencia / CSS configuraciones para crear una barra de anuncios que coincida perfectamente, como la de Tiffany.

13. Nespresso: posible anuncio de retraso en la entrega

El último ejemplo de barra flotante pertenece al sitio web de Nespresso. Están avisando a los clientes en línea notificándoles sobre el retraso en la entrega.

Nespresso notifica a los clientes sobre retrasos en la entrega mediante un par adhesivo

Una vez más, es posible que haya notado que el color de la barra flotante no se ha elegido al azar; hace una combinación perfecta con el botón "Buscar" a continuación.

¿Quiere recrear estas ventanas emergentes de sitios web?

Para llegar a su audiencia con un mensaje breve pero importante, las barras flotantes son excelentes. Para agregar uno a su sitio web, simplemente haga clic en la plantilla a continuación y luego edite la copia.

Getsitecontrol proporciona una plantilla de barra de anuncios adhesiva minimalista Ver vista previa en vivo →

Siéntase libre de cambiar el color por uno que se vea mejor en su sitio web. El tema de color está disponible en la Apariencia pestaña del panel de control de Getsitecontrol.

14. Slack: banner de consentimiento de cookies

Los dos últimos ejemplos de nuestra lista son los banners de cookies.

Como probablemente sepa, a partir de 2018, todos los sitios web que reciben visitantes de la UE deben obtener su consentimiento informado para utilizar cookies que rastrean los datos del usuario.

Así es como se ve el mensaje de cookies en el sitio web de Slack.

Slack utiliza una ventana emergente del sitio web para mostrar el mensaje de consentimiento de cookies

Slack eligió usar una barra deslizante del lado derecho que se vincula a la política de consentimiento de cookies y se cierra al hacer clic.

Si desea colocar uno similar, use la plantilla a continuación.

Getsitecontrol le permite instalar y personalizar un banner de cookies Ver vista previa en vivo →

Puede agregar esta ventana emergente a su sitio web tal como está, o puede insertar un enlace a su página de Política de cookies en la copia del widget, tal como lo hizo Slack.

15. Intercomunicador: barra adhesiva de consentimiento de cookies

Intercom, un popular desarrollador de plataformas de mensajería, optó por una barra adhesiva menos molesta en la parte superior de una página web para notificar a sus visitantes sobre la política de cookies.

Intercom eligió mostrar la notificación de cookies en una barra flotante

Si prefiere esta opción, continúe y haga clic aquí para verificar la plantilla de Getsitecontrol para ver una barra de consentimiento de cookies.

¿Está listo para usar ventanas emergentes de sitios web para hacer crecer su negocio?

Si siempre ha tenido curiosidad por saber si las ventanas emergentes del sitio web pueden ayudar a hacer crecer su negocio, hoy es el día para averiguarlo.

¿No sabes por qué empezar?

Aquí están nuestras 3 ventanas emergentes de sitios web más populares:

  • formulario de suscripción por correo electrónico,

  • banner de consentimiento de cookies,

  • promoción oferta especial.

Elija el más relevante para su negocio (o agréguelos todos a su sitio web a la vez) usando Getsitecontrol y pruébelo gratis.

Está leyendo el blog de Getsitecontrol, donde los expertos en marketing comparten tácticas probadas para hacer crecer su negocio en línea. Este artículo es parte de la sección de participación del cliente.

Suscríbase a nuestro boletín → Ilustración principal de Icons8