Las campañas de ventana emergente, también conocidas como mensajes dentro de la aplicación, te permiten mostrar mensajes personalizados directamente en tu sitio web o aplicación móvil para captar la atención de los visitantes en el momento adecuado. Utilízalas para promocionar ofertas, destacar anuncios o impulsar la acción sin necesidad de enviar una campaña independiente. A diferencia de las campañas push, los visitantes no tienen que dar su consentimento para recibir las ventanas emergentes, por lo que pueden llegar a todo el mundo.

Información relevante

• Las ventanas emergentes utilizan la misma configuración que las notificaciones push. Si ya has configurado las notificaciones push, no necesitas volver a configurar las ventanas emergentes. Para obtener más información, consulta nuestro artículo dedicado Configurar notificaciones push web y ventanas emergentes.
• Las campañas de ventana emergente difieren de los formularios de suscripción de ventana emergente. Los formularios de suscripción se utilizan para recopilar nuevos contactos y hacer crecer tus listas, mientras que las ventanas emergentes promocionales son mensajes de campaña que se envían a los visitantes de tu sitio web o aplicación. Para obtener más información, consulta nuestro artículo dedicado Crear un formulario de suscripción de ventana emergente en Brevo.

🔎 Paso 1: Crear una campaña de ventana emergente

Para crear tu campaña de ventana emergente:

1. Ve a Marketing > Campaigns (Campañas).
2. Haz clic en Create campaign (Crear campaña).
3. Elige Pop-up (Ventana emergente).
4. Asigna un nombre a tu campaña de ventana emergente, a fin de encontrarla fácilmente en la lista de tus campañas de ventana emergente. Este nombre solo será visible para ti.
5. (Opcional) Selecciona una o varias etiquetas. Para obtener más información, consulta nuestro artículo dedicado Crear y utilizar etiquetas para las campañas y automatizaciones.
6. (Opcional) Selecciona una carpeta en la que quieras guardar tu campaña de ventana emergente para fines de organización. Para obtener más información sobre las carpetas de campañas, consulta nuestro artículo dedicado Organizar las plantillas y campañas mediante carpetas.
   
7. Haz clic en Create pop-up (Crear ventana emergente).

🎨 Paso 2: Diseñar una ventana emergente

Ahora ya puedes empezar a diseñar el aspecto que tendrá tu ventana emergente en tu sitio web, tanto en ordenadores de escritorio como en dispositivos móviles.

Puedes arrastrar y soltar bloques y configurar otros elementos para diseñar tu campaña de ventana emergente, o bien utilizar el editor HTML/CSS.

Diseñar una campaña de ventana emergente

Editor Drag and DropHTML/CSS

Para empezar a diseñar tu campaña de ventana emergente con el editor Drag and Drop:

1. Haz clic en Create design (Crear diseño) > Drag & drop editor (Editor Drag and Drop).
2. Selecciona Start from scratch (Empezar desde cero) o elige una de las plantillas disponibles.

3. Utiliza el editor para añadir contenido a tu ventana emergente.

   Despliega los siguientes cuadros desplegables para obtener más información sobre los bloques disponibles para diseñar tu ventana emergente

   ✏️ Texto

   

   El bloque de Text (Texto) te permite incluir texto descriptivo en tu ventana emergente. Puedes agregar una introducción atractiva y proporcionar más contexto sobre el propósito de la venta emergente. Al hacer clic en un bloque de texto, aparece una barra superior. Esta barra te permite modificar el formato del texto, como el estilo, la fuente, el tamaño, el color y la alineación, así como insertar enlaces.

   🖼️ Imagen

   El bloque de Image (Imagen) te permite añadir una imagen atractiva. Puedes seleccionar o generar una imagen. Puedes añadir una página o pantalla de destino y personalizar el estilo de la imagen.

   🖱️ Botón

   El bloque de Button (Botón) te permite añadir una llamada a la acción mediante una URL, lo que permite redirigir a los visitantes cuando hagan clic en él. Puedes personalizar el estilo de tu botón de llamada a la acción: cambiar el texto, el color, la fuente, el radio del borde y el relleno.

