Tuto : comment ajouter le “Plugin Customer Chat” de Messenger à votre site

Facebook vient de lancer officiellement sur sa plateforme Messenger, la version bêta de son “Plugin Customer Chat” : un plugin à ajouter sur votre site internet pour permettre à vos visiteurs de discuter avec vous via une conversation Messenger.

Ce plugin natif de Facebook, adapté sur desktop, mobile et tablette, et proposé en « cross device ». Concrètement, le “Customer Chat” charge automatiquement l’historique de discussion récent entre la personne et votre entreprise, ce qui vous permet de poursuivre la conversation, même si le visiteur quitte votre site web.

 

Objectifs de ce plugin :

Ce plugin à de nombreux objectifs et avantages, que ce soit pour Facebook, une entreprise, ou un consommateur.

Pour une entreprise :

  • Construire sa relation client : ce plugin va permettre de pouvoir répondre en direct aux questions et demandes des visiteurs de son site internet, d’entamer une conversation et un dialogue, qui pourra se poursuivre au delà de la simple visite d’une page web.
  • Construire une audience publicitaire : en effet, Facebook vous permet de créer des audiences personnalisées de toutes les personnes ayant interagit avec votre entreprise sur Messenger. Plus vous aurez de conversations sur Messenger avec des prospects et clients, plus votre audience publicitaire correspondante sera importante. Une audience que vous pourrez utiliser notamment pour faire du reciblage publicitaire.

Pour un visiteur / consommateur :

  • Poser des questions : ce plugin peut permettre aux visiteurs d’un site ou aux consommateurs d’une marque de poser leurs questions, d’obtenir des réponses plus rapidement qu’en passant par un système d’e-mail. Cela suggère bien sûr que l’entreprise en question est réactive sur Facebook et Messenger

Pour Facebook :

  • Installer encore un peu plus sa plateforme de Messagerie au coeur de la relation client entre entreprises et consommateurs
  • Collecter toujours plus de data pour ses outils publicitaires, c’est le jeu !

 

Dans ce nouveau tutoriel, je vais vous expliquer comment ajouter et configurer, étape par étape, ce plugin sur votre site internet.

Avant de commencer : 

Notez que le plugin “Customer Chat” fonctionne sur ordinateur et appareil mobile, sauf dans les cas suivants :

  • Internet Explorer
  • Navigateurs intégrés aux applications sur mobile

Pour le moment, ce plugin prend en charge les types de message et les modèles de messages structurés suivants :

 

Comment ajouter le “Plugin Customer Chat” de Messenger à votre site
Étape #1 : ajouter votre nom de domaine en liste blanche sur Facebook

Pour pouvoir utiliser ce plugin, vous devez au préalable ajouter votre site à la Whitelisted Domains” de votre page Facebook.

Pour cela, rendez-vous sur votre page Facebook >> Paramètres >> Plate-forme Messenger  :

 

Puis faites défiler la page jusqu’à arriver à la section “Whitelisted Domains”. Ajoutez alors l’url complet de votre site puis cliquez sur “Save” :
Important : votre site doit absolument utiliser le protocole HTTPS pour pouvoir être ajouté.

Nb :  si vous souhaitez vérifier complétement votre nom de domaine sur Facebook, pour notamment pouvoir à nouveau modifier les titres et descriptions de vos liens partagés sur Facebook, la procédure complète via le Business Manager est expliquée dans notre article :

Comment éditer un lien pour vos publications Facebook

 

Étape #2 : créer une nouvelle application Facebook Developers

Pas de panique, rien de bien compliqué.

Rendez-vous sur https://developers.facebook.com puis cliquez en haut à droite sur “Mes Apps” >> “Ajouter une App” :

 

1. Donnez un nom à votre App puis cliquez sur “Créer un ID d’App”. Vous devrez juste valider un contrôle de sécurité.

 

Dans le panneau de configuration de votre App, choisissez “Messenger” et cliquez sur “Configurer” :

 

 

 

2. Une fois sur votre App, allez à la section “Génération de Tokens” :

Sélectionnez la page Facebook que vous souhaitez associer à votre App et autoriser Facebook à accéder à vos infos pour générer un nouveau token :

 

3. Récupérez l’ID de votre application qui se trouve en haut de la page :

 

 

Étape #3 : Chargez le SDK de Facebook sur votre site

L’ajout du SDK de Facebook est indispensable pour faire fonctionner n’importe quelle app Facebook sur votre site ou application mobile.

Le code ci-dessous doit être inséré directement après l’ouverture de la balise <body> sur chaque page sur laquelle vous souhaitez le charger, et donc charger votre application.  Suivant la manière dont votre site est développé, vous pourrez peut-être l’ajouter une seule fois sur votre site ou alors sur chaque page.

Voici le code (javascript) à ajouter sur votre site :

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : "your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/fr_FR/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

Ce code chargera et initialisera le SDK. Vous devez remplacer la valeur dans your-app-id par l’identifiant de votre propre application Facebook récupérée à l’étape précédente.

Important : vous pouvez récupérer le code ci-dessus sur cette page pour éviter tout problème de formatage .
Par défaut, la variable js.src = “https://connect.facebook.net/en_US/sdk.js” est en anglais, mais vous pouvez la replacer par fr_FR pour la France si vous souhaitez forcer la langue française.
À noter que Facebook doit normalement traduire automatiquement le plugin dans la langue configurée par chaque utilisateur Facebook.

 

Étape #4 : ajouter le plugin “Customer Chat” ou vous le souhaitez sur votre site

Il ne vous reste maintenant plus qu’à ajouter le plugin en lui même sur votre site internet, à l’endroit où vous le souhaitez.

Voici le code à ajouter à votre site (dans le footer de votre site ou dans un Widget WordPress par exemple) :

<div class="fb-customerchat"
 page_id="<PAGE_ID>"
 ref="<OPTIONAL_WEBHOOK_PARAM>"
 minimized="<true|false>">
</div>

 Vous devez remplacer la variable <PAGE_ID> par l’ID de votre page Facebook.

Pour retrouver, rendez-vous dans la section “À propos” de votre page Facebook :

Étape #5 : configurez les messages de bienvenue

Si vous ne l’avez pas encore fait, sachez que vous pouvez paramétrer des messages de bienvenue personnalisés ainsi que des réponses automatiques sur Messenger. Ces messages seront visibles pour toutes personnes qui vous contacte via votre page Facebook ou via ce plug-in.

Pour configurer ces messages, rendez-vous sur votre page Facebook >> Paramètres >> Messagerie >> Assistant de réponse

À vous de jouer !

David
David
Bonjour ! Je suis David Flechet, passionné par le pouvoir des réseaux sociaux et comment ils transforment notre manière de communiquer, de nous connecter, et de faire des affaires. Avec plus d'une décennie d'expérience dans le domaine du marketing digital, j'ai eu l'opportunité de travailler avec une variété de marques et d'entreprises, aidant à maximiser leur présence en ligne et à engager leur audience de manière significative.