Les infobulles offrent une expérience contextuelle et non intrusive pour éduquer et engager les users dans votre produit, ce qui vous permet 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 users 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 + Nouveau message en haut à droite.
Ensuite, choisissez Infobulles 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 users sur votre application mobile, Carrousels mobiles.
Vous pouvez ajouter plusieurs infobulles à la fois en les regroupant dans le même groupe.
Ces infobulles 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 users, 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 accrocheur. 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 « Ajouter des infobulles » :
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 users. 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 infobulle
Vous pouvez naviguer vers une autre page depuis ici si cette infobulle est destinée à une page différente.
Cliquez maintenant sur « Ajouter une infobulle » 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 de 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 lorsqu’un user 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’infobulle. 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 d’infobulle. Choisir Moyen ou Grand rend l’ancre plus visible et facile à cliquer pour les users.
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 lorsqu’un user la survole ou clique dessus.
Phare animé - Cela permettra à l’infobulle de clignoter lentement jusqu’à ce qu’un user 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 les “Paramètres du groupe”.
Choisissez la bonne disposition pour votre infobulle
Utilisez ces contrôles pour positionner ou déplacer votre infobulle exactement où vous le souhaitez. Vous pouvez jouer 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 peut 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 de marge de 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 “Pages spécifiques” et cliquez sur “+ Ajouter une nouvelle règle” :
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 « 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 capture 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 se fait « 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 Tooltip
Lorsque vous modifiez un groupe de Tooltip, 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 Tooltip 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, par ex. basique, admin, super admin ; vous devriez tester votre Tooltip en tant qu’utilisateur avec chacun de ces niveaux d’autorisation. Cela garantira que votre Tooltip fonctionne pour chaque type d’utilisateur. 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 » :
Ensuite, mettez les Tooltips en ligne et visitez la page web où vous les avez ajoutés pour les voir en action :
Dépannage
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 de route importants dans votre application. Cela incite Intercom à réévaluer les Tooltips pour la page actuelle.
Notre équipe Support peut activer un paramètre d’espace de travail qui réévalue les infobulles à chaque changement d’URL, garantissant leur affichage correct dans les SPA. Contactez-nous si vous souhaitez l’activer pour votre espace de travail.