Cómo crear un Pin

1. Puedes ir a una página de tu aplicación donde quieras crear tu Pin y abrir la extensión de Chrome a través de su ícono.

2. Puedes ir a la página Pins en Appcues y hacer clic en "Crear un Pin".

Con la primera opción, el Constructor te preguntará qué quieres crear. Selecciona "Añadir un pin" y luego "Crear nuevo".

Una vez que seleccione Crear nuevo, haga clic en '+ Agregar' y elija Ícono con información sobre herramientas o Botón .

Icono con información sobre herramientas

Los pines de ícono con información sobre herramientas abren una tooltip cuando un usuario interactúa con el ícono.

Si selecciona Ícono con información sobre herramientas, podrá elegir un ícono para su Pin o cargar su propio ícono SVG.

Coloque el pin

Tras realizar una selección, accederás al modo de segmentación y podrás colocar el pin en cualquier lugar de la página. Los pines funcionan anclados a un elemento de la página.

Agregar contenido

Una vez que coloques el ícono con pin de información sobre herramientas, puedes empezar a añadir contenido. Selecciona cualquier punto del contorno verde para añadir bloques de contenido a tu tooltip .

Los bloques de contenido son lo que introduces en cada paso y te permiten personalizar el contenido. Agrega una imagen, texto , botones , emojis o incluso HTML personalizado a tus pines. Para obtener más información sobre cada una de estas opciones de bloques de contenido, haz clic en el hipervínculo para acceder al artículo de ayuda correspondiente.

Estilo

De forma predeterminada, el estilo aplicado a tu Pin se hereda del tema seleccionado. Puedes configurar tu fuente personalizada aquí si quieres usar una.

Tanto la información sobre herramientas como el ícono se pueden diseñar en la sección Zona activa e información sobre herramientas resaltada a continuación.

Información sobre herramientas

Actualmente, la tooltip que se expande desde el ícono solo se puede personalizar en tu tema. Aquí puedes configurar el color de fondo, el color de la tooltip , el radio del borde y la sombra.

Icono

De forma predeterminada, el icono se aplicará con el color establecido en su tema.

Para personalizar aún más el ícono, haz clic en él y aparecerán varias opciones. Puedes elegir un ícono diferente para tu Pin, cambiar su color, ajustar su tamaño o reposicionarlo.

Comportamiento y posición

Puedes personalizar el comportamiento y la posición del icono con información sobre herramientas. Estas opciones están disponibles en el menú lateral.

Comportamiento

Le permite elegir cómo se abrirá el pin .

• Al pasar el cursor: el pin se abrirá cuando un usuario pase el cursor sobre el ícono
• Al hacer clic: El pin se abrirá al hacer clic en el icono. También puedes configurar una opción para cerrarlo, con una X o un enlace para cerrarlo. En cualquier caso, al hacer clic fuera del pin, también se cerrará.
• En cualquier caso, el pin se cerrará al hacer clic en cualquier lugar fuera de la tooltip . Al pasar el cursor por encima, el pin también se cerrará si lo alejas lo suficiente de la tooltip

Posición del puntero

Le permite establecer si el puntero de la tooltip se ajusta automáticamente en función del tamaño de la pantalla o si desea establecer una posición fija manualmente.

Pin de botón

Los pines de botón activan flujos inmediatamente o se vinculan a otras URL.

Si selecciona Botón, podrá elegir entre su estilo de botón principal, un botón con contorno codificado, así como simplemente colocar un botón que parezca un enlace o incluso cargar su propio ícono SVG.

Coloque el botón

Tras realizar una selección, accederás al modo de segmentación y podrás colocar el pin en cualquier lugar de la página. Los pines funcionan anclados a un elemento de la página.

Estilo

De forma predeterminada, el estilo aplicado a tu pin de botón se hereda del tema seleccionado. Puedes configurar tu fuente personalizada aquí si deseas usar una.

El estilo adicional se configura en la pestaña Botones. Aquí puedes definir el estilo de tus botones principal y secundario.

También puedes configurar el estilo directamente en el Constructor para sobrescribir tu tema. Haz clic en el botón para abrir el minibar y personalizarlo, así como para ajustar el texto del botón.

Los pines de botón que usan un ícono SVG subido tendrán un minibar más limitado para la personalización. Si es necesario, puede aumentar el tamaño del ícono SVG por encima del límite de visualización de 100. Para ello, escriba el valor directamente.

Acciones de botón

pins de los botones se pueden configurar para dos acciones diferentes:

• Ir a la URL
• Flujo de activación

Ir a la URL

Dirigir a los usuarios a URLs regulares o dinámicas. Si desea dirigir a los usuarios a URLs dinámicas, puede añadir el atributo de perfil a la URL. Puede obtener más información sobre esta acción de botón en nuestro artículo de ayuda "Botones" .

Flujo de activación

Inicia un flujo en la misma URL o en otra. Si quieres dirigir a los usuarios a URL dinámicas, puedes añadir el atributo de perfil a la URL. Puedes leer más sobre esta acción de botón en nuestro artículo de ayuda "Botones" .

Posición del pin/botón

Esto le permite establecer la posición del Pin y del Botón.

• Incrustar: controla cómo se colocará el Pin en su sitio
  • En línea a la derecha: los pines se insertarán dentro de la interfaz de usuario de su sitio web y desplazarán el elemento de destino a la derecha.
  • En línea a la izquierda: los pines se insertarán dentro de la interfaz de usuario de su sitio web y desplazarán el elemento de destino a la izquierda.
  • Superpuesto: los pines se mostrarán en la parte superior del elemento de destino.

Normalmente, el posicionamiento en línea libera espacio para el icono/botón y expande el elemento seleccionado. Si se permite la superposición de contenido, se elimina el espacio y el icono/botón se coloca encima del elemento seleccionado. Permitir la superposición de contenido es ideal cuando se desea colocar un pin en un botón sin expandirlo. Esta opción solo está disponible para la incrustación en línea derecha/izquierda.

Dependiendo del elemento al que ancle el pin , Appcues intentará elegir la mejor opción predeterminada para este interruptor. Si el pin no se coloca donde esperaba, considere activarlo o desactivarlo según sea necesario.

Ajuste fino de la posición

Habrá situaciones en las que necesite ajustar la posición de su ícono. Muévalo vertical y horizontalmente definiendo un porcentaje (%) o un píxel (Px). Ingrese 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 un Pin 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 tu Pin en la página. Habrá situaciones en las que necesites ajustarlos manualmente. Para ello, haz clic en "Refinar selección". Aquí podrás definir con más detalle el selector CSS para el elemento que estás resaltando.

• Puede crear su propio selector utilizando las opciones disponibles en las casillas de verificación o pin manualmente su selector CSS personalizado.
• También puedes añadir filtros adicionales para restringir los resultados al intentar encontrarlos 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".