Lors de la création d'un Tooltip, vous pouvez choisir des éléments spécifiques du site, comme des boutons ou des en-têtes, pour y ajouter votre Tooltip. Intercom utilise des sélecteurs CSS pour vous permettre de choisir ces éléments.
Lorsque vous choisissez un élément, le Tooltip génère automatiquement un sélecteur CSS qui indique où il doit être ajouté à l'élément. Vous pouvez voir le CSS de l'élément sélectionné en bas à droite sous Placement > Correspondance d'élément :
Vous pouvez vouloir ajouter manuellement le sélecteur CSS pour plusieurs raisons, que nous aborderons plus loin dans cet article. Si vous souhaitez modifier manuellement le sélecteur CSS choisi automatiquement, cliquez simplement dans le champ et saisissez le sélecteur CSS que vous souhaitez sélectionner :
Pourquoi modifier le CSS d'un Tooltip ?
Il y a plusieurs raisons pour lesquelles vous pourriez vouloir modifier le CSS lors du choix d'un élément du site :
Votre produit a changé
Si votre produit ou site a changé depuis la publication de vos Tooltips, vous pouvez constater que le CSS d'origine ne fonctionne plus. Cela peut être dû au fait que l'élément référencé n'existe plus ou qu'il a été déplacé à un endroit très différent. Dans ce cas, vous pouvez choisir de sélectionner un nouvel élément en utilisant le bouton « Changer d'élément » ou saisir manuellement un nouveau sélecteur.
Votre produit utilise des classes générées dynamiquement
Le CSS est utilisé pour appliquer des styles aux éléments de votre site. Certains frameworks web génèrent dynamiquement les classes CSS pour appliquer ces styles. Cela signifie que les sélecteurs CSS peuvent changer à chaque fois qu'un utilisateur accède à votre produit ou site. Dans ce cas, vous ne pourrez pas utiliser le sélecteur CSS automatique pour ajouter votre Tooltip.
Vous pouvez modifier certains sélecteurs pour utiliser un joker afin d'ignorer la partie générée dynamiquement du sélecteur CSS. Cela signifie modifier le CSS pour ne sélectionner qu'une partie générique à tous les users. Dans l'exemple ci-dessous, nous modifions le sélecteur pour rechercher « button__ » plutôt que « button__2kbli », étant donné que la partie « button_ » du CSS apparaît à tous les users.
Comment puis-je m'assurer que mon Tooltip s'affiche correctement ?
La meilleure façon de garantir que votre Tooltip s'affiche correctement est d'annoter le HTML de votre site avec un attribut spécial que Intercom peut détecter.
Note : Vous devrez modifier le HTML pour cela.
Si vous savez quels éléments de votre site vous souhaitez utiliser dans un Tooltip, vous pouvez ajouter l'attribut de données spécial data-intercom-target="..." à ces éléments.
Par exemple, si vous souhaitez pointer vers votre bouton de démarrage pour un Tooltip, vous pouvez ajouter data-intercom-target="Start button" à cet élément. En annotant votre HTML de cette manière, il est beaucoup plus probable que de petits changements dans votre produit n'affectent pas vos Tooltips.
<div data-intercom-target="Start button">
...
</div>
Note : Si vous annotez le HTML comme indiqué ci-dessus, le créateur de Tooltip pourra mettre en surbrillance les éléments avec l'annotation data-intercom-target afin que vous puissiez les sélectionner.
Des questions ?
Si vous avez d'autres questions sur la modification du CSS dans les Tooltips, discutez simplement avec nous dans le Messenger et nous vous aiderons. Voici plus de façons de tester vos Tooltips et de vous assurer qu'ils fonctionnent comme prévu.