Personalización de SmartTips

En esta sección veremos cómo personalizar el diseño de un SmartTip.

En el editor, abra un SmartTip existente.

Haga clic en Editar diseño para abrir todas las opciones disponibles para SmartTip.

Verá 3 cuadros de color después de hacer clic en Editar diseño. Se refieren al cuadro de mensaje que aparece cuando el usuario pasa el ratón por encima del icono.

Texto: cambia el color de la fuente del texto. El valor por defecto está fijado en negro.

Fondo: cambia el color detrás del texto. El valor por defecto se establece en blanco como se ve en la imagen.

Borde: Los cambios se recortan alrededor del cuadro de mensaje. Predeterminado fijado en azul.

Verá cómo funcionan los cambios con el ejemplo GIF. Hemos utilizado el código hexadecimal ff5f42 para cambiar el color del borde.

Vea el video para saber más. Tenga en cuenta que el vídeo no admite audio.

A continuación, modificaremos el icono haciendo clic en Modificar icono.

Al editar el icono SmartTip, tiene dos secciones entre las que elegir:

Forma: le permite elegir imágenes que no sean "?", como un icono "i", "!" ícono, etc.

Color: Al seleccionar una forma, se le dará una selección de colores y tamaños

A los efectos de esta guía, realizaremos las siguientes modificaciones:

1. Dejar el estilo
2. En Colores, seleccione la opción de tamaño medio gris
3. Haga clic en Listo

Vea el video para saber más. Tenga en cuenta que el vídeo no admite audio.

Este es el resultado de los cambios que hicimos. Si bien estas personalizaciones son limitadas, a medida que avanza en sus habilidades de construcción hablaremos de más técnicas para que el SmartTip se vea y se sienta como parte del sitio.

De forma predeterminada, las condiciones de SmartTips Set se evalúan al cargar la página y solo se reproducirán en la pantalla de un usuario si el elemento al que está adjunto es visible. Esto se hace para optimizar el rendimiento y la experiencia del usuario evitando que WalkMe verifique constantemente un elemento en la pantalla.

Sin embargo, hay casos en los que un elemento no se carga al mismo tiempo que la página, o donde el elemento de la página puede desaparecer y luego reaparecer.

Si se adjunta un SmartTip a uno de estos tipos de elementos, es posible que deba activarse una o más de las siguientes configuraciones. Para cambiar estas funciones, veremos la pestaña Elemento seleccionado.

Existen tres opciones de comportamiento de elementos:

• Aparece en la carga de la página: Aparece en la carga de la página
• Aparece después de la carga de la página y luego permanece visible: Esta configuración mostrará SmartTip incluso si su elemento seleccionado desaparece de la página y vuelve a aparecer, como en un menú al pasar el ratón.
• Aparece y desaparece como resultado de la acción del usuario: WalkMe buscará constantemente el elemento. Esto funciona mejor para los menús emergentes*.

* Los menús emergentes, o modales, son ventanas que se muestran en la parte superior de la página principal y aparecen/desaparecen como resultado de la acción del usuario.

Algunos ejemplos podrían ser:

• Cuando visitemos un sitio y hagamos clic en la opción 'login', aparecerá una ventana para que introduzcamos nuestras credenciales.
• Cuando intentamos eliminar un archivo, una ventana puede aparecer pidiéndonos que confirmemos si queremos eliminarlo.

Sabe todo sobre la pestaña de comportamiento del elemento y sus opciones. SmartTips utiliza esta configuración a menudo, especialmente cuando se crea dentro de menús flotantes o módulos emergentes.

1. SmartTips se trata de orientación en pantalla, que proporciona a los usuarios información que pueden utilizar para comprender e interactuar mejor con una página web o aplicación.
2. Los dos tipos principales de SmartTips son Orientación y Validación.
3. Podemos personalizar el aspecto de los SmartTips, así como utilizar la configuración del comportamiento de los elementos para garantizar que se reproduzcan como se espera.