Pasos de la ventana emergentes: Guía de introducción
Breve descripción general
Los pasos de las ventanas emergentes son pasos de globo que no están vinculados a ningún elemento específico. Se pueden utilizar para proporcionar información general u orientación, sin vincular el mensaje a ningún elemento de página.
Las ventanas emergentes se utilizan para atraer la atención de los usuarios sobre el texto destacado. A diferencia de los globos de pasos normales, las ventanas emergentes no están vinculadas a un elemento, sino que aparecen en el centro de la página. Las ventanas emergentes se pueden colocar en cualquier lugar de un Smart Walk-Thru.
Casos de uso
Las ventanas emergentes se utilizan comúnmente para mejorar la experiencia del usuario al comunicar un mensaje sobre tu sitio o el proceso que está completando el usuario. Las ventanas emergentes también se pueden utilizar con fines promocionales.
Los ejemplos comunes de cómo utilizar las ventanas emergentes incluyen:
- Mostrar un mensaje de éxito al final de un proceso
- Colocar un mensaje de bienvenida al comienzo de un Smart Walk-Thru de reproducción automática cuando los usuarios lleguen a tu sitio
Cómo funciona
Las ventanas emergentes se pueden crear en el Smart Walk-Thru mientras se crea inicialmente o añadiendo más tarde. La ventana emergente se mostrará al usuario en el centro de la pantalla, sin estar vinculada a ningún elemento.
Las ventanas emergentes se pueden utilizar en cualquier lugar de la ruta principal o una rama del Smart Walk-Thru.
Crea un paso de la ventana emergente
- Abre el Smart Walk-Thru donde añadirás el paso de la ventana emergente.
- Pasa el cursor entre los dos pasos donde deseas añadir el paso de la ventana emergente
- Haz clic en el signo más naranja
- Selecciona Ventana emergente.
- En la pestaña Interacción, diseña el globo con un título y texto del cuerpo utilizando las herramientas de edición.
- Utiliza la rejilla para determinar dónde aparecerá el paso de la ventana emergente en la pantalla
- Activa la opción Spotlight si deseas añadir una superposición de pantalla.
-
Añade desencadenadores de pasos personalizados para el paso de la ventana emergente.
- El paso de la ventana emergente se mostrará en el flujo de Smart Walk-Thru.
Pestaña de interacción
En la pestaña Interacción, configura lo siguiente:
Editar diseño de ventana emergente
- Texto: haz clic en la burbuja para añadir el encabezado y el texto del cuerpo de la ventana emergente
- Menú de opciones:
- Editor de texto enriquecido: accede al editor de texto enriquecido para cambiar el tamaño del texto, el estilo y el color, añadir texto dinámico o insertar un video.
- Cambiar diseño: añade un diseño existente de la Galería de diseño
- Editar CSS: personaliza el diseño del globo con CSS personalizado
Configuración visual
- Mostrar X en el globo: muestra una X para que los usuarios cierren el globo; se recomienda no eliminarlo.
- Mostrar botones:
- Siguiente/Listo: se muestra Siguiente si hay un paso después de la ventana emergente o Terminar si es el último paso
- Inicio: se muestra si el primer paso en un Smart Walk-Thru
- Atrás: vuelve al paso anterior, pero solo se muestra si el paso anterior tenía un desencadenante de Siguiente
- Cancelar: finaliza el Smart Walk-Thru
- Desencadenadores de pasos: añade un desencadenador personalizado para el paso de la ventana emergente; no está disponible cuando se activa Visualización durante la automatización
- Mostrar durante la automatización: muestra el paso de la ventana emergente de forma continua mientras se está ejecutando una automatización.
- Activar Spotlight: cuando se activa la opción, se muestra una superposición de pantalla y el usuario no podrá interactuar con otros elementos de la página.
- Posición: cambia la ubicación de la ventana emergente en la pantalla
Visualización durante la automatización
Para evitar que los usuarios interrumpan un proceso de automatización al reproducir Pasos de flujo, incluidos Pasos automáticos y Espera de pasos, después de la ventana emergente, activa Visualización durante la automatización.
Activar Visualización durante la automatización permitirá que la ventana emergente permanezca en pantalla durante la automatización y notificará a los usuarios que se está llevando a cabo una automatización. Esto evita que los usuarios interrumpan la automatización haciendo clic en la pantalla y deteniendo el Smart Walk-Thru.
Esto es útil en situaciones en las que los usuarios no son conscientes de que se está produciendo una automatización y no se les informa, incluso puede parecer que su computadora se está controlando de forma remota.
La ventana emergente dejará de mostrarse una vez que termine la automatización.
Por ejemplo, una vez que el Smart Walk-Thru haya alcanzado el último paso o si es seguido de un paso normal u otra ventana emergente.
También puedes activar Cerrar después de reproducir para que se cierre después de reproducir un paso específico del flujo. Deberás seleccionar el paso del flujo en las opciones del menú desplegable.
Pestaña Apariencia
Puedes ajustar los siguientes ajustes en la pestaña Apariencia:
- Organizar el orden de capas (z-index)
- Opciones de temporización
Pestaña Notas
Añade notas del generador para una mejor colaboración con los miembros del equipo.
Notas técnicas
- No se admiten superposiciones consecutivas con diferentes colores u opacidad.
Videos de consejos del martes
Cómo crear una ventana emergente con elementos de acción clicables
Cómo crear una tabla en una ventana emergente
Añadir flechas CSS en los pasos de la ventana emergente