Les infobulles offrent une expérience contextuelle et non intrusive pour éduquer et engager les clients dans votre produit, vous permettant ainsi d'accélérer leur adoption. 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 infobulle est rapide et facile, et ne nécessite aucun code. Voici comment commencer :
Concevez vos infobulles
Tout d'abord, allez dans Outbound depuis le menu principal et cliquez sur + New 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 infobulles 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 infobulles en même temps en les ajoutant au même groupe.
Celles-ci auront les mêmes ciblages d'audience, planification et objectifs appliqués. C’est idéal pour regrouper toutes les infobulles d’intégration pour les nouveaux clients, ou regrouper des infobulles éducatives pour soutenir une partie particulièrement complexe de votre produit.
Vous pouvez créer 100 infobulles par groupe et 50 groupes au total.
Ensuite, donnez à vos infobulles un titre court et percutant. Par exemple, si vous annoncez une nouvelle fonctionnalité produit, vous pourriez l'appeler « Lancement de fonctionnalité » :
Choisissez un site pour ajouter vos infobulles
Pour commencer à concevoir une infobulle, cliquez sur « Add tooltips » :
Une nouvelle fenêtre s'ouvrira. Ici, ajoutez le site web sur lequel vous souhaitez ajouter vos infobulles :
Cette URL sert uniquement à sélectionner le bon site web - ce n’est pas l’URL cible où vous afficherez votre infobulle 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 « Open website ».
Choisissez où ajouter votre infobulle
Vous pouvez naviguer vers une autre page à partir d’ici si cette infobulle concerne une page différente.
Cliquez maintenant sur « Add tooltip » pour commencer à concevoir votre infobulle sur cette page :
Choisissez un élément sur la page où vous souhaitez placer votre infobulle :
Ajoutez du contenu à votre infobulle
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 dans votre Help Center qui offre plus d’informations, ou ajouter un Product Tour que vous souhaitez lancer depuis cette infobulle :
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 infobulle dans l’éditeur.
Stylisez votre infobulle
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 lorsque l’utilisateur 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é.
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’infobulle doit révéler le contenu, par exemple lorsque l’utilisateur survole ou clique dessus.
Phare animé - Cela permettra à l’infobulle de clignoter lentement jusqu’à ce qu’un utilisateur interagisse avec elle, puis elle restera statique.
Il est possible de définir la couleur de fond et le texte pour toutes les infobulles que vous ajoutez ici. Gérez cela depuis « Group settings ».
Choisissez la bonne mise en page pour votre infobulle
Utilisez ces contrôles pour positionner ou déplacer votre infobulle exactement où vous le souhaitez. Vous pouvez expérimenter avec les options suivantes :
Superposé - Cette infobulle flottera au-dessus de l’élément (comme le Messenger).
Intégré - Cette infobulle s’affichera en ligne avec votre HTML et pourra ajuster la mise en page de votre page.
Aligner sur - Déplacez l’infobulle 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 qui entourent l’infobulle.
Paramètres de placement
Cliquez maintenant sur « Placement » et décidez si vous souhaitez que les infobulles 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 infobulles apparaîtront, sélectionnez « Specific pages » et cliquez sur « + Add new rule » :
Ensuite, définissez l’URL de la page sur laquelle vos infobulles 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 « contains » pour être plus flexible, comme cibler des groupes de pages ou des pages contenant des paramètres uniques (comme un ID utilisateur). Par exemple, vous pourriez choisir de cibler les URL de pages contenant « 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 l’URL depuis votre application ou site directement, 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 infobulle est placée en utilisant le sélecteur CSS, ou si vous avez un texte très spécifique sur votre page où vous essayez de placer l’infobulle, essayez de chercher « By Text » pour trouver l’élément exact qui contient ce texte.
Si vous faites une correspondance d’élément « By Text », 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.
Une fois que vous avez terminé de finaliser le placement de vos infobulles, cliquez sur « Done ».
Vous pouvez maintenant ajouter plus d’infobulles à ce groupe qui auront les mêmes règles et planification appliquées.
Si vous souhaitez créer des infobulles avec des règles et une planification différentes, vous devrez enregistrer celle-ci puis concevoir une nouvelle infobulle.
Gestion de la fréquence et des couleurs de fond :
Choisissez la fréquence à laquelle ces infobulles doivent apparaître et définissez des couleurs de fond cohérentes dans les « Group settings » :
Fréquence :
Choisissez si ces infobulles doivent continuer à s’afficher chaque fois qu’elles répondent aux règles d’audience, ou si elles doivent s’afficher jusqu’à ce qu’elles soient consultées puis disparaître. C’est idéal pour les annonces de fonctionnalités ou pour sensibiliser.
La fréquence s’applique à toutes les infobulles que vous avez ajoutées ici et ne peut pas être définie pour des infobulles individuelles.
L’engagement avec les infobulles 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 infobulles avec lesquelles ils ont déjà interagi :
Utiliser un autre navigateur ou appareil
Vider leur cache et leurs cookies
Se connecter via une fenêtre de navigation privée
Couleurs de fond :
Vous pouvez aussi définir une couleur de fond et de texte en HEX pour toutes les infobulles que vous avez ajoutées ici. C’est idéal pour les infobulles qui doivent respecter les directives de design de votre produit.
Une fois que vous avez terminé de gérer les paramètres du groupe, cliquez sur « Save and close ».
Modifier les groupes d’infobulles
Lorsque vous modifiez un groupe d’infobulles, vous pouvez voir dans la barre d’outils inférieure :
Toutes les infobulles incluses dans le groupe.
Comment l’infobulle est étiquetée - si c’est un sélecteur CSS ou un élément texte
Où l’infobulle s’affiche - sur tout le site ou sur une page spécifique
Si l’infobulle est sur la page actuelle.
Si vous modifiez une infobulle qui n’est pas sur la page actuelle, vous verrez l’infobulle flotter au milieu de la page avec une bannière d’erreur.
Voici un exemple d’un groupe d’infobulles affichant les différents paramètres pour les infobulles individuelles.
Testez-le dans un environnement réel
Nous recommandons de tester vos infobulles 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 infobulles pour les nouveaux users, vous devriez vous inscrire à votre produit depuis le début et tester votre infobulle comme un vrai nouvel utilisateur. Cela garantira que votre infobulle 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, par exemple basique, admin, super admin ; vous devriez tester votre infobulle en tant qu’utilisateur avec chacun de ces niveaux d’autorisation. Cela garantira que votre infobulle fonctionne pour chaque type d’utilisateur. Cela garantira aussi que votre infobulle a été ajoutée aux pages auxquelles chaque user peut accéder.
3. Testez que votre infobulle 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 infobulles 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 infobulles et vous assurer qu’elles fonctionnent comme prévu. Par exemple, nous pouvons sélectionner users où « Email contains examply » :
Ensuite, mettez les infobulles en ligne et visitez la page web où vous les avez ajoutées pour les voir en action :
Dépannage
Si vous avez mis vos infobulles en ligne et qu’elles 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 une infobulle 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 « By Text » 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 cette infobulle.
Note : Si vous utilisez une application monopage (SPA), Intercom ne vérifie les Tooltips qu’au chargement initial du Messenger. 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).
Notre équipe Support peut activer un paramètre d’espace de travail qui réévalue les Tooltips à chaque changement d’URL, aidant à garantir leur affichage correct dans les SPA. Contactez-nous si vous souhaitez que cela soit activé pour votre espace de travail.