Contenido de pop-up web

El contenido de pop-up web es el diseño visual que los visitantes ven cuando aparece un pop-up web en tu sitio web. Créalo en Contenido y luego adjúntalo a una campaña de pop-up web.

Crear contenido de pop-up web

Ve a Contenido → Contenido de pop-up web.
Haz clic en Crear contenido de pop-up web.
Elige una plantilla de inicio de la galería. Usa el menú desplegable de categorías en la esquina superior derecha para filtrar por caso de uso (por ejemplo, Promociones y ofertas, Juegos y marketplaces, o Comentarios y encuestas), o déjalo en Todas las plantillas. La categoría Diseños en blanco contiene los puntos de partida básicos, incluyendo Modal + formulario de suscripción, que ya viene con un bloque de formulario de suscripción.

Una vez que hayas elegido una plantilla, personaliza el pop-up en el editor.

Nombrar el pop-up

Haz clic en el nombre del pop-up en la barra superior para editarlo. El nombre identifica este contenido dentro de Pushwoosh, en la lista de contenido y en el asistente de campaña. Los visitantes del sitio web no lo ven.

Deshacer y rehacer

Usa los atajos de teclado para retroceder y avanzar en tus ediciones:

Cmd/Ctrl+Z: deshacer.
Cmd/Ctrl+Shift+Z: rehacer (Windows/Linux también aceptan Ctrl+Y).

Editar la configuración del pop-up

Ajusta la apariencia y posición del pop-up en el panel de configuración a la izquierda del lienzo:

Imágenes y video

Si el diseño incluye uno o más bloques de medios, cada uno tiene su propio bloque en la parte superior del panel con una vista previa y controles.

Haz clic en Cambiar imagen para elegir un archivo del Almacén de medios de tu proyecto, o establece Medio en Video para reproducir un video en lugar de una imagen estática.

Debajo de la vista previa:

Medio: Imagen o Video.
Ajuste: cómo la imagen o el póster llena su marco: Natural, Cubrir o Contener. No se muestra para una imagen de fondo, que siempre cubre su área.
Desenfoque: suaviza la imagen o el póster, de 0 a 20 px.
Atenuar: solo para medios de fondo. Agrega una capa oscura sobre la imagen o el video para que el texto colocado encima permanezca legible, de 0 a 100%.

Con el tema oscuro habilitado, cada bloque de imagen agrega su propia fila de Imagen para tema oscuro con un botón Cambiar imagen y un campo URL de imagen (tema oscuro). Configúralo para cambiar a una imagen diferente (por ejemplo, un logotipo con tinta oscura en lugar de uno que se perdería en un fondo oscuro) mientras el pop-up se renderiza en oscuro. Se aplica a la imagen del mismo bloque en todas partes donde se pinte esa imagen, incluyendo una imagen de fondo o un póster de video. Déjalo vacío y el bloque seguirá mostrando la URL de imagen clara en ambos esquemas.

Establecer Medio en Video agrega cuatro campos más:

URL del video: un enlace directo al archivo de video. El video solo acepta una URL externa. No puedes subir un video al Almacén de medios. Expórtalo como un MP4 (video H.264, audio AAC) con “inicio rápido” habilitado (a veces llamado “optimizado para web”), para que el navegador pueda comenzar a reproducir antes de que se descargue todo el archivo. Si la URL no se carga, los visitantes solo verán el póster.
Bucle: reproduce el video continuamente en lugar de detenerse después de una reproducción.
Mostrar controles: muestra los controles integrados del navegador para reproducir, pausar y controlar el volumen. Los videos siempre comienzan silenciados, y sin esta opción los visitantes no tienen forma de activar el sonido.
URL del póster: la imagen que se muestra mientras se carga el video. Es opcional pero se recomienda: también es lo único que se muestra a un visitante cuyo navegador todavía ejecuta un script de pop-up antiguo que no admite video, por lo que dejarlo vacío significa que ese visitante no ve nada donde estaría el video.

Algunos diseños también agregan una sección de Diseño con configuraciones de ubicación para el bloque de medios:

Ancho de la imagen: parte del ancho del pop-up, como porcentaje.
Posición de la imagen: Izquierda o Derecha, para diseños con medios junto al texto.

La sección Diseño solo aparece cuando el diseño actual tiene configuraciones como estas. En un diseño de barra inferior, ofrece Ancho de los botones en lugar de controles de imagen.

Tamaño y estilo del pop-up

En la sección Pop-up:

