L'installation du Messenger sur votre site web ne prend que quelques minutes. Une fois installé, vous pourrez accueillir, intégrer et assister les clients qui deviennent des users fidèles de votre application.
Les deux étapes nécessaires pour une installation complète et sécurisée du Messenger sont :
Vous aurez besoin d’un essai ou abonnement Intercom pour installer le Messenger.
Note : Une nouvelle expérience d’installation du Messenger est déployée progressivement. Si vous voyez un flux d’installation mis à jour dans votre espace de travail, suivez Installer le Messenger sur votre site web à la place, cet article reflète l’ancien flux d’installation.
Installation initiale du Messenger pour les users sur le web
Allez d’abord dans Paramètres > Canaux > Messenger > Installer et choisissez Installer pour le web.
Choisissez comment installer le Messenger
Sélectionnez la méthode d’installation parmi les options suivantes :
Extrait de code
React
Angular
Vue
Ember
WordPress
Google Tag Manager
Shopify
Segment
Chaque méthode fournit des étapes spécifiques une fois sélectionnée. Beaucoup de ces méthodes proposent une installation via node package manager (NPM) pour vous faciliter la tâche.
Demandez l’aide de votre développeur (optionnel)
Si besoin, vous pouvez demander à un collègue (comme un ingénieur) de compléter l’installation. Cliquez simplement sur Inviter un collègue.
Une fois que vous aurez saisi son adresse e-mail, une invitation sera envoyée par e-mail lui permettant de rejoindre l’espace de travail de votre équipe.
Le collègue invité recevra un siège léger sur les plans Advanced / Expert et un siège complet sur les plans Essential. Il disposera des permissions minimales nécessaires pour installer le Messenger :
Peut gérer les paramètres généraux et de sécurité
Peut gérer les paramètres du Messenger
Peut gérer les données de l’espace de travail
Installez vous-même
Si vous avez sélectionné Extrait de code, React, Angular, Vue, Ember ou Shopify comme méthode d’installation, vous aurez le choix de compléter l’installation pour :
Pour les users avec connexion - Installez le Messenger pour les users connectés. Le Messenger affichera des informations comme les noms des clients et les conversations précédentes sur plusieurs appareils.
Pour les visiteurs du site sans connexion - Installez le Messenger pour les visiteurs anonymes du site qui ne sont pas connectés. Les conversations seront sauvegardées dans le navigateur via un cookie.
Nous recommandons d’installer le Messenger pour les users et les visiteurs.
Vous devez ensuite « Activer la connexion au messenger ».
Important : Si cette option est désactivée, toutes les requêtes vers Intercom échoueront. Les APIs du Messenger ne sont pas activées par défaut. Comme vous pouvez le voir lorsque vous accédez pour la première fois à la page d’installation du Messenger, les exemples de code sont grisés tant que vous n’activez pas ce bouton. Cela active les APIs du Messenger pour votre espace de travail et garantit qu’il commence à accepter le trafic. Vous devrez activer cette option pour commencer à recevoir du trafic utilisateur.
Une fois votre Messenger configuré, nous vous recommandons également de le sécuriser avec des JWTs !
Installez Intercom via la méthode choisie
Suivez maintenant les instructions données pour la méthode que vous avez sélectionnée. Par exemple, si vous avez choisi WordPress, vous verrez les instructions ci-dessous pour cette méthode.
Si vous avez sélectionné la méthode Extrait de code, React, Angular, Vue, ou Ember, un package NPM contenant un extrait de code à copier-coller dans la base de code de votre propre application vous sera fourni. Cet extrait est pré-rempli avec votre identifiant unique d’espace de travail, il est donc prêt à l’emploi.
Vous pouvez aussi trouver le package directement sur le site NPM.
Plusieurs autres modèles sont disponibles, comme inclure l’extrait de code dans une application Node.js/Rails (Ruby)/Django (Python 3) ou PHP. Vous pouvez aussi inclure l’extrait de code dans une application monopage ou utiliser la gem rails pour installer l’extrait. Pour les applications monopages (SPA), suivez le guide d’installation SPA pour gérer leur nature dynamique.
Cliquez sur Copier le code et collez-le avant la balise </body> sur chaque page où vous souhaitez que le Messenger apparaisse dans votre application.
Puis modifiez le code pour envoyer à Intercom l’adresse e-mail ou user_id et la date d’inscription de l’utilisateur actuellement connecté.
Après avoir ajouté le code, ouvrez votre application et le Messenger apparaîtra.
Fermez les sessions utilisateur à la déconnexion
Assurez-vous également d’appeler la méthode shutdown d’Intercom pour effacer les conversations de vos clients lorsqu’ils se déconnectent de votre application.
Tout utilisateur 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 fermer correctement Intercom lorsque la session d’un user sur votre application se termine (via une déconnexion manuelle ou automatique).
Important :
Vous pouvez identifier les users avec soit un user_id soit une adresse e-mail.
Si vous envoyez un user_id et une adresse e-mail, le user_id aura la priorité pour identifier vos users.
Si vous choisissez d’utiliser user_id, l’adresse e-mail peut toujours être utilisée pour identifier vos users dans Intercom, donc nous recommandons d’activer la vérification d’identité.
Vous pouvez aussi envoyer à Intercom des attributs personnalisés sur vos users.
Si vous utilisez le CSS
zoomsur votre page web, assurez-vous que les widgets d’Intercom ne le reçoivent pas.Passez toujours
user_id,emailetuser_hashdynamiquement depuis votre serveur pour l’utilisateur actuellement connecté — ne codez jamais en dur ni ne mettez en cache l’identité d’un seul user dans l’extrait. Si un visiteur est déconnecté, omettez complètement ces champs pour qu’il soit suivi comme visiteur anonyme plutôt qu’identifié comme un autre user.
Options d’apparence
La première option vous permet de choisir si vous souhaitez afficher ou masquer le messenger pour le public de votre site avant son lancement. Sinon, il est affiché par défaut.
La deuxième option renvoie aux Paramètres du Messenger, où vous pouvez changer les couleurs et le thème du messenger.
Vérifiez l’installation
Vous pouvez vérifier que l’installation a réussi en cliquant sur Vérifier l’installation. Ce bouton affiche une notification de succès si le Messenger a été trouvé avec succès ou indique si un problème est survenu.
Si vous avez installé le Messenger Intercom et qu’il n’apparaît pas correctement, voici quelques solutions courantes. Le dépannage inclut aussi la vérification des restrictions du navigateur comme les bloqueurs de publicité ou la navigation privée qui peuvent bloquer le Messenger ainsi que l’évitement des domaines à suffixe public pour assurer une bonne visibilité.
Continuez maintenant à l’étape suivante du processus d’installation et sécurisez votre messenger avec des JWTs.
Note : Sans la sécurité du Messenger, vos users ne verront que les 14 derniers jours d’historique de conversation dans le Messenger. En savoir plus →
Apprenez à :
Installation d’Intercom pour un client
Si vous n’avez pas accès à l’espace de travail Intercom, vous pouvez récupérer le code JavaScript ici 👇 Vous devrez remplacer manuellement WORKSPACE_ID par l’identifiant unique d’espace de travail de votre compte Intercom.
<script>
var APP_ID = "WORKSPACE_ID"; // Replace this with your workspace ID
window.intercomSettings = {
app_id: APP_ID,
name: "Jane Doe", // Full name
email: "customer@example.com", // Email address
created_at: 1312182000 // Signup date as a Unix timestamp
};
</script>
<script>(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);}}})();</script>
La valeur de created_at doit être la date à laquelle un client s’est inscrit à votre application, site ou service, envoyée sous forme de timestamp Unix.
Installation d’Intercom pour des espaces de travail hébergés en UE et AU
Pour installer Intercom si vous utilisez notre hébergement UE ou AU, vous devrez fournir un paramètre supplémentaire api_base. Les valeurs sont listées dans le tableau ci-dessous.
Région d’hébergement des données | Valeur |
États-Unis (US) | |
Union européenne (UE) | |
Australie (AU) |
Installer Intercom dans un environnement de bureau
Il est techniquement possible d’inclure Intercom dans une application de bureau, cependant, nous ne supportons pas officiellement les environnements de bureau. Le Messenger Intercom a été conçu et développé pour fonctionner dans un environnement web (liste des navigateurs supportés). Ces environnements web supportent des fonctionnalités spécifiques dont notre Messenger dépend (par exemple Javascript et CSS).
Electron et des technologies similaires vous permettent de créer des applications de bureau utilisant la technologie web, et il est possible d’installer Intercom dans ce type d’applications - il existe même des bibliothèques communautaires pour aider à installer Intercom dans les environnements Electron, cependant, ce n’est pas quelque chose que nous supportons officiellement.