Contenido de popup web

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

Ve a Contenido → Contenido de popup web.
Haz clic en Crear contenido de popup 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 simples, 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 popup en el editor.

Haz clic en el nombre del popup 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.

Ajusta la apariencia y la posición del popup 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 Media store de tu proyecto, o establece Media en Video para reproducir un video en lugar de una imagen estática.

Debajo de la vista previa:

Media: 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%.

Establecer Media 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 Media store. 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 ven 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 ajustar 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 popup 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 popup, 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.

En la sección Popup:

Ancho, Alto (vacío = automático): deja ambos vacíos para un popup que se ajusta a su contenido, o establece un tamaño fijo en píxeles. En un popup 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 popup.
Animación: cómo aparece el popup: Ninguna, Desvanecer o Deslizar.

Colores

Haz clic en Colores para expandir la paleta de colores del popup:

Fondo, Acento (botones): el fondo del popup 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 subtítulos.
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 el Modo oscuro para darle al popup una segunda paleta para los visitantes cuyo dispositivo está configurado con un esquema de color oscuro. Si está desactivado, el popup siempre se renderiza con la paleta clara de arriba, para cada visitante.

Una vez que el Modo oscuro está activado:

Usa el interruptor Claro / Oscuro 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 popup 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 vuelven oscuras y el texto se vuelve claro, mientras que Acento y Texto sobre imagen se mantienen sin cambios. Edita cualquiera de los cinco campos después para ajustar el resultado.
Desactivar el Modo oscuro no descarta la paleta oscura — se mantiene, por lo que al volver a activarlo se restauran tus ediciones en lugar de regenerar desde cero.

El navegador de un visitante decide qué paleta ve, basándose en la configuración de modo oscuro a nivel de sistema operativo — no hay un interruptor de claro/oscuro en el propio popup. 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 popup 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 detrás: actívalo para oscurecer el resto de la página mientras se muestra el popup.
Color, Opacidad: establece el color y la opacidad de la superposición de 0 a 1.

Editar texto

Haz clic en cualquier bloque de texto en el popup 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, Subtítulo, 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 popup.
- Ir a la página: elige otra página del popup a la que cambiar. Esta opción aparece una vez que el popup tiene más de una página. Consulta Trabajar con varias páginas.

Añadir un formulario de suscripción

Añade un bloque de Formulario de suscripción para recopilar suscripciones por correo electrónico y otros campos directamente en el popup. Aprende más sobre los formularios de suscripción.

Añadir el bloque

Selecciona un bloque de texto, un botón u otro elemento en el lienzo.
Haz clic en Añadir 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 popup, llamado “nombre del popup — popup web”.
+ Crear nuevo formulario…	Quieres nombrar el formulario y configurarlo antes de guardar el popup. Abre un diálogo de Nuevo formulario de suscripción — introduce un Nombre, luego establece sus Campos, texto de Enviar y Privacidad de la misma manera que 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 popup. Es mejor cuando Suscribirse es la acción principal en la página.
- Secundario: botón con contorno, un borde y una etiqueta del color de acento. Es mejor cuando el popup 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 un popover 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 el formulario.

Añadir una cuenta regresiva

Añade un bloque de Cuenta regresiva para crear urgencia con una fecha límite que avanza en tiempo real en el popup.

Selecciona un bloque de texto, un botón u otro elemento en el lienzo.
Haz clic en Añadir 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 popup: se omite todo el popup una vez que la fecha límite ha pasado.
  - Ir a la página: salta a otra página del popup cuando pasa la fecha límite. Solo se ofrece una vez que el popup tiene más de una página — elige la página de destino del menú desplegable que aparece. Consulta Trabajar con varias páginas.

Añadir un icono

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

Selecciona un elemento, haz clic en Añadir 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 admite la carga 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 popup. Desactívalo para elegir un color personalizado.

Añadir un selector de temas

Añade un bloque de 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.

Añadir el bloque y vincular una etiqueta

Selecciona un elemento, haz clic en Añadir y elige Selector de temas. Llega 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.
Mínimo / Máximo de selecciones: 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 el 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 nada.
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 añade otra fila, hasta un total de 12 opciones.
- Establece la Etiqueta del botón y el Mensaje después de enviar.

Añadir una calificación

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

Añadir el bloque y establecer el evento

Selecciona un elemento, haz clic en Añadir y elige Calificación. Llega 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 popup — 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 se seleccione esto.
Etiquetas opcionales en los dos extremos de la escala, y el Mensaje después de enviar.

Trabajar con varias páginas

Un popup 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.

Añadir una página

Haz clic en + Añadir página para abrir el menú de añadir 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 popup solo puede tener uno.
Elige uno de los diseños de una sola página para añadir 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 abrirá 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 popup web. Ábrelo desde la lista para seguir editando.

Para mostrarlo en el sitio, ve a Campañas → Popups 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 popups web.