Ancho, Alto (vacío = auto): deja ambos vacíos para un pop-up que se ajusta a su contenido, o establece un tamaño fijo en píxeles. En un pop-up con varias páginas, cada página tiene su propio tamaño.
Radio de esquina, Sombra: el redondeo de las esquinas y la sombra del pop-up.
Animación: cómo aparece el pop-up: Ninguna, Desvanecer o Deslizar.

Con el tema oscuro habilitado, la Sombra sigue el interruptor de esquema sol/luna: edítala mientras el interruptor está en Oscuro para establecer una sombra para la paleta oscura, separada de la clara. Una sombra ajustada para una página clara a menudo es invisible en una oscura, por lo que las dos necesitan valores diferentes. Deja la sombra oscura sin tocar y el pop-up seguirá usando el valor de Sombra claro en ambos esquemas.

Colores

Haz clic en Colores para expandir la paleta de colores del pop-up:

Fondo, Acento (botones): el fondo del pop-up y el color de acento aplicado a los botones.
Texto, Texto secundario: el color del texto del cuerpo y del texto secundario, como leyendas y encabezados.
Texto sobre imagen: solo se muestra para diseños con texto sobre una imagen de fondo. Establece el color utilizado para ese texto.

Modo oscuro

Activa Habilitar tema oscuro para darle al pop-up una segunda paleta para los visitantes cuyo dispositivo está configurado con un esquema de color oscuro. Si está desactivado, el pop-up siempre se renderiza con la paleta clara de arriba, para todos los visitantes.

Una vez que Habilitar tema oscuro está activado:

Usa el interruptor sol/luna sobre los campos de color para elegir qué paleta estás editando. El lienzo se redibuja en ese esquema, para que puedas verificar cómo se verá realmente el pop-up en cada modo.
Haz clic en Automático desde claro para (re)generar la paleta oscura a partir de los colores claros actuales: las superficies se oscurecen y el texto se aclara, mientras que Acento y Texto sobre imagen se mantienen sin cambios. Edita cualquiera de los cinco campos después para ajustar el resultado.
Desactivar Habilitar tema oscuro de nuevo conserva la paleta oscura en lugar de descartarla, por lo que volver a activarla restaura tus ediciones en lugar de regenerar desde cero.

El mismo interruptor sol/luna aparece junto a Cerrar vista previa (Esc) cuando abres la Vista previa en un pop-up con el tema oscuro habilitado, para que también puedas verificar ambas paletas en la vista previa a tamaño completo.

El navegador de un visitante decide qué paleta ve, basándose en la configuración del modo oscuro a nivel del sistema operativo; no hay un interruptor de oscuro/claro en el propio pop-up. Un sitio puede forzar un esquema para todos, independientemente de la configuración del SO; consulta webPopups.colorScheme en la documentación del SDK web.

Ubicación y superposición

En la sección UBICACIÓN:

Posición: elige dónde se ancla el pop-up en la página usando la cuadrícula de 3×3.
Desplazamiento del borde: establece la distancia en píxeles desde el borde seleccionado.

En la sección SUPERPOSICIÓN:

Atenuar la página de fondo: actívalo para oscurecer el resto de la página mientras se muestra el pop-up, en ambos esquemas. Desactivarlo elimina la atenuación por completo, incluyendo cualquier valor de esquema oscuro establecido a continuación.
Color, Opacidad: establece el color y la opacidad de la superposición de 0 a 1.

Con el tema oscuro habilitado, Color y Opacidad también siguen el interruptor de esquema sol/luna: establece el interruptor en Oscuro para darle a la atenuación su propio color y fuerza para la paleta oscura. Hasta que los edites allí, el esquema oscuro muestra el mismo Color y Opacidad que el esquema claro.

Oscuro
Claro

Editar texto

Haz clic en cualquier bloque de texto en el pop-up para editarlo en línea. Aparecerá una barra de herramientas sobre él:

Aplica formato de negrita, cursiva o subrayado.
Agrega o elimina un enlace.
Establece la alineación a la izquierda, al centro o a la derecha.
Elige un estilo de texto: Icono, Encabezado secundario, Encabezado 1–3, Cuerpo o Leyenda.

Editar botones

Haz clic en un botón para abrir su barra de herramientas:

Elige el estilo del botón: Primario o Secundario.
Elige qué hace el botón:
- Abrir un enlace: introduce la URL de destino.
- Cerrar el pop-up.
- Ir a la página: elige otra página del pop-up a la que cambiar. Esta opción aparece una vez que el pop-up tiene más de una página. Consulta Trabajar con varias páginas.

Agregar un formulario de suscripción

Agrega un bloque de Formulario de suscripción para recopilar suscripciones por correo electrónico y otros campos directamente en el pop-up. Aprende más sobre los formularios de suscripción.

Agregar el bloque

