Les info-bulles offrent une expérience contextuelle et non intrusive pour éduquer et engager les clients dans votre produit, ce qui permet une adoption plus rapide. Elles sont idéales pour attirer l’attention sur de nouvelles fonctionnalités et mettre en avant vos autres contenus auprès des clients lorsqu’ils les recherchent, comme afficher un Article de votre Help Center ou lancer un Product Tour.
Créer une info-bulle est rapide et facile, et ne nécessite aucun code. Voici comment commencer :
Concevez vos info-bulles
Tout d’abord, allez dans Outbound depuis le menu principal et cliquez sur + Nouveau message en haut à droite.
Ensuite, choisissez Tooltips comme type de contenu.
Vous pouvez aussi choisir de commencer avec un modèle préfabriqué en sélectionnant ce type de contenu dans la barre latérale gauche.
Note :
Les info-bulles sont spécialement conçues pour fonctionner avec les applications web de bureau et ne sont pas prises en charge sur les applications mobiles natives. Pour éduquer et engager les clients sur votre application mobile, Mobile Carousels.
Vous pouvez ajouter plusieurs info-bulles à la fois en les regroupant dans le même groupe.
Celles-ci auront les mêmes paramètres de ciblage d’audience, de planification et d’objectifs appliqués. C’est idéal pour regrouper toutes les info-bulles d’intégration pour les nouveaux clients, ou regrouper des info-bulles éducatives pour soutenir une partie particulièrement complexe de votre produit.
Vous pouvez créer 100 info-bulles par groupe et 50 groupes au total.
Ensuite, donnez à vos info-bulles un titre court et accrocheur. Par exemple, si vous annoncez une nouvelle fonctionnalité produit, vous pourriez l’appeler « Lancement de fonctionnalité » :
Choisissez un site pour ajouter vos info-bulles
Pour commencer à concevoir une info-bulle, cliquez sur « Ajouter des info-bulles » :
Une nouvelle fenêtre s’ouvrira. Ici, ajoutez le site web sur lequel vous souhaitez ajouter vos info-bulles :
Cette URL sert uniquement à sélectionner le bon site web - ce n’est pas l’URL cible où vous afficherez votre info-bulle aux clients. Vous pourrez choisir les règles de ciblage de page et d’audience à une étape ultérieure.
Une fois que vous avez ajouté une URL, cliquez sur « Ouvrir le site web ».
Choisissez où ajouter votre info-bulle
Vous pouvez naviguer vers une autre page à partir d’ici si cette info-bulle est destinée à une page différente.
Cliquez maintenant sur « Ajouter une info-bulle » pour commencer à concevoir votre info-bulle sur cette page :
Choisissez un élément sur la page où vous souhaitez placer votre info-bulle :
Ajoutez du contenu à votre info-bulle
Vous pouvez utiliser du texte stylisé et ajouter des liens, images, vidéos, code, listes à puces et numérotées.
Les formats d’image et vidéo suivants sont pris en charge : PNG, JPG, JPEG, GIF et MP4.
Vous pouvez aussi utiliser des Smart Links pour rechercher du contenu que vous avez déjà créé dans Intercom. Par exemple, vous pourriez ajouter un Smart Link vers un Article de votre Help Center qui offre plus d’informations, ou ajouter un Product Tour que vous souhaitez lancer depuis cette info-bulle :
Note :
Les Smart Links ne trouvent que le contenu en ligne (publié) que vous avez créé dans Intercom et ignorent toutes les règles de ciblage que vous avez définies sur ce contenu.
Le contenu déclenché par un Smart Link ne sera pas diffusé lors de la prévisualisation d’une info-bulle dans l’éditeur.
Stylisez votre info-bulle
Icône - Sélectionnez ceci si vous souhaitez qu’une icône apparaisse à côté d’un élément sur la page.
Pas d’icône - Sélectionnez ceci si vous souhaitez que le contenu apparaisse de manière fluide lorsqu’un client survole un élément.
Étiquette - Sélectionnez ceci si vous souhaitez ajouter une étiquette à côté d’un élément comme « Nouveau » ou « Bêta » pour une fonctionnalité de votre produit. Notez qu’il y a une limite de 16 caractères pour les étiquettes.
Type d’icône - Choisissez le type d’icône que vous souhaitez afficher, comme un phare pour attirer l’attention sur une nouvelle fonctionnalité.
Taille - Choisissez Petit, Moyen ou Grand pour l’ancre de l’info-bulle. Cela s’applique aux trois styles d’ancre — icône, phare animé et étiquette. Petit est la valeur par défaut et correspond à la taille actuelle de l’ancre de l’info-bulle. Choisir Moyen ou Grand rend l’ancre plus visible et facile à cliquer pour les clients.
Couleur de l’icône - Personnalisez la couleur pour correspondre à votre marque ou pour se démarquer sur la page.
Afficher le contenu sur - Décidez quand l’info-bulle doit révéler le contenu, par exemple lorsqu’un client la survole ou clique dessus.
Phare animé - Cela permettra à l’info-bulle de clignoter lentement jusqu’à ce qu’un client interagisse avec elle, puis elle restera statique.
Il est possible de définir la couleur de fond et le texte pour toutes les info-bulles que vous ajoutez ici. Gérez cela depuis « Paramètres du groupe ».
Choisissez la bonne disposition pour votre info-bulle
Utilisez ces contrôles pour positionner ou déplacer votre info-bulle exactement où vous le souhaitez. Vous pouvez essayer les options suivantes :
Superposé - Cette info-bulle flottera au-dessus de l’élément (comme le Messenger).
Intégré - Cette info-bulle s’affichera en ligne avec votre HTML et peut ajuster la mise en page de votre page.
Aligner sur - Déplacez l’info-bulle pour qu’elle soit alignée avec le texte dans un élément, à côté de l’élément, ou à côté de l’élément. Vous pouvez aussi ajuster si elle se place à gauche, droite, en haut, en bas ou au centre de l’élément.
Décalage - Obtenez encore plus de précision en décalant les pixels de marge de l’info-bulle.
Paramètres de placement
Cliquez maintenant sur « Placement » et décidez si vous voulez que les info-bulles s’affichent sur tout le site (par exemple dans les en-têtes ou pieds de page) ou sur des pages spécifiques (par exemple uniquement les pages que vous choisissez).
Pour contrôler sur quelle(s) page(s) les info-bulles apparaîtront, sélectionnez « Pages spécifiques » et cliquez sur « + Ajouter une nouvelle règle » :
Ensuite, définissez l’URL de la page sur laquelle vos info-bulles doivent apparaître. Par défaut, ce sera l’URL du site web que vous avez sélectionné au début, mais vous pouvez modifier cette règle et choisir n’importe quelle page de votre site :
Assurez-vous que la page que vous choisissez contient l’élément sur lequel vous placez l’infobulle.
Vous pouvez aussi utiliser « contient » pour être plus flexible, comme cibler des groupes de pages ou des pages qui contiennent des paramètres uniques (comme l’ID utilisateur). Par exemple, vous pouvez choisir de cibler les URL de pages qui contiennent « project » pour cibler les clients lorsqu’ils travaillent sur des projets.
Ajoutez autant de règles d’URL de page que nécessaire pour cibler les bonnes pages.
Il est conseillé de copier-coller directement l’URL depuis votre application ou site, car cela capturera tous les caractères cachés dans la barre d’adresse de votre navigateur, comme les barres obliques finales.
Correspondance d’élément
Ici, vous pouvez changer l’élément où votre Tooltip est placé en utilisant le sélecteur CSS, ou si vous avez un texte très spécifique sur votre page où vous essayez de placer le Tooltip, essayez de chercher « Par texte » pour trouver l’élément exact qui contient ce texte.
Si la correspondance d’élément est « Par texte », cela trouvera le premier élément sur la page qui contient ce terme de texte.
Si vous avez du mal à sélectionner le bon élément sur votre page, essayez de choisir manuellement le sélecteur CSS.
Lorsque vous avez terminé de finaliser le placement de vos Tooltips, cliquez sur « Terminé ».
Vous pouvez maintenant ajouter plus de Tooltips à ce groupe qui auront les mêmes règles et la même planification appliquées.
Si vous souhaitez créer des Tooltips avec des règles et une planification différentes, vous devrez enregistrer celui-ci puis concevoir un nouveau Tooltip.
Gestion de la fréquence et des couleurs de fond :
Choisissez la fréquence à laquelle ces Tooltips doivent apparaître et définissez des couleurs de fond cohérentes dans les « Paramètres du groupe » :
Fréquence :
Choisissez si ces Tooltips doivent continuer à s’afficher chaque fois qu’ils répondent aux règles d’audience, ou s’ils doivent s’afficher jusqu’à ce qu’ils soient consultés puis disparaître. C’est idéal pour les annonces de fonctionnalités ou pour sensibiliser.
La fréquence s’applique à tous les Tooltips que vous avez ajoutés ici et ne peut pas être définie pour des Tooltips individuels.
L’engagement avec les Tooltips est suivi par les cookies du navigateur et non par le compte utilisateur, donc si vos users effectuent l’une des actions suivantes, ils verront à nouveau les Tooltips avec lesquels ils ont déjà interagi :
Utiliser un navigateur ou un appareil différent
Vider leur cache et leurs cookies
Se connecter via une fenêtre de navigation privée
Couleurs de fond :
Vous pouvez également définir une couleur de fond et de texte HEX pour tous les Tooltips que vous avez ajoutés ici. C’est idéal pour les infobulles qui doivent respecter les directives de conception de votre produit.
Lorsque vous avez terminé de gérer les paramètres du groupe, cliquez sur « Enregistrer et fermer ».
Modification des groupes de Tooltips
Lorsque vous modifiez un groupe de Tooltips, vous pouvez voir dans la barre d’outils inférieure :
Tous les Tooltips inclus dans le groupe.
Comment le Tooltip est étiqueté - s’il s’agit d’un sélecteur CSS ou d’un élément texte
Où le Tooltip s’affiche - sur tout le site ou sur une page spécifique
Si le Tooltip est sur la page actuelle.
Si vous modifiez un Tooltip qui n’est pas sur la page actuelle, vous verrez le Tooltip flotter au milieu de la page avec une bannière d’erreur.
Voici un exemple d’un groupe de Tooltips affichant les différents paramètres pour les Tooltips individuels.
Testez-le dans un environnement en direct
Nous recommandons de tester vos Tooltips de la manière suivante avant de les mettre en ligne pour les clients :
1. Testez en tant que nouvel utilisateur
Si vous avez ajouté des Tooltips pour les nouveaux users, vous devriez vous inscrire à votre produit depuis le début et tester votre Tooltip comme un vrai nouvel utilisateur. Cela garantira que votre Tooltip fonctionne lorsque votre produit est complètement neuf, sans données existantes.
2. Testez avec tous vos différents niveaux d’autorisation produit
Si votre produit a différents niveaux d’autorisation, c’est-à-dire basique, admin, super admin ; vous devriez tester votre Tooltip en tant qu’utilisateur avec chacun de ces niveaux d’autorisation différents. Cela garantira que votre Tooltip fonctionne pour chaque type de user. Cela garantira également que votre Tooltip a été ajouté aux pages auxquelles chaque user peut accéder.
3. Testez que votre Tooltip fonctionne avec et sans contenu produit
Si votre produit peut être rempli de contenu généré par les users, vous devriez vous assurer que vos Tooltips fonctionnent avec et sans contenu. Vous devriez tester les états vides ainsi que votre produit avec contenu.
Vous pouvez utiliser des règles de ciblage d’audience pour permettre uniquement à vous ou à vos coéquipiers de prévisualiser les Tooltips et vous assurer qu’ils fonctionnent comme prévu. Par exemple, nous pouvons sélectionner users où « Email contient examply » :
Puis mettez les Tooltips en ligne et visitez la page web où vous les avez ajoutés pour les voir en action :
Dépannage
Si le créateur de Tooltip ne se charge pas sur votre site, indique que le Messenger n’est pas chargé, ou n’enregistre pas votre Tooltip, consultez Pourquoi ne puis-je pas créer un Tooltip ?
Si vous avez mis vos Tooltips en ligne et qu’ils ne s’affichent pas, assurez-vous d’avoir vérifié les points suivants :
La bonne page est sélectionnée dans les paramètres de placement.
L’URL de la page web n’a pas changé.
Les éléments dynamiques ne modifient pas la mise en page de la page. Découvrez comment résoudre ce problème.
Si un Tooltip s’affiche mais pas au bon endroit, vous pouvez modifier la mise en page et le positionnement.
Si vous faites une correspondance d’élément « Par texte » et avez sélectionné « Sitewide » dans les paramètres de placement, il correspondra probablement aux pages contenant ce texte n’importe où. Essayez plutôt d’utiliser un sélecteur CSS pour la correspondance d’élément de ce Tooltip.
Note : Si vous utilisez une application monopage (SPA), Intercom ne vérifie les Tooltips que lorsque le Messenger se charge pour la première fois. Cela peut entraîner un affichage incohérent des Tooltips après des changements de route (lorsque l’URL change sans rechargement complet de la page).
Pour résoudre ce problème, appelez Intercom('update') lors des changements importants de route dans votre application. Cela incite Intercom à réévaluer les info-bulles pour la page actuelle.
Notre équipe Support peut activer un paramètre d’espace de travail qui réévalue les Tooltips à chaque changement d’URL, garantissant leur affichage correct dans les SPA. Contactez-nous si vous souhaitez que cela soit activé pour votre espace de travail.