¿Buscas una forma de crear un popup de lightbox para tu sitio?
Un popup de lightbox puede ser increíblemente efectivo para captar leads. Están diseñados para convencer y convertir.
Pero tener que codificar uno desde cero es un verdadero fastidio. Por un lado, tendrías que saber suficiente HTML, CSS y Javascript para crear el popup junto con las reglas de activación para cuándo mostrarlo. Luego, tendrías que crear una integración manual con tu proveedor de servicios de correo electrónico. Y finalmente, tendrías que lidiar con cualquier problema de privacidad y seguridad.
Buenas noticias: hay una forma mucho más sencilla.
En este artículo, te mostraremos cómo lanzar un popup de lightbox sin necesidad de codificación en menos de 10 minutos.
Vamos a ello.
¿Qué es un Popup de Lightbox?
Un popup de lightbox es un formulario de suscripción que aparece con un efecto cinematográfico. Cuando aparece un lightbox, difumina el resto del sitio en el fondo. De esta manera, toda tu atención se centra en el popup.
Originalmente, el concepto de los lightboxes proviene de la publicidad exterior:
Y entonces, algunos desarrolladores pensaron que era un efecto muy bueno y crearon una biblioteca de Javascript para recrear el mismo efecto en activos web. Más tarde, surgió la idea de usar popups de lightbox.
Por qué funcionan los Popups de Lightbox
Los popups de lightbox capturan más correos electrónicos que un formulario de suscripción de correo electrónico tradicional.
¿Pero por qué funcionan?
Echemos un vistazo rápido a las principales razones por las que los popups de lightbox funcionan tan bien.
#1. Los Popups de Lightbox Presentan una Llamada a la Acción Clara
La mayoría de la gente cree que es genial dar a sus clientes muchas opciones.
Pero eso no es realmente cierto.
Si buscas conversiones directas, quieres una llamada a la acción única y clara en la que tu audiencia pueda centrarse. De esta manera, eliminas todas las distracciones de la mente del usuario. Y los popups de lightbox hacen un gran trabajo al resaltar tu oferta principal y hacer que la gente se centre en tu llamada a la acción.
Por lo tanto, naturalmente, las tasas de conversión son bastante buenas.
#2. Los Popups de Lightbox Son Imposibles de Ignorar
Los popups de lightbox ocupan toda la pantalla y difuminan todo lo demás. Por lo tanto, es prácticamente imposible ignorarlos.
Esto es especialmente cierto si están animados:
Por supuesto, debes asegurarte de que tus popups no sean intrusivos. Y puedes hacerlo personalizando cuándo activar diferentes popups en tu sitio. Siempre que tu audiencia no se sienta molesta por la interrupción, puedes convencerla y convertirla muy fácilmente.
#3. Los Popups de Lightbox Tienen Activadores Personalizados
No deberías mostrar la misma oferta a todos tus visitantes web. Si tienes una tienda de comercio electrónico, necesitarás ofertas muy diferentes para clientes nuevos y recurrentes.
Para un nuevo cliente, puedes activar una campaña de bienvenida:
Pero para un cliente recurrente, es posible que desees enviarle una oferta diferente:
Observa cómo los importes de descuento para ambas ofertas son exactamente los mismos. Pero la forma en que se presenta la oferta es drásticamente diferente. Y esto es súper importante porque los popups de lightbox están diseñados para efectos teatrales. Por lo tanto, un enfoque más personalizado te dará resultados mucho mejores, sin duda.
Incluso podrías personalizar la oferta basándote en las preferencias de contenido de tu usuario. Si están leyendo un artículo sobre recetas para la cena, tiene más sentido mostrarles una oferta relacionada con recetas para la cena en lugar de mostrarles una oferta de coches.
#4. Los popups de Lightbox pueden capturar visitantes que abandonan
Los Lightboxes son solo un método para mostrar tu popup. Por lo tanto, realmente nada te impide personalizar el disparador hasta el punto que desees. Recomendamos crear popups de Lightbox con intención de salida.
Los popups de intención de salida se activan cuando tus visitantes intentan salir de tu sitio web. Como resultado, retienes a un gran número de visitantes que de otro modo habrían abandonado tu sitio. Por lo tanto, si sufres de abandono del sitio, definitivamente deberías crear un popup de Lightbox con intención de salida.
Cómo crear un popup de Lightbox
Ahora que entiendes qué es un popup de Lightbox y por qué querrías crear uno, ¿cómo creas un popup de Lightbox? Recomendamos usar OptinMonster para crear tus popups.
OptinMonster es el kit de herramientas de conversión n.º 1 del mundo y lo hemos utilizado nosotros mismos. OptinMonster hace que sea muy sencillo crear popups potentes que convierten. Y nunca tendrás que usar ningún código.
Incluso escribimos una reseña completa de OptinMonster.
Puedes echarle un vistazo, o empezar con tu campaña ahora mismo. Todo lo que tienes que hacer es registrarte en OptinMonster y seguir el resto de este artículo.
Paso #1: Crear una Campaña
Ve a tu panel de OptinMonster y pulsa el botón Crear:
Selecciona el tipo de campaña Popup de Lightbox :
Luego, elige una plantilla de campaña. Puedes elegir la plantilla que quieras, pero nosotros usaremos el tipo de campaña Simple para este tutorial.
Ahora, ponle un nombre a tu campaña. Recuerda, este nombre de campaña es para ti y probablemente crearás un montón de estos popups con diferentes opciones de segmentación. Así que, dale a la campaña un nombre significativo o terminarás muy confundido más adelante.
Además, dependiendo de tu plan, también puedes usar OptinMonster en varios sitios. Por lo tanto, selecciona también el sitio web donde quieres mostrar tu campaña.
Pulsa Empezar a Construir cuando hayas terminado.
Paso #2: Editar tu Popup de Lightbox
Con OptinMonster, obtendrás un constructor visual de popups de arrastrar y soltar. Una vez que hayas terminado de crear tu campaña, podrás editar hasta el más mínimo detalle de tu popup. Empieza editando el titular de tu popup:
La parte más increíble aquí es que simplemente haces clic en cualquier texto que quieras editar y lo cambias en línea. No hay necesidad de rellenar un formulario ni de editar ningún código HTML en el popup.
Y luego, ajusta el texto y la apariencia de tu botón para crear una llamada a la acción clara:
Cuando estés satisfecho con la apariencia de tu popup, puedes pasar a configuraciones más avanzadas.
Paso #3: Configurar Reglas de Visualización
Las reglas de visualización están destinadas a definir cuándo aparece tu campaña en tu sitio y quién la ve.
Nuestra recomendación es que cambies la condición del disparador a intención de salida:
Haz clic en Siguiente Paso para elegir la Acción. Aquí, te recomendamos que establezcas Mostrar la vista de campaña en Vista de Inclusión, que establezcas mostrar con MonsterEffect en cualquier animación de entrada que desees, y reproducir efecto de sonido en cualquier efecto de sonido para tu popup.
Y luego, haz clic en el botón Siguiente Paso. Puedes ver el alcance completo de tu configuración en la pestaña Resumen.
Paso #4: Configurar tu Integración de Correo Electrónico
El siguiente paso es configurar tu integración de correo electrónico. Haz clic en Añadir nueva integración en la pestaña Integraciones y selecciona tu proveedor de servicios de correo electrónico:
Recomendamos usar Drip para tu marketing por correo electrónico si aún no tienes un proveedor de servicios de correo electrónico.
Paso n.º 5: Publica tu ventana emergente de tipo lightbox
Cuando creas una nueva campaña, está Pausada por defecto.
Ve a la pestaña Publicar en el menú superior para ver las Opciones de publicación. Luego, establece el estado en Publicar y selecciona la plataforma del sitio web:
Si tienes un sitio de WordPress, el plugin de OptinMonster se encarga del resto de la configuración automáticamente. Es lo mismo para Shopify y BigCommerce. Para cualquier otro sitio, haz clic en Cualquier sitio y pega el código de inserción en el encabezado de tu sitio web:
¡Y listo!
EXTRA: Recopila suscriptores de notificaciones push desde tu ventana emergente
Las notificaciones push te ayudan a aumentar el tráfico y la interacción de tu sitio web de forma automática. Las notificaciones push web son una forma eficaz de recuperar usuarios que pueden haber abandonado su sesión o salido del sitio web. Ayuda a volver a interactuar con los usuarios notificándoles sobre contenido nuevo, ofertas o eventos.
Las notificaciones push también incluyen mensajes claros y accionables y botones de llamada a la acción, que animan a los usuarios a realizar acciones específicas, como leer un artículo, completar una compra o participar en un evento.
Puedes adaptar las notificaciones push según las preferencias, el comportamiento y los intereses de los usuarios, para asegurarte de que los mensajes sean relevantes y valiosos para cada usuario. Los usuarios tienen que aceptar recibir notificaciones push web. Esto asegura que los mensajes no se vean como spam y que se envíen con el permiso de los usuarios.
La parte más interesante es que puedes recopilar suscriptores de notificaciones push desde tu ventana emergente de correo electrónico. Por lo tanto, en caso de que los visitantes de tu sitio no quieran dar su ID de correo electrónico, aún puedes conseguir que se suscriban utilizando notificaciones push web.
Y en eso es en lo que vamos a trabajar.
Paso #1: Selecciona un Servicio de Notificaciones Push
Recomendamos usar PushEngage para enviar notificaciones push web.
Aquí tienes un vistazo rápido de lo que obtienes con PushEngage:
- Campañas automatizadas de alta conversión
- Múltiples opciones de segmentación y programación de campañas
- Seguimiento de objetivos y analíticas avanzadas
- Pruebas A/B inteligentes
- Un gestor de eacute;xito dedicado
Puedes empezar gratis, pero si te tomas en serio el crecimiento de tu negocio, deberías comprar un plan de pago. Además, antes de comprar cualquier servicio de notificaciones push, deberías consultar esta guía sobre costes de notificaciones push.
Y si tienes una tienda online, PushEngage también te ayuda a aumentar tus ventas al ayudarte a crear notificaciones push de comercio electrónico automatizadas.
Verás que PushEngage es, sin duda, la mejor opción si quieres generar tráfico, interacción y ventas para tu negocio. Y si tienes un presupuesto limitado, siempre puedes ser un poco creativo con tus notificaciones push.
Paso n.º 2: Añade un bloque HTML a tu ventana emergente
Primero, a ilde{n}ade un bloque de HTML a tu ventana emergente desde la barra lateral en OptinMonster.
Aquí es donde vamos a añadir el código para recopilar suscriptores de notificaciones push. Primero, pega el siguiente código para crear un botón clicable:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications Instead</button>Pega el c ilde{o}digo donde dice que puedes a ilde{n}adir HTML:
En este punto, deberías ver un nuevo botón en tu ventana emergente que dice: "Recibir actualizaciones por notificaciones push en su lugar" justo debajo del botón de suscripción por correo electrónico:
Por supuesto, puedes jugar con los estilos para que tenga un aspecto m ilde{a}s atractivo. A continuaci ilde{o}n, haremos que el bot ilde{o}n recopile suscriptores de notificaciones push cuando se haga clic en ilde{e}l.
Paso n.º 3: Obtén el código de suscripción de PushEngage
Diríjase a la página principal de PushEngage y haga clic en el botón Empezar:
Luego, querrás seleccionar el plan gratuito para probar PushEngage o elegir un plan de pago si te tomas en serio el crecimiento de tu negocio. Los planes de pago vienen con más opciones de campaña y la capacidad de crear listas de suscriptores aún más grandes.
En tu panel de control de PushEngage, ve a Configuración del sitio » Detalles del sitio y haz clic en el botón Haz clic aquí para obtener instrucciones de configuración. En Cualquier sitio, obtendrás tu código de instalación:
ADVERTENCIA: Necesitas copiar el código que obtienes de tu panel de control. El código es único para cada usuario de PushEngage. No podrás copiar el código de la imagen y recopilar suscriptores de notificaciones push.
Una vez que tengas el código en tu panel de PushEngage, toma el segundo script y añádele código adicional. Tu código final debería parecerse a esto:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Paso n.º 4: Añade tu código de suscripción al bloque HTML en tu ventana emergente
Añade este código al bloque HTML en OptinMonster y ¡listo!
Cuando hayas terminado, simplemente pulsa los botones Guardar y Publicar.
Si revisas tu sitio web, ahora deberías ver la ventana emergente de tipo lightbox recopilando suscriptores tanto de correo electrónico como de notificaciones push:
Y así de fácil, estás recopilando suscriptores de notificaciones push desde tu ventana emergente. Las notificaciones push vienen con sus propios modales emergentes. Pero son un poco difíciles de personalizar. Por lo tanto, puedes crear ventanas emergentes atractivas usando OptinMonster y luego usarlas como tus ventanas emergentes de notificaciones push.
Qué hacer después de crear una ventana emergente de tipo lightbox
¡Eso es todo por ahora, amigos!
Haznos saber si este artículo te ha sido útil. Crear ventanas emergentes en tu sitio puede ayudarte a convertir tu tráfico en suscriptores de correo electrónico y clientes potenciales de negocio genuinos. Y te recomendamos encarecidamente que empieces a crear ventanas emergentes de tipo lightbox de inmediato.
Y si buscas una forma asequible de aumentar tu tráfico, te recomendamos usar notificaciones push. Las notificaciones push pueden ayudarte a atraer más tráfico recurrente y a aumentar la interacción en el sitio. También puedes crear campañas automatizadas de notificaciones push que generen ventas.
¿No estás convencido? Consulta estos recursos:
- 7 estrategias inteligentes para aumentar la participación del cliente
- ¿Son efectivas las notificaciones push? 7 estadísticas + 3 consejos de expertos
- Cómo configurar notificaciones push de carritos abandonados (tutorial fácil)
Le recomendamos que utilice PushEngage para crear sus campañas de notificaciones push. PushEngage es el software de notificaciones push número 1 del mundo. Por lo tanto, si aún no lo ha hecho, ¡empiece con PushEngage hoy mismo!