Selecciona un bloque de texto, botón u otro elemento en el lienzo.
Haz clic en Agregar en su barra de herramientas.
Elige Formulario de suscripción. El bloque aparece de inmediato con un campo de Correo electrónico y un botón de Suscribirse predeterminados.

Elegir una fuente de formulario

Haz clic en el bloque del formulario de suscripción para abrir la barra de herramientas FORMULARIO. Su primer menú desplegable vincula el bloque a un formulario de suscripción en tu proyecto. Puedes crear un nuevo formulario o elegir uno que ya exista:

Opción	Cuándo usar
Nuevo formulario — creado al guardar (predeterminado)	Inicio más rápido: Pushwoosh crea el formulario por ti cuando guardas el pop-up, con el nombre “nombre del pop-up — pop-up web”.
+ Crear nuevo formulario…	Quieres nombrar el formulario y configurarlo antes de guardar el pop-up. Abre un diálogo de Nuevo formulario de suscripción — introduce un Nombre, luego configura sus Campos, el texto de Enviar y la Privacidad de la misma manera que se indica a continuación, y haz clic en Crear.
Un formulario existente del menú desplegable	Reutiliza un formulario que ya tiene suscriptores o doble opt-in configurado.

Establecer campos y comportamiento de envío

Establece el Estilo del botón de envío en la barra de herramientas FORMULARIO:
- Primario: botón relleno con el color de Acento del pop-up. Es mejor cuando Suscribirse es la acción principal en la página.
- Secundario: botón con contorno, borde y etiqueta de color de acento. Es mejor cuando el pop-up ya tiene un botón primario o si quieres un aspecto más ligero.
Activa Privacidad para agregar una línea de consentimiento de privacidad debajo del formulario, luego introduce la URL de tu política de privacidad en el campo que aparece.

Haz clic en Campos… para abrir una ventana emergente donde puedes mantener Correo electrónico (siempre requerido) y agregar Nombre, Apellido, Teléfono o Personalizado, y establecer los textos de Éxito y Confirmar correo electrónico que se muestran después de que un visitante envía.

Agregar una cuenta regresiva

Agrega un bloque de Cuenta regresiva para crear urgencia con una fecha límite que avanza en tiempo real en el pop-up.

Selecciona un bloque de texto, botón u otro elemento en el lienzo.
Haz clic en Agregar en su barra de herramientas y elige Cuenta regresiva.
Haz clic en la cuenta regresiva para abrir su barra de herramientas:
- Fecha límite: la fecha y hora en que la cuenta regresiva llega a cero.
- Zona horaria: la zona en la que se lee la fecha límite. Déjalo vacío para UTC.
- Idioma: el idioma de las etiquetas de las unidades (días, horas, etc.). Déjalo en Inglés (predeterminado) o elige entre otros 13 idiomas.
- Etiquetas: actívalo para mostrar las etiquetas de las unidades junto a los números.
- Cuando pasa la fecha límite:
  - Mostrar ceros: la cuenta regresiva sigue mostrando 00:00:00.
  - No mostrar el pop-up: todo el pop-up se omite una vez que la fecha límite ha pasado.
  - Ir a la página: salta a otra página del pop-up cuando pase la fecha límite. Solo se ofrece una vez que el pop-up tiene más de una página — elige la página de destino en el menú desplegable que aparece. Consulta Trabajar con varias páginas.

Agregar un icono

Agrega un bloque de Icono para colocar un pequeño pictograma — un signo de porcentaje para una oferta, un regalo para un lanzamiento — junto a tu texto.

Selecciona un elemento, haz clic en Agregar y elige Icono.
Haz clic en el icono para abrir su barra de herramientas:
- Icono: elige de un conjunto fijo de 20 iconos (campana, regalo, carrito, gráfico, candado, calendario, marca de verificación, estrella, reloj, etiqueta, correo, teléfono, descarga, reproducir, escudo, chispa, porcentaje, camión, boleto, usuario). No se admiten cargas de iconos personalizados.
- Tamaño: 24, 32 o 48 px.
- Acento: activado por defecto, para que el icono coincida con el color de acento del pop-up. Desactívalo para elegir un color personalizado.

Agregar un selector de temas

Agrega un bloque Selector de temas para permitir que los visitantes seleccionen sus intereses como casillas de verificación o chips. Sus selecciones se escriben en una etiqueta (tag) en su dispositivo.

Agregar el bloque y vincular una etiqueta