4. Puedes personalizar el aspecto de tu ventana emergente en tu sitio web. Haz clic en cada elemento de la vista previa para editarlo. Personaliza el diseño de tu ventana emergente mediante el panel de configuración. Expande los siguientes cuadros desplegables para obtener más información sobre los elementos de la ventana emergente que puedes personalizar. 

   🔳 Superposición de fondo

   Haz clic en la superposición de fondo de la vista previa para personalizarla. Puedes elegir un color y una opacidad para el fondo para que tu ventana emergente destaque.

   💬 Ventana emergente (diseño, imagen, estilo)

   Haz clic en la ventana emergente en la vista previa para personalizar su diseño: Posición y tamaño: define la posición y el tamaño de la ventana emergente. Diseño: ajusta el espaciado, los márgenes, la distancia al borde de la página y la orientación. Imagen: activa la opción Show image (Mostrar imagen) para mostrar una imagen en tu ventana emergente. Haz clic en Select image (Seleccionar imagen) para subir una, o en Generate (Generar) para crear una con IA. Estilo: personaliza el color de fondo, los bordes, las esquinas redondeadas y la sombra. Animación: elige cómo aparece y desaparece la ventana emergente. Cierre automático: activa el cierre automático de la ventana emergente. 💡 Información relevante La sección Image (Imagen) te permite añadir una sola imagen en la ventana emergente. Para añadir más imágenes o colocarlas en otro lugar, utiliza el bloque de Image (Imagen) en su lugar. Ten en cuenta que, a diferencia del bloque de Image (Imagen) no se puede hacer clic en esta imagen.

   ✖️ Botón Cerrar

   Haz clic en el botón Cerrar para editar el color del icono en forma de X, el color de relleno, los bordes y la sombra.

Para empezar a diseñar tu campaña de ventana emergente con el editor HTML/CSS:

1. Haz clic en Create design (Crear diseño) > HTML/CSS editor (Editor HTML/CSS).
2. Escribe tu código HTML y CSS directamente en el editor para controlar por completo el diseño de tu ventana emergente.
3. Haz clic en Save and exit (Guardar y salir) cuando termines.

Vista móvil

Puedes obtener una vista previa de cómo se verá tu ventana emergente en un dispositivo móvil alternando entre la vista de escritorio y la vista móvil en la parte superior del editor. Ten en cuenta que la vista móvil no se puede editar.

Una vez que estés satisfecho con el aspecto de tu ventana emergente, haz clic en Save and exit (Guardar y salir).

⚙️ Paso 3: Configurar una campaña de ventana emergente

Expande los siguientes cuadros desplegables para ver las opciones disponibles para configurar el formulario de ventana emergente.

🚀 Paso 4: Activar una ventana emergente

Ahora ya puedes activar tu ventana emergente:

1. Revisa la configuración de tu ventana emergente.
2. Haz clic en Activate now or late (Activar ahora o más tarde).
   
3. En el menú desplegable Activate pop-up (Activar ventana emergente), selecciona:
   • Now (Ahora) para que tu ventana emergente se active de inmediato; o
   • At a specific time (A una hora específica) para seleccionar el día y la hora de activación.
4. En el menú desplegable Deactivate pop-up (Desactivar ventana emergente), selecciona:
   • Never (Nunca) para mantener tu ventana emergente activa; o
   • At a specific time (A una hora específica) para seleccionar el día y la hora de desactivación.
5. Haz clic en Activate now (Activar ahora) o en Schedule pop-up (Programar ventana emergente).

Una vez que tu ventana emergente esté activa, podrás realizar un seguimiento de su rendimiento desde la página Campaigns (Campañas): visualizaciones, clics e índice de conversión.

⏭️ ¿Qué es lo siguiente?

• Configurar notificaciones push web y ventanas emergentes
• Crear un formulario de suscripción de ventana emergente

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con la agencia partner de Brevo adecuada.