Si votre app a très peu de rafraîchissements de page (c’est-à-dire que le contenu est remplacé côté client sans rechargement de page) et beaucoup de JS asynchrone, vous devez intégrer Intercom d’une manière légèrement différente pour garantir que les données de vos customers sont à jour et qu’ils reçoivent tout votre contenu sortant (messages, tours, etc.)
Voici ce que nous suggérons :
Tout d’abord, incluez le fichier de la bibliothèque intercom JS dans l’élément head de votre HTML.
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
Important : Si vous copiez le snippet de code ci-dessus, assurez-vous de changer manuellement votre workspace ID (appelé APP_ID dans le code).
Ensuite, une fois que vous avez un user connecté sur votre site (après authentification et que vous avez ses détails), vous appelez window.Intercom('boot', {user_data}), où user_data contient toutes les données sur le user. Veuillez vous assurer d’envoyer le user_id et/ou l’email à chaque appel pour mettre à jour vos users. Cela enverra les détails du user connecté à Intercom et vérifiera les nouveaux messages à afficher à l’utilisateur.
Un exemple pour les visiteurs non connectés serait :
window.Intercom('boot', {
app_id: 'abc12345',
custom_launcher_selector: '#my_custom_link'
});
Important : Si vous copiez le snippet de code ci-dessus, assurez-vous de changer manuellement votre workspace ID (appelé APP_ID dans le code).
Puis, lorsque vous souhaitez les connecter ou les convertir en user, changez simplement la méthode boot pour inclure leurs infos user :
window.Intercom('boot', {
app_id: 'abc12345',
email: 'example@example.com',
user_id: 'abc123',
created_at: 1234567890,
custom_launcher_selector: '#my_custom_link'
});Important : Si vous copiez le snippet de code ci-dessus, assurez-vous de changer manuellement votre workspace ID (appelé APP_ID dans le code).
Installer Intercom avec Google Tag Manager
Utiliser Intercom avec des frameworks JavaScript
Les applications monopages sont souvent construites avec des frameworks JavaScript tels que Ember.js, React, Vue, Angular et Next.js. Pour tous ces cas, utilisez le modèle d’intégration SPA décrit dans cet article — démarrez le Messenger à l’entrée d’une route et arrêtez-le à la déconnexion — plutôt que le snippet de code standard, qui ne fonctionnera pas de manière fiable car la page ne se recharge pas complètement lors de la navigation. Pour les packages npm spécifiques aux frameworks, allez dans Paramètres → Channels → Messenger → Installer → Installer pour le web et sélectionnez votre framework dans la liste.
Indiquez à Intercom quand vos données ou URL changent
Il y a deux appels supplémentaires que vous pourriez avoir besoin d’utiliser dans votre app.
Si les données de votre user changent, ou si vous modifiez l’URL d’une manière ou d’une autre sans rechargement de page, vous devez appeler window.Intercom('update', {user_data}), où user_data est un ensemble de modifications des données de votre user.
Important : Un appel update simule un rafraîchissement de page, ce qui pousse Intercom à vérifier s’il y a de nouveaux messages ou tours à envoyer au customer.
Vous n’avez besoin d’inclure que ce qui a changé — vous n’avez pas besoin d’inclure toutes les données user à chaque mise à jour. Cependant, vous devez toujours envoyer le user_id et/ou l’email.
Vous utilisez la fonction update comme ceci (assurez-vous de changer votre app_id) :
Vous démarrez le user comme normal :
window.Intercom('boot', {app_id: APP_ID, email: 'someuser@example.com', apples: 1});Si les données du user changent, ou s’il vient de provoquer un changement de « page », vous appelez :
window.Intercom('update', {email: 'someuser@example.com', apples: 2});avec toutes les nouvelles données user.
Important : Vous devrez appeler Intercom("update") avec de nouvelles données user pour initier un « ping » à chaque changement d’URL. Si aucune donnée user n’a changé, vous pouvez envoyer l’heure actuelle comme valeur pour « last_request_at » comme ceci :
Intercom("update", {last_request_at: parseInt((new Date()).getTime()/1000)})
Si l’URL change sans rechargement complet de la page, le Messenger Intercom n’envoie pas automatiquement les changements d’URL à Intercom pour faire correspondre les messages basés sur les URL.
L’appel update est limité à 20 fois par user et par page sans être limité. Si vous dépassez ce taux, vous serez limité et le quota de 20 appels sera réinitialisé toutes les 30 minutes. Un rafraîchissement ou rechargement de page réinitialisera ce compteur.
Nous recommandons de ne mettre à jour que lorsque des changements de données user sont envoyés à Intercom, ce qui pourrait déclencher un message automatique pour cette raison.
Comment terminer une session
Intercom vous permet de mettre le Messenger Intercom sur n’importe quel site public que vous possédez (votre site marketing, votre site de documentation, votre hub développeur, etc.). Pour maintenir la continuité des conversations sur tous ces sous-domaines potentiellement différents pendant que vos users sont connectés, nous plaçons un cookie dans le navigateur de votre user. Ce cookie expire après une semaine.
Tout user qui utilise un ordinateur et un navigateur partagés avec quelqu’un d’autre pourra voir l’historique des conversations du dernier user connecté jusqu’à l’expiration du cookie. Pour cette raison, il est très important de bien fermer Intercom lorsque la session d’un user sur votre app se termine (manuellement ou automatiquement).
Voici comment fermer Intercom :
Vous avez déjà commencé à suivre votre user via le snippet JS Intercom ou la méthode « boot ».
Lorsque votre user se déconnecte d’Intercom (ou est automatiquement déconnecté par votre app), appelez
Intercom('shutdown');depuis notre API JavaScript, pour terminer la session Intercom et effacer le cookie.Si nécessaire, appelez
Intercom('boot', {app_id: 'YOUR_APP_ID'})pour démarrer une nouvelle session.
Important : Assurez-vous de changer app_id dans le code avec votre propre workspace ID.
La méthode Intercom('shutdown'); réinitialisera automatiquement Intercom à un état propre pour connecter un autre user ou démarrer Intercom pour des zones déconnectées de votre application.
Activer la vérification d’identité dans une application monopage
Pour activer la vérification d’identité sur votre application monopage, vous devez ajouter l’attribut user_hash à votre appel boot.
Lors de la mise en œuvre de l’identification user dans votre application, suivez ces directives importantes :
N’identifiez les users à Intercom qu’après qu’ils ont été authentifiés et connectés à votre application.
Pour les users non connectés (visiteurs), incluez uniquement l’app_id dans votre configuration.
Ne codez jamais en dur les informations user — remplissez-les toujours dynamiquement après authentification.
Plus de détails sont disponibles ici.
Note : Sans la sécurité Messenger, vos users ne verront que les 14 derniers jours d’historique de conversation dans le Messenger. En savoir plus →