Agregar información sobre herramientas/puntos de acceso en el generador

Una vez que hayas abierto el Generador para crear un flujo, selecciona el botón verde ' + Agregar ' > ' Grupo Información sobre herramientas/Puntos de acceso ' y elige una plantilla o comienza desde cero.

Cuando esté listo para colocar la información sobre herramientas o el punto de acceso en un elemento, solo tiene que pasar el cursor sobre él y soltarlo donde desee que aparezca. El área del elemento se resaltará en verde para que sepa a qué parte se adjuntará.

Alineación

Al colocar una información sobre herramientas o un punto de acceso, la alineación se establece automáticamente. Sin embargo, puede cambiarla eligiendo un punto diferente desde el que se mostrará.

Ajuste fino de la posición

Habrá situaciones en las que necesite ajustar la posición de su información sobre herramientas o punto de acceso. Para ello, vaya a la pestaña "Ubicación". Aquí puede moverla vertical y horizontalmente definiendo un porcentaje (%). Introduzca valores positivos o negativos hasta obtener la posición deseada.

Índice Z

A veces, nuestro valor de índice z entra en conflicto con los elementos existentes en tu página, por lo que podrías tener que ajustar ligeramente el índice z Appcues para que la página se vea correctamente. Puedes leer más sobre esto en nuestro artículo "Cómo se superpone Appcues .

Elemento objetivo

Al colocar inicialmente una descripción emergente o un punto de interés en nuestro Constructor, capturamos un selector CSS para el elemento que intentas anotar. Puedes pensar en los selectores CSS como instrucciones repetibles que indican dónde deben ir las marcas de puntos de interés o descripciones emergentes en la página. Habrá situaciones en las que necesites ajustarlas manualmente. Para ello, ve a la pestaña "Ubicación" y luego a la pestaña "Manual".

Aquí podrás definir con más detalle el selector CSS para el elemento que estás resaltando.

En la parte superior, puedes crear tu propio selector utilizando las opciones disponibles en las casillas de verificación o pin manualmente tu selector CSS personalizado.

En la parte inferior, podrás añadir filtros adicionales para restringir los resultados al intentar encontrarlo en la página. Puedes añadir un filtro "Por orden" si tienes varios objetos con el mismo encabezado CSS o un filtro "Por texto".

Colocar en elementos dinámicos (menús desplegables, cuadros de diálogo, etc.)

Habrá casos en los que querrás adjuntar una tooltip o hotspot a un elemento que solo aparecerá después de que el usuario pase el cursor sobre él o haga clic en él, como un menú desplegable.

Si esta acción no cambia la URL, puedes anclar una información sobre herramientas o un punto de acceso sin necesidad de un paso de navegación.

Para hacer esto, mantenga presionada la tecla MAYÚS de su teclado > interactúe con su página para mostrar el elemento > suelte la tecla MAYÚS y > adjunte la tooltip normalmente.

El siguiente vídeo le muestra cómo hacer esto en el Builder.

También tenemos una guía paso a paso que le muestra cómo hacer esto en un flujo con múltiples pasos y navegación: Use información sobre herramientas en menús desplegables y cuadros de diálogo .

NOTA : Al editar un paso de tooltip o hotspot donde el elemento objetivo no está visible, se espera que el paso en el Constructor muestre un símbolo de precaución triangular (!), así como un banner . ¡No se preocupe! Esto es normal, ya que el elemento no está visible en ese momento. El mensaje desaparecerá si el elemento objetivo/dinámico vuelve a estar visible y el flujo también se mostrará correctamente si se visualiza en tiempo real.

Comportamiento de desplazamiento

Los flujos de información sobre herramientas y puntos de acceso se desplazarán automáticamente al siguiente paso si se encuentran fuera de la pantalla. Esto significa que, si el elemento de destino está visible en la pantalla, el flujo no se desplazará automáticamente. Si desea que su flujo se desplace automáticamente, asegúrese de colocar la información sobre herramientas o el punto de acceso lo más abajo posible para forzar este comportamiento.

Información adicional

Si desea colocar información sobre herramientas o puntos de acceso en iFrames, consulte "Usar Appcues con iFrames" para obtener más información. Además, los elementos dentro de SVG no son compatibles actualmente, por lo que no sería posible adjuntar los patrones a ese tipo de elementos.