Cuando cree un Tooltip, puede elegir elementos específicos del sitio web, como botones o encabezados, para agregar su Tooltip. Intercom usa selectores CSS para permitirle elegir estos elementos.
Cuando elige un elemento, el Tooltip generará automáticamente un selector CSS que indica dónde debe agregarse al elemento. Puede ver el CSS para el elemento seleccionado en la esquina inferior derecha bajo Ubicación > Coincidencia de elemento:
Es posible que desee agregar manualmente el selector CSS por algunas razones, que cubriremos más adelante en este artículo. Si desea editar manualmente el selector CSS que se elige automáticamente, simplemente haga clic dentro del campo e ingrese el selector CSS que desea seleccionar:
¿Por qué editaría el CSS de un Tooltip?
Hay un par de razones por las que podría querer editar el CSS al elegir un elemento del sitio web:
Su producto ha cambiado
Si su producto o sitio ha cambiado desde que publicó sus Tooltips, puede que el CSS original ya no funcione. Esto puede deberse a que el elemento al que hace referencia ya no existe o se ha movido a un lugar significativamente diferente. En este caso, puede elegir seleccionar un nuevo elemento usando el botón “Cambiar elemento” o ingresar manualmente un nuevo selector.
Su producto usa clases generadas dinámicamente
El CSS se usa para aplicar estilos a los elementos de su 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 su producto o sitio. En este caso, no podrá usar el selector CSS automático para agregar su Tooltip.
Puede editar algunos de los selectores para usar un comodín que ignore la parte generada dinámicamente del selector CSS. Esto significa editar el CSS para seleccionar solo una parte que sea genérica para todos los users. En el ejemplo a continuación, editamos el selector para buscar "button__" en lugar de "button__2kbli", dado que la parte "button_" del CSS aparece para todos los users.
¿Cómo puedo asegurar que mi Tooltip se muestre correctamente?
La mejor manera de asegurar que su Tooltip se muestre correctamente es anotar el HTML de su sitio con un atributo especial que Intercom pueda detectar.
Nota: Necesitará editar el HTML para hacer esto.
Si sabe qué elementos de su sitio desea usar en un Tooltip, puede agregar el atributo de datos especial data-intercom-target="..." a estos elementos.
Por ejemplo, si desea apuntar a su botón de inicio para un Tooltip, puede agregar data-intercom-target="Botón de inicio" a este elemento. Al anotar su HTML de esta manera, es mucho más probable que pequeños cambios en su producto no afecten sus Tooltips.
<div data-intercom-target="Start button">
...
</div>
Nota: Si anota el HTML como se muestra arriba, el generador de Tooltips podrá resaltar los elementos con la anotación data-intercom-target para que pueda seleccionarlos.
¿Tiene preguntas?
Si tiene más preguntas sobre cómo editar CSS en Tooltips, simplemente chatee con nosotros en Messenger y le ayudaremos. Aquí hay más formas de probar sus Tooltips y asegurarse de que funcionen como se espera.