Cuando diseñas un Product Tour, puedes elegir elementos específicos del sitio web, como botones o encabezados, para apuntar tus mensajes. Intercom usa selectores CSS para que puedas elegir estos elementos.

Cuando eliges un elemento, el tour generará automáticamente un Selector CSS que indica cómo apuntar al elemento. Puedes ver el CSS para el elemento seleccionado en la esquina inferior izquierda:

Puede que quieras añadir manualmente el selector CSS por algunas razones, que cubriremos más adelante en este artículo. Si deseas editar manualmente el selector CSS que se elige automáticamente, haz clic en ‘Avanzado’ después de seleccionar el elemento del sitio web.

Aquí, puedes ingresar manualmente el Selector CSS que deseas seleccionar:

¿Por qué editaría el CSS de un tour?

Hay un par de razones por las que podrías querer editar el CSS al elegir un elemento del sitio web:

Tu producto ha cambiado

Si tu producto o sitio ha cambiado desde que publicaste tu tour, puede que el CSS original ya no funcione. Esto puede ser porque el elemento al que hace referencia ya no existe o se ha movido a un lugar significativamente diferente. En este caso, puedes elegir un nuevo elemento usando el constructor de tours o ingresar manualmente un nuevo selector.

Tu producto usa clases generadas dinámicamente

El CSS se usa para aplicar estilos a los elementos de tu sitio web. Algunos frameworks web generan dinámicamente las clases CSS para aplicar estos estilos. Esto significa que los selectores CSS pueden cambiar cada vez que un usuario accede a tu producto o sitio. En este caso, no podrás usar el selector CSS automático para construir tu tour. Puedes editar algunos selectores para usar un comodín que ignore la parte generada dinámicamente del selector CSS. Esto significa editar el CSS para que el selector solo identifique las partes estáticas/genéricas que estarían presentes para todos los users. En el ejemplo a continuación, editamos el selector para buscar button__ en lugar de button__2kbli, ya que esa parte del CSS aparece para todos los users.

¿Cómo puedo asegurar que mi tour se envíe correctamente?

La mejor manera de asegurar que tus tours se envíen correctamente es anotar el HTML de tu sitio con un atributo especial que Intercom pueda detectar.

Nota: Necesitarás editar el HTML para hacer esto.

Si sabes qué elementos de tu sitio quieres usar en un tour, puedes añadir un atributo de datos especial a estos elementos en la forma: data-intercom-target=”...”.

<div data-intercom-target="Login button">

 ...

</div>

Por ejemplo, si quieres apuntar al botón de inicio de sesión en un tour, podrías añadir data-intercom-target=”Login button” a este elemento. Al anotar tu HTML de esta manera, es mucho más probable que pequeños cambios en tu producto no afecten tus tours.

Si anotas el HTML como se muestra arriba, entonces el constructor de tours podrá resaltar los elementos con la anotación data-intercom-target, para que puedas seleccionarlos usando el constructor de tours:

Soluciones avanzadas dirigidas por desarrolladores

Para problemas complejos como menús desplegables y navegación lateral:

Menús desplegables: En lugar de apuntar a elementos individuales del menú desplegable, resalta el menú desplegable completo y proporciona instrucciones para los users. Continúa con un nuevo tour después de la selección.
Navegación lateral: Actualiza el CSS de tu página para incluir el atributo data-intercom-target. Por ejemplo:
<div data-intercom-target="Side navigation button">Texto del botón</div> Esto proporciona estabilidad a los objetivos de navegación, asegurando que el Product Tour se alinee con los elementos previstos.
Anota elementos HTML: Añade atributos data-intercom-target a elementos clave para asegurar estabilidad y compatibilidad con los tours de Intercom.
Asegura la visibilidad del elemento: Verifica que los elementos a los que apunta el tour sean visibles y no estén ocultos por defecto.

Problemas comunes con el apuntado de elementos en Product Tours

