Cómo crear una ventana emergente de Lightbox en su sitio (paso a paso)

Publicado: 2021-12-31

¿Está buscando una manera de crear una ventana emergente de lightbox para su sitio?

Una ventana emergente de lightbox puede ser increíblemente efectiva para capturar clientes potenciales. Están diseñados para convencer y convertir.

Pero tener que codificar uno desde cero es un verdadero fastidio. Por un lado, tendría que saber suficiente HTML, CSS y Javascript para crear la ventana emergente junto con las reglas de activación para cuándo mostrarla. Luego, tendría que crear una integración manual con su proveedor de servicios de correo electrónico. Y finalmente, tendría que lidiar con cualquier problema de privacidad y seguridad.

Buenas noticias: hay una forma mucho más sencilla.

En este artículo, le mostraremos cómo iniciar una ventana emergente de lightbox sin codificación en menos de 10 minutos.

Sumerjámonos.

¿Qué es una ventana emergente de Lightbox?

Una ventana emergente de lightbox es un formulario de suscripción que aparece con un efecto cinematográfico. Cuando aparece una caja de luz, desenfoca el resto del sitio en el fondo. De esta manera, todo su enfoque está en la ventana emergente.

Ejemplo de ventana emergente de caja de luz

Originalmente, el concepto de cajas de luz proviene de la publicidad exterior:

Anuncio de caja de luz

Y luego, algunos desarrolladores pensaron que este era un efecto realmente genial y crearon una biblioteca Javascript para recrear el mismo efecto en los activos web. Más tarde, surgió la idea de usar ventanas emergentes de lightbox.

Por qué funcionan las ventanas emergentes de Lightbox

Las ventanas emergentes 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 razones principales por las que las ventanas emergentes de lightbox funcionan tan bien.

#1. Las ventanas emergentes de Lightbox presentan una clara llamada a la acción

La mayoría de la gente cree que es bueno dar a sus clientes muchas opciones.

Pero eso no es realmente cierto.

Si está buscando conversiones directas, quiere un llamado a la acción único y claro en el que su audiencia pueda enfocarse. De esta manera, elimina todas las distracciones de la mente del usuario. Y las ventanas emergentes de lightbox hacen un gran trabajo al resaltar su oferta principal y hacer que las personas se centren en su llamado a la acción.

Entonces, naturalmente, las tasas de conversión son bastante buenas.

#2. Las ventanas emergentes de Lightbox son imposibles de ignorar

Las ventanas emergentes de Lightbox ocupan toda la pantalla y desenfocan todo lo demás. Por lo tanto, es prácticamente imposible ignorarlos.

Esto es especialmente cierto si están animados:

efectos de animación emergente

Por supuesto, debe asegurarse de que sus ventanas emergentes no sean intrusivas. Y puede hacerlo personalizando cuándo activar diferentes ventanas emergentes en su sitio. Mientras su audiencia no se moleste por la interrupción, puede convencerlos y convertirlos muy fácilmente.

#3. Las ventanas emergentes de Lightbox tienen disparadores personalizados

No deberías mostrar la misma oferta a todos los visitantes de tu web. Si tiene una tienda de comercio electrónico, necesitará ofertas muy diferentes para clientes nuevos y recurrentes.

Para un nuevo cliente, puede activar una campaña de bienvenida:

ventana emergente de cupón

Pero para un cliente que regresa, es posible que desee enviarle una oferta diferente:

Ventana emergente de cupón de compromiso

Observe cómo los montos de descuento para ambas ofertas son exactamente iguales. Pero la forma en que se enmarca la oferta es drásticamente diferente. Y esto es muy importante porque las ventanas emergentes de lightbox están diseñadas para efectos teatrales. Por lo tanto, un enfoque más personalizado le dará mejores resultados con seguridad.

Incluso podría personalizar la oferta según las preferencias de contenido de su 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 para automóviles.

Ventana emergente de salida de vida en el campo

#4. Las ventanas emergentes de Lightbox pueden capturar a los visitantes que abandonan

Las cajas de luz son solo un método para mostrar su ventana emergente. Por lo tanto, realmente no hay nada que le impida personalizar el gatillo en la medida que desee. Recomendamos crear ventanas emergentes de lightbox con intención de salida.

Ventana emergente de intención de salida

Las ventanas emergentes de intención de salida se activan cuando sus visitantes intentan salir de su sitio web. Como resultado, retiene una gran cantidad de visitantes que de otro modo habrían abandonado su sitio. Por lo tanto, si está sufriendo de abandono del sitio, definitivamente debe crear una ventana emergente de lightbox con intención de salida.

Cómo crear una ventana emergente de Lightbox

Ahora que comprende qué es una ventana emergente de caja de luz y por qué querría crear una, ¿cómo se crea una ventana emergente de caja de luz? Recomendamos usar OptinMonster para crear sus ventanas emergentes.

Página de inicio OptinMonster