Selecciona un elemento, haz clic en Agregar y elige Selector de temas. Aparece con dos opciones de marcador de posición y sin ninguna etiqueta vinculada — no escribirá nada hasta que elijas una.
Haz clic en el bloque para abrir su barra de herramientas. El primer menú desplegable lo vincula a una etiqueta de tipo Lista en tu proyecto — elige una existente o selecciona Crear una etiqueta de lista para crear una sin salir del editor.

Establecer las opciones y los límites

Aún en la barra de herramientas:

Control: muestra las opciones como Casillas de verificación o Chips.
Selecciones mínimas / máximas: cuántas opciones un visitante debe o puede seleccionar. 0 en cualquiera de los extremos significa que no hay límite allí — aunque siempre se requiere al menos una selección para enviar, incluso con Mínimo en 0. Seleccionar más del máximo, o intentar enviar por debajo del mínimo, muestra un mensaje en línea junto al bloque en lugar de enviar algo.
Haz clic en Opciones para abrir el panel de opciones:
- Edita la Etiqueta de cada opción (lo que lee el visitante) y el Valor de la etiqueta (lo que se escribe en la etiqueta). Deja el Valor de la etiqueta vacío y Pushwoosh escribirá el ID interno de la opción en su lugar (option-1, option-2, etc.) — complétalo si necesitas un valor legible en la etiqueta.
- + Opción agrega otra fila, hasta un total de 12 opciones.
- Establece la Etiqueta del botón y el Mensaje después de enviar.

Agregar una calificación

Agrega un bloque de Calificación para recopilar una puntuación rápida — NPS, estrellas o pulgares — como un evento personalizado.

Agregar el bloque y establecer el evento

Selecciona un elemento, haz clic en Agregar y elige Calificación. Aparece sin ningún evento establecido — no enviará nada hasta que elijas uno.
Haz clic en el bloque para abrir su barra de herramientas y elige un Evento de los eventos existentes de tu proyecto, o elige Crear un evento para definir uno nuevo sin salir del pop-up — Pushwoosh lo configura con los atributos score, scale y slotKey que envía el bloque. La puntuación se publica en Pushwoosh como ese evento — úsalo en segmentos o Customer Journeys de la misma manera que cualquier otro evento.

Si un evento vinculado al bloque se renombra o elimina más tarde en otro lugar — o se escribió en este campo antes de que se convirtiera en un selector — el selector lo muestra como Falta: <nombre del evento> en lugar de eliminarlo o cambiarlo silenciosamente. Elige un evento diferente para corregir la vinculación.

Configurar la escala

Aún en la barra de herramientas:

Escala: NPS 0–10, Estrellas (1 a 5) o Pulgares (arriba o abajo).

Cuándo se envía la puntuación: Al tocar envía la puntuación en el momento en que un visitante elige un valor. Con un botón espera a que también hagan clic en un botón de envío — establece su etiqueta una vez que esto esté seleccionado.
Etiquetas opcionales en los dos extremos de la escala, y el Mensaje después de enviar.

Trabajar con varias páginas

Un pop-up web puede tener más de una página, por ejemplo, para guiar a los visitantes a través de una breve oferta de varios pasos.

Agregar una página

Haz clic en + Agregar página para abrir el menú de agregar página:

Duplicar página actual: copia la página activa, incluyendo cualquier edición que hayas hecho, como una nueva página. Si la página de origen tiene un formulario de suscripción, la copia se crea sin él — un pop-up solo puede tener uno.
Elige uno de los diseños de una sola página para agregar una página nueva con el contenido de demostración de ese diseño. La nueva página es independiente de las demás, por lo que puede usar un diseño diferente. Modal + formulario de suscripción es uno de estos diseños — ya viene con un bloque de formulario de suscripción en su lugar.

Cada pestaña es una página. Haz clic en una pestaña para cambiar a ella.

Establecer la página de inicio

La pestaña marcada con ★ es la página de inicio, la página que los visitantes ven primero. Para cambiarla, abre otra pestaña y haz clic en ☆ en esa pestaña.

Eliminar una página

En la pestaña activa, haz clic en ✕. Se abre un diálogo de confirmación. Haz clic en Eliminar para quitar la página. Esto no se puede deshacer.

Guardar el contenido

Revisa el contenido, las imágenes y el video, y las acciones de los botones. Cuando hayas terminado, haz clic en Guardar en la barra superior.

Usar el contenido en una campaña

Después de guardar, el contenido aparece en Contenido → Contenido de pop-up web. Ábrelo desde la lista para seguir editando.

Para mostrarlo en el sitio, ve a Campañas → Pop-ups web, crea o edita una campaña y elige este contenido en el paso Contenido.

Luego configura la audiencia, los ajustes de visualización, la frecuencia y las opciones de lanzamiento. Para el flujo completo, consulta Crear campañas de pop-up web.