Los Tooltips ofrecen una experiencia contextual y no intrusiva para educar y atraer a los customers en tu producto, para que puedas impulsar una adopción más rápida. Son ideales para llamar la atención sobre nuevas funciones y mostrar tu otro contenido a los customers cuando lo buscan, como mostrar un Article de tu Help Center o iniciar un Product Tour.
Crear un Tooltip es rápido y fácil, y no requiere ningún código. Aquí te mostramos cómo empezar:
Diseña tus Tooltips
Primero, ve a Outbound desde el menú principal y haz clic en + Nuevo mensaje en la esquina superior derecha.
Luego, elige Tooltips como tu tipo de contenido.
También puedes elegir comenzar con una plantilla predefinida seleccionando este tipo de contenido en la barra lateral izquierda.
Nota:
Los Tooltips están diseñados específicamente para funcionar con aplicaciones web de escritorio y no son compatibles con aplicaciones móviles nativas. Para educar y atraer a los customers en tu aplicación móvil, Mobile Carousels.
Puedes agregar múltiples Tooltips a la vez agregándolos al mismo grupo.
Estos tendrán el mismo público objetivo, programación y objetivos aplicados. Es ideal para agrupar todos los Tooltips de incorporación para nuevos customers, o agrupar Tooltips educativos para apoyar una parte particularmente compleja de tu producto.
Puedes crear 100 Tooltips por grupo y 50 grupos en total.
Luego, da a tus Tooltips un título corto y llamativo. Por ejemplo, si anuncias una nueva función del producto, podrías llamarlo “Lanzamiento de función”:
Elige un sitio para agregar tus Tooltips
Para comenzar a diseñar un Tooltip, haz clic en “Agregar tooltips”:
Se abrirá una nueva ventana. Aquí, agrega el sitio web al que deseas agregar tus Tooltips:
Esta URL es solo para seleccionar el sitio web correcto, no es la URL de destino donde mostrarás tu Tooltip a los customers. Puedes elegir reglas de página y público en un paso posterior.
Una vez que hayas agregado una URL, haz clic en “Abrir sitio web”.
Elige dónde agregar tu Tooltip
Puedes navegar a otra página desde aquí si este Tooltip es para una página diferente.
Ahora haz clic en “Agregar tooltip” para comenzar a diseñar tu Tooltip en esta página:
Elige un elemento en la página donde deseas colocar tu Tooltip:
Agrega contenido a tu Tooltip
Puedes usar texto estilizado y agregar enlaces, imágenes, videos, código, listas con viñetas y numeradas.
Se admiten los siguientes formatos de imagen y video: PNG, JPG, JPEG, GIF y MP4.
También puedes usar Smart Links para buscar contenido que ya hayas creado en Intercom. Por ejemplo, podrías agregar un Smart Link a un Article en tu Help Center que ofrezca más información, o agregar un Product Tour que quieras iniciar desde este Tooltip:
Nota:
Los Smart Links solo encuentran contenido en vivo (publicado) que creaste en Intercom y no consideran las reglas de segmentación que hayas establecido en ese contenido.
El contenido activado por un Smart Link no se entregará al previsualizar un Tooltip en el editor.
Estiliza tu Tooltip
Icono - Selecciona esto si quieres que aparezca un icono junto a un elemento en la página.
Sin icono - Selecciona esto si deseas que el contenido aparezca de forma fluida cuando un customer pase el cursor sobre un elemento.
Etiqueta - Selecciona esto si deseas agregar una etiqueta junto a un elemento, como “Nuevo” o “Beta” para una función en tu producto. Ten en cuenta que hay un límite de 16 caracteres para las etiquetas.
Tipo de icono - Elige qué tipo de icono deseas mostrar, como un faro para llamar la atención sobre una nueva función.
Color del icono - Personaliza el color para que coincida con tu marca o destaque en la página.
Mostrar contenido en - Decide cuándo el Tooltip debe revelar el contenido, como cuando un customer pasa el cursor sobre él o hace clic en él.
Faro animado - Esto permitirá que el Tooltip parpadee lentamente hasta que un customer interactúe con él, y luego permanecerá estático.
Es posible establecer el color de fondo y el texto para todos los Tooltips que agregues aquí. Administra esto desde “Configuración de grupo”.
Elige el diseño adecuado para tu Tooltip
Usa estos controles para posicionar o mover tu Tooltip exactamente donde quieras. Puedes probar las siguientes opciones:
Superpuesto - Este Tooltip flotará sobre el elemento (como el Messenger).
Incrustado - Este Tooltip se renderizará en línea con tu HTML, por lo que puede ajustar el diseño de tu página.
Alinear a - Mueve el Tooltip para que esté en línea con el texto en un elemento, al lado del elemento o junto al elemento. También puedes ajustar si se sitúa a la izquierda, derecha, arriba, abajo o en el centro del elemento.
Desplazamiento - Obtén aún más precisión desplazando los píxeles que rellenan el Tooltip.
Configuración de colocación
Ahora haz clic en “Colocación” y decide si quieres que los Tooltips se muestren en todo el sitio (por ejemplo, en encabezados o pies de página) o en páginas específicas (por ejemplo, solo en las páginas que elijas).
Para controlar en qué página(s) aparecerán los Tooltips, selecciona “Páginas específicas” y haz clic en “+ Agregar nueva regla”:
Luego, define la URL de la página en la que deben aparecer tus Tooltips. Por defecto, esta será la URL del sitio web que seleccionaste al principio, pero puedes editar esta regla y elegir cualquier página de tu sitio:
Asegúrate de que la página que elijas tenga el elemento donde colocas el tooltip.
También puedes usar ‘contiene’ para ser más flexible, como apuntar a grupos de páginas o páginas que contienen parámetros únicos (como ID de usuario). Por ejemplo, podrías elegir apuntar a URLs de páginas que contengan ‘project’ para dirigirte a customers cuando trabajan en proyectos.
Agrega tantas reglas de URL de página como necesites para apuntar a las páginas correctas.
Es buena idea copiar y pegar la URL de tu app o sitio directamente, ya que esto capturará cualquier carácter oculto en la barra de direcciones de tu navegador, como barras diagonales finales.
Coincidencia de elementos
Aquí puedes cambiar el elemento donde se coloca tu Tooltip usando el Selector CSS, o si tienes un texto muy específico en tu página donde intentas colocar el Tooltip, intenta buscar “Por texto” para encontrar el elemento exacto que contiene ese texto.
Si coincides con un elemento “Por texto”, encontrará el primer elemento en la página que contenga ese término de texto.
Si tienes problemas para seleccionar el elemento correcto en tu página, intenta elegir manualmente el Selector CSS.
Cuando hayas terminado de finalizar la colocación de tus Tooltips, adelante y haz clic en “Listo”.
Ahora puedes agregar más Tooltips a este grupo que tendrán las mismas reglas y programación aplicadas.
Si quieres crear Tooltips con reglas y programación diferentes, necesitarás guardar este y luego diseñar un nuevo Tooltip.
Administrar frecuencia y colores de fondo:
Elige la frecuencia con la que estos Tooltips deben aparecer y establece colores de fondo consistentes en “Configuración de grupo”:
Frecuencia:
Elige si estos Tooltips deben seguir mostrando cada vez que cumplan las reglas de audiencia, o si deben mostrarse hasta que se interactúe con ellos y luego desaparecer. Esto es ideal para anuncios de funciones o para generar conciencia.
La frecuencia se aplica a todos los Tooltips que has agregado aquí y no se puede establecer para Tooltips individuales.
El compromiso con los Tooltips se rastrea mediante cookies del navegador y no por cuenta de usuario, por lo que si tus users realizan alguna de las siguientes acciones, volverán a ver los Tooltips con los que interactuaron anteriormente:
Usar un navegador o dispositivo diferente
Borrar su caché y cookies
Iniciar sesión a través de una ventana de incógnito
Colores de fondo:
También puedes establecer un color de fondo y texto HEX para todos los Tooltips que has agregado aquí. Esto es ideal para tooltips que necesitan coincidir con las directrices de diseño en tu producto.
Cuando hayas terminado de administrar la configuración del grupo, haz clic en “Guardar y cerrar”.
Editar grupos de Tooltip
Cuando editas un grupo de Tooltip, puedes ver en la barra de herramientas inferior:
Todos los Tooltips incluidos en el grupo.
Cómo se etiqueta el Tooltip, ya sea un Selector CSS o un Elemento de texto
Dónde se muestra el Tooltip, en todo el sitio o en una página específica
Si el Tooltip está en la página actual.
Si editas un Tooltip que no está en la página actual, verás el Tooltip flotar en el medio de la página con un banner de error.
Aquí hay un ejemplo de un grupo de Tooltip que muestra las diferentes configuraciones para los Tooltips individuales.
Pruébalo en un entorno en vivo
Recomendamos probar tus Tooltips de las siguientes maneras antes de activarlos para los customers:
1. Prueba como un usuario nuevo
Si has agregado Tooltips para nuevos users, deberías registrarte en tu producto desde cero y probar tu Tooltip como un usuario nuevo real. Esto asegurará que tu Tooltip funcione cuando tu producto esté completamente nuevo, sin datos existentes.
2. Prueba con todos tus diferentes permisos de producto
Si tu producto tiene diferentes niveles de permiso, es decir, básico, admin, super admin; deberías probar tu Tooltip como un user con cada uno de estos diferentes niveles de permiso. Esto asegurará que tu Tooltip funcione para cada tipo de user. También asegurará que tu Tooltip se haya agregado a páginas a las que cada user pueda acceder.
3. Prueba que tu Tooltip funcione con y sin contenido del producto
Si tu producto puede llenarse con contenido generado por users, deberías asegurarte de que tus Tooltips funcionen con y sin contenido. Deberías probar estados vacíos así como tu producto con contenido.
Puedes usar reglas de segmentación de audiencia para permitir que solo tú o tus compañeros previsualicen los Tooltips y aseguren que funcionen como se espera. Por ejemplo, podemos seleccionar users donde “Email contiene examply”:
Luego activa los Tooltips y visita la página web donde los agregaste para verlos en acción:
Solución de problemas
Si has activado tus Tooltips y no se muestran, asegúrate de haber verificado lo siguiente:
La página correcta está seleccionada en Configuración de colocación.
La URL de la página web no ha cambiado.
Los elementos dinámicos no están cambiando el diseño de la página. Descubre cómo solucionarlo.
Si un Tooltip se muestra pero no en el lugar correcto, puedes editar el diseño y la posición.
Si estás haciendo coincidencia de elementos “Por texto” y has seleccionado “Sitewide” en Configuración de colocación, probablemente coincidirá en páginas con ese texto en cualquier lugar. Intenta usar un Selector CSS para la coincidencia de elementos de este Tooltip en su lugar.
Nota: Si usas una aplicación de una sola página (SPA), Intercom solo verifica los Tooltips cuando se carga por primera vez el Messenger. Esto puede causar que los Tooltips se muestren de forma inconsistente después de cambios de ruta (cuando la URL cambia sin recargar toda la página).
Nuestro equipo de Support puede habilitar una configuración de espacio de trabajo que reevalúa los Tooltips en cada cambio de URL, ayudando a asegurar que se muestren correctamente en SPAs. Contáctanos si deseas que esto se habilite para tu espacio de trabajo.