Guía de construcción

En este artículo aprenderás a:

• Agregar tooltips a los menús desplegables
• Agregar tooltips a los diálogos
• Añadir pasos de navegación

En el GIF a continuación verás el resultado final de esta Guía de compilación.

Paso 1. Crea tu primer paso

Abre el Appcues Builder y empieza añadiendo el primer paso. Podemos empezar con un paso deslizable para saludar al usuario e iniciar el recorrido. Añade el texto que prefieras y un botón con la opción "Siguiente".

Paso 2. Agregar una tooltip

Ahora, añadiremos la primera tooltip de este flujo. Para guiar al usuario al menú desplegable que aparece tras hacer clic en el icono de puntos suspensivos, colocaremos una tooltip que apunte al icono. Añada el texto necesario para guiar al usuario. No añadiremos un botón, ya que se trata de una tooltip emergente basada en acciones . Esto significa que el flujo avanzará al siguiente paso cuando el usuario interactúe con el elemento al que apunta la tooltip , en lugar de hacer clic en "Siguiente".

Paso 3. Interactúe con el menú desplegable para colocar otra tooltip

Ahora, necesitaremos interactuar con el menú desplegable para abrirlo y colocar la tooltip dentro. Para ello, agregue otra tooltip y pase el cursor sobre el icono de puntos suspensivos. Mantenga presionada la tecla Mayús . Verá que, al hacerlo, podrá interactuar con el menú desplegable para abrirlo. Una vez abierto, suelte la tecla Mayús y coloque la tooltip donde desee.

Añade el texto o contenido que quieras. Es posible que, al hacerlo, la tooltip aparezca en algún lugar de la pantalla (como en el GIF de abajo). No te preocupes si esto ocurre, ya que al cerrar el menú desplegable, la tooltip no tiene el elemento visible para permanecer en su lugar. Mientras el selector CSS sea válido , aparecerá en el lugar correcto al previsualizar o probar el flujo . Recuerda que no añadiremos un botón a la tooltip , ya que el flujo avanzará interactuando con la página.

Paso 4. Abra un cuadro de diálogo para colocar una tooltip

Para acceder al cuadro de diálogo, primero debemos interactuar con la página. Comience añadiendo otra tooltip y repita el mismo proceso que en el paso anterior: coloque el cursor sobre el icono de puntos suspensivos, mantenga presionada la tecla Mayús, haga clic en el menú desplegable para abrirlo, suelte la tecla Mayús y vuelva a mantenerla presionada para abrir el cuadro de diálogo.

Una vez abierto el cuadro de diálogo, coloque la tooltip donde desea que el usuario complete la acción. Nuevamente, no usaremos ningún botón en esta tooltip ya que el usuario hará clic en "Listo" para cerrar el cuadro de diálogo.

Paso 5. Navegar a otra página (parte 1)

Añade otra tooltip que invite al usuario a navegar a otra página. En este caso, añadimos una tooltip que apunta al tema que queremos visitar. Al colocar la tooltip , observa los diferentes elementos Appcues selecciona; asegúrate de seleccionar un elemento amplio para que cualquier clic en todo el contenedor sea válido y puedas avanzar al siguiente paso. Si seleccionas solo un elemento pequeño, el flujo solo continuará si haces clic en la misma región.

Paso 6. Navegar a otra página (parte 2)

Dado que esta acción implica un cambio de página, necesitaremos adaptarlo añadiendo un paso de navegación. Después de colocar la tooltip , haga clic para añadir un paso de navegación. A continuación, interactúe con la página para ir a la siguiente. Una vez allí, haga clic para volver al modo de creación, como se muestra en el GIF a continuación.

Paso 6. Ajuste la configuración de los pasos de navegación

Después de navegar a la nueva página, podrá editar la configuración de navegación . En este ejemplo, cambiaremos la navegación a un paso "Permítales navegar" ; esto se debe a que los usuarios navegan por sí mismos interactuando con la página en lugar de hacer clic en el botón "Siguiente" que los lleva a la nueva página.

Dado que esta página es dinámica, necesitamos agregar un comodín (*) para garantizar que coincida con cualquier página que el usuario final vea. Mantenga la URL de compilación con el ID en la URL, ya que esto permite abrir y editar el flujo en el builder .

Paso 7. Concluye y publica tu Flujo

Añade el paso final del flujo. Puedes personalizarlo como quieras. Cuando estés satisfecho con el flujo, puedes publicarlo para los usuarios adecuados .

Si tienes problemas con tu flujo, comunícate con support@appcues.com. ¡Estaremos encantados de ayudarte!