L’installation du Messenger sur votre site prend seulement quelques minutes. Une fois installé, vous pourrez accueillir, intégrer et assister les clients jusqu’à ce qu’ils deviennent des users fidèles de votre application.
Les deux étapes requises 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.
Installation initiale du Messenger pour users sur le web
Allez d’abord sur Settings > Channels > Messenger > Install et choisissez Install for web.
Choisissez comment installer le Messenger
Sélectionnez la méthode d’installation souhaitée 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 lorsqu’elle est sélectionnée. Beaucoup offrent un package NPM pour faciliter l’installation.
Demandez de l’aide à votre développeur (optionnel)
Si nécessaire, vous pouvez demander à un coéquipier (par ex. un ingénieur) de compléter l’installation. Cliquez simplement sur Invite teammate.
Une fois que vous aurez saisi son adresse e‑mail, une invitation par e‑mail lui permettra de rejoindre l’espace de travail de votre équipe.
Le coéquipier invité recevra un lite seat sur les plans Advanced / Expert et un full seat sur les plans Essential. Il aura les autorisations 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é Code snippet, React, Angular, Vue, Ember ou Shopify comme méthode d’installation, vous pourrez choisir d’achever l’installation pour :
For users with logins - Installer le Messenger pour les users connectés. Le messenger affichera des informations comme les noms des clients et les conversations précédentes sur tous les appareils.
For website visitors without logins - Installer 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 users et visiteurs.
Vous devez ensuite « Enable connection to messenger ».
Important : Si ceci est désactivé, toutes les requêtes vers Intercom échoueront. Les API du Messenger ne sont pas activées par défaut. Comme vous pouvez le voir à la première visite de la page d’installation du Messenger, les exemples de code sont gris tant que vous n’activez pas ce bascule. Cela active les API du Messenger pour votre espace de travail et garantit qu’il commence à accepter du trafic. Vous devrez l’activer pour recevoir du trafic utilisateur.
Une fois votre Messenger configuré, nous recommandons aussi de le sécuriser avec des JWTs !
Installez Intercom via la méthode choisie
Suivez maintenant les instructions fournies pour la méthode 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 Code snippet, React, Angular, Vue ou Ember, un package NPM contenant un extrait de code à copier/colle vous sera fourni. Cet extrait est prérempli avec votre identifiant d’espace de travail unique, donc prêt à l’emploi.
Vous pouvez aussi trouver le package directement sur le site NPM.
Il existe plusieurs autres modèles 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 dans une application monopage ou utiliser la gem Rails pour l’installer. Pour les applications monopage (SPA), suivez le guide d’installation SPA pour gérer leur nature dynamique.
Cliquez sur Copy code et collez-le avant la balise </body> sur chaque page où vous voulez que le Messenger apparaisse dans votre app.
Puis modifiez le code pour envoyer à Intercom l’adresse e‑mail ou le user_id et la date d’inscription de l’utilisateur actuellement connecté.
Après avoir ajouté le code, ouvrez votre app et le Messenger apparaîtra.
Fermez les sessions utilisateur à la déconnexion
Assurez‑vous d’appeler aussi la méthode de shutdown d’Intercom pour effacer les conversations de vos clients lorsqu’ils se déconnectent de votre app.
Tout utilisateur qui utilise un ordinateur et un navigateur partagés avec quelqu’un d’autre pourra voir l’historique des conversations de l’utilisateur s’étant connecté le plus récemment jusqu’à l’expiration du cookie. Pour cette raison, il est très important de bien fermer Intercom lorsque la session d’un utilisateur se termine (par déconnexion manuelle ou automatique).
Important :
Vous pouvez identifier les users soit avec un user_id soit avec une adresse e‑mail.
Si vous envoyez un user_id et une adresse e‑mail, le user_id prendra 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, nous recommandons donc d’activer la vérification d’identité.
Vous pouvez aussi envoyer à Intercom des attributs personnalisés concernant vos users.
Si vous utilisez le CSS
zoomsur votre page, assurez‑vous que les widgets d’Intercom ne le reçoivent pas.Passez toujours dynamiquement
user_id,emailetuser_hashdepuis votre serveur pour l’utilisateur actuellement connecté — ne codez jamais en dur ou ne mettez en cache l’identité d’un seul user dans l’extrait. Si un visiteur est déconnecté, omettez entièrement ces champs afin 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 le 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érifier l’installation
Vous pouvez vérifier que l’installation a réussi en cliquant sur Check installation. Ce bouton affiche une notification de succès si le Messenger a été détecté avec succès ou indique si quelque chose a mal tourné.
Si vous avez installé le Messenger et qu’il n’apparaît pas correctement, voici quelques façons courantes de le corriger. Le dépannage inclut notamment la vérification des restrictions du navigateur comme les bloqueurs de publicités ou la navigation privée qui peuvent bloquer le Messenger, ainsi que l’évitement des domaines de suffixe public pour assurer une visibilité correcte.
Continuez maintenant à l’étape suivante du processus d’installation et sécurisez votre messenger avec des JWTs.
Remarque : Sans la sécurité du Messenger, vos users ne verront que leurs 14 derniers jours d’historique de conversation dans le Messenger. En savoir plus →
Apprenez à :
Installer Intercom pour un client
Si vous n’avez pas accès à l’espace Intercom, vous pouvez récupérer le code JavaScript ici 👇 Vous devrez remplacer manuellement WORKSPACE_ID par l’identifiant d’espace de travail unique pour 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 pour created_at doit être la date à laquelle un client s’est inscrit à votre application, site ou service, envoyée en tant que Unix timestamp.
Installer Intercom pour des espaces hébergés EU et AU
Pour installer Intercom si vous utilisez notre hébergement EU ou AU, vous devrez fournir un paramètre supplémentaire api_base. Les valeurs pour celui‑ci sont listées dans le tableau ci‑dessous.
Région d’hébergement des données | Valeur |
United States (US) | |
European Union (EU) | |
Australia (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 pour fonctionner dans un environnement web (liste des navigateurs pris en charge). Ces environnements web supportent des fonctionnalités spécifiques dont dépend notre Messenger (par ex. Javascript et CSS).
Electron et des technologies similaires permettent de créer des applications de bureau avec des technologies web, et il est possible d’installer Intercom dans ces types d’applications — il existe même des bibliothèques communautaires pour aider à installer Intercom dans les environnements Electron, toutefois, ce n’est pas quelque chose que nous supportons officiellement.