Al configurar Product Tours, podrías encontrar problemas con el apuntado de elementos. Aquí algunos problemas comunes y sus causas:

Ruptura de selectores debido a cambios en el sitio web: Cambios estructurales en el sitio web pueden invalidar selectores CSS existentes, haciendo que dejen de funcionar. Intercom usa una biblioteca llamada Finder para generar estos selectores, que pueden quedar obsoletos cuando cambia el diseño o los elementos de tu sitio web.
Selectores dinámicos o genéricos: Usar selectores genéricos, como .d-xl-inline, o generados dinámicamente puede causar fallos en el apuntado porque podrían no apuntar consistentemente a los elementos correctos en diferentes sesiones o cargas de página.
Elementos faltantes u ocultos: Si un elemento apuntado no es visible o no se ha renderizado cuando comienza un paso del tour, puede causar que el paso falle o muestre el mensaje "el elemento no es visible aquí." Siempre asegúrate de que todos los elementos apuntados estén presentes y visibles durante sus respectivos pasos del tour.
Elementos dinámicos u ocultos: Asegúrate de que los elementos apuntados sean estáticos y estén consistentemente presentes en el DOM. Para elementos dinámicos, considera rediseñar el flujo del tour o retrasar el paso hasta que el elemento se cargue.
Selectores CSS incorrectos o genéricos: Reemplaza selectores genéricos como nth-child con selectores únicos y específicos, como el atributo data-intercom-target, para un apuntado preciso.
Elementos faltantes o eliminados: Actualiza los selectores CSS para apuntar a elementos universales y consistentes en todas las versiones de tu sitio. Evita selectores como [href='#/sheets/...'] y usa alternativas más estables.

Pasos para solucionar problemas

Cuando encuentres problemas con el apuntado de elementos en Product Tours, sigue estos pasos para solucionarlos:

Verifica la visibilidad del elemento

Si ves el mensaje "el elemento no es visible aquí":

Guarda el paso nuevamente en el constructor de Product Tours. Esto a veces puede refrescar el apuntado.
Verifica que el elemento esté presente en todas las versiones de tu sitio, incluyendo diferentes tamaños de pantalla y estados de users.
Añade el atributo data-intercom-target al elemento. Esto facilita significativamente que Intercom apunte al elemento de forma confiable.
Verifica el selector: Comprueba si el selector CSS coincide con un elemento que siempre está presente cuando el tour debe activarse.
Edita el selector: Modifica el selector para apuntar a un elemento visible y estable, como "Agregar fila de factura."
Atiende elementos dinámicos: Asegúrate de que los elementos que aparecen tras la interacción del user estén presentes en el DOM o rediseña el flujo del tour.

Resuelve errores de apuntado

Revisa y actualiza los selectores CSS para mantener la consistencia. Los selectores genéricos o dinámicos suelen ser la causa de inestabilidad.
Reemplaza selectores rotos con referencias a elementos estáticos y universales. Por ejemplo, actualiza selectores como [href='#/sheets/...'] para apuntar de forma confiable a elementos persistentes que tienen menos probabilidades de cambiar.
Usa apuntado avanzado: Añade un atributo data-intercom-target a los elementos e ingresa manualmente el selector en el Constructor de Tours.
Colabora con desarrolladores: Trabaja con tu equipo de desarrollo para actualizar el CSS y HTML de tu página para un mejor apuntado.

Prueba y vista previa

Después de aplicar cualquier corrección, siempre previsualiza el tour para confirmar que todos los pasos funcionan como se espera y que los elementos están siendo apuntados correctamente.

¿Tienes preguntas?

Si tienes más preguntas sobre cómo editar CSS en Product Tours, solo chatea con nosotros en Messenger y te ayudaremos. Aquí hay más recursos para asegurar que tus tours funcionen:

Edita CSS para apuntar tu tour a los elementos correctos del sitio web