OptinMonster es el kit de herramientas de conversión número 1 en el mundo y lo hemos usado nosotros mismos. OptinMonster hace que sea súper simple crear poderosas ventanas emergentes que conviertan. Y nunca tendrás que usar ningún tipo de codificación.

Incluso escribimos una reseña completa de OptinMonster.

Puede verificar eso o comenzar con su campaña ahora mismo. Todo lo que tiene que hacer es registrarse en OptinMonster y seguir el resto de este artículo.

Paso #1: Crea una Campaña

Dirígete a tu tablero de OptinMonster y presiona el botón Crear :

Crear una nueva campaña emergente

Seleccione el tipo de campaña Lightbox Popup :

crear una ventana emergente de caja de luz

Luego, elija una plantilla de campaña. Puede elegir la plantilla que desee, pero vamos a usar el tipo de campaña Simple para este tutorial.

Seleccione el tema de la campaña emergente

Ahora, dale un nombre a tu campaña. Recuerde, este nombre de campaña es para usted y probablemente creará un montón de estas ventanas emergentes con diferentes opciones de orientación. Por lo tanto, déle a la campaña un nombre significativo o terminará realmente confundido más adelante.

Además, dependiendo de su plan, también puede usar OptinMonster en múltiples sitios. Por lo tanto, seleccione el sitio web donde desea mostrar su campaña también.

Crear identidad de campaña

Presione Comenzar a construir cuando haya terminado.

Paso #2: edite su ventana emergente

Con OptinMonster, obtendrá un generador visual de ventanas emergentes de arrastrar y soltar. Una vez que haya terminado de crear su campaña, podrá editar incluso los detalles más pequeños sobre su ventana emergente. Comience editando su título emergente:

Edita tu titular

La parte más sorprendente aquí es que simplemente haces clic en cualquier texto que quieras editar y lo cambias en línea. No es necesario completar un formulario o editar ningún código HTML en la ventana emergente.

Y luego, ajuste el texto y la apariencia de su botón para crear una clara llamada a la acción:

Personalizar CTA

Cuando esté satisfecho con la apariencia de su ventana emergente, puede pasar a configuraciones más avanzadas.

Paso #3: Establecer reglas de visualización

Las reglas de visualización están destinadas a definir cuándo aparece su campaña en su sitio y quién la ve.

Reglas de visualización de ventanas emergentes

Nuestra recomendación es que cambie la condición de activación a intención de salida:

Ventana emergente de la caja de luz de intención de salida

Haga clic en Siguiente paso para elegir la acción . Aquí, le recomendamos que configure Mostrar la vista de la campaña en Optin View, configure el programa con MonsterEffect en cualquier animación de entrada que desee y reproduzca el efecto de sonido en cualquier efecto de sonido para su ventana emergente.

Configuración de acciones de campaña

Y luego, haga clic en el botón Siguiente paso . Puede ver el alcance completo de su configuración en la pestaña Resumen.

Paso #4: Configure su integración de correo electrónico

El siguiente paso es configurar su integración de correo electrónico. Haga clic en Agregar nueva integración en la pestaña Integraciones y seleccione su proveedor de servicios de correo electrónico:

Integraciones OptinMonster

Recomendamos usar Drip para su marketing por correo electrónico si aún no tiene un proveedor de servicios de correo electrónico.

Paso #5: Publique su ventana emergente Lightbox

Cuando crea una nueva campaña, está en pausa de forma predeterminada.

Vaya a la pestaña Publicar del menú superior para ver las Opciones de publicación . Luego, establezca el estado en Publicar y seleccione la plataforma del sitio web:

Publicar campaña OptinMonster

Si está ejecutando un sitio de WordPress, el complemento OptinMonster maneja el resto de la configuración automáticamente. Es lo mismo para Shopify y BigCommerce. Para cualquier otro sitio, haga clic en Cualquier sitio y pegue el código de inserción en el encabezado de su sitio web:

Incrustación global

¡Y tu estas listo!

Terminando

¡Eso es todo por esto, amigos!

Háganos saber si este artículo ayudó. La creación de ventanas emergentes en su sitio puede ayudarlo a convertir su tráfico en suscriptores de correo electrónico y oportunidades comerciales genuinas. Y le recomendamos encarecidamente que comience a crear ventanas emergentes de lightbox de inmediato.

Y si está buscando una forma asequible de aumentar su tráfico, le recomendamos que utilice notificaciones automáticas. Las notificaciones automáticas pueden ayudarlo a atraer más tráfico repetido y participación en el sitio. También puede crear campañas automáticas de notificaciones automáticas que generen ventas.

¿No convencido? Consulte estos recursos:

  • 7 estrategias inteligentes para impulsar el compromiso del cliente
  • ¿Son efectivas las notificaciones push? 7 estadísticas + 3 consejos de expertos
  • Cómo configurar notificaciones automáticas de carritos abandonados (tutorial sencillo)

Recomendamos usar PushEngage para crear sus campañas de notificaciones push. PushEngage es el software de notificaciones push n.º 1 del mundo. Entonces, si aún no lo ha hecho, ¡comience con PushEngage hoy!