Comment ajouter le chat Messenger de Facebook sur votre boutique

Découvrez tous les autres avantages de Google Tag Manager (disponible à partir du forfait Or) dans cet article.

Ajouter le chat Facebook Messenger sur son site web grâce à Google Tag Manager

1ère étape : Ajouter le plugin « Customer Chat » sur votre page Facebook

1. Direction le site developers.facebook.com puis cliquez sur « Mes applications » puis sur « Ajouter une application »
  

2. Donnez un nom à votre appli (« Chat Messenger » par exemple), modifiez votre adresse mail de contact (si vous le souhaitez) puis cliquez sur « Créer un ID d’app ».
Passez simplement le contrôle de sécurité juste après cette étape.
 

3. Sur la nouvelle page, copiez l’ID App et collez-le sur un document de façon à l’utiliser plus tard.
Une fois cela fait, cliquez sur le « + » à côté de « Produits » et cliquez sur « Configurer » à l’onglet Messenger.

4. Sélectionnez votre page Facebook à lier à l’appli Messenger et autorisez toutes les demandes qui suivent.

Voilà ! Vous venez d’ajouter votre appli « Customer Chat » sur votre page Facebook.

2ème étape : Personnaliser le chat Messenger et récupérer le code (script)

1. Sur votre page Facebook, cliquez sur « Paramètres » puis sur l’onglet « Plate-forme Messenger ».
Descendez cette page et cliquez sur « Configurer » à côté de « Plug-in de discussion client ».

2. Une fenêtre s’ouvre, vous informant que vous allez configurer Messenger pour votre site web.
A la première étape, vous devez : choisir votre langue par défaut et configurer votre message d’accueil (en cliquant sur Modifier).
Puis cliquez sur Suivant.

3. Dans la 2ème étape, choisissez le sous-titre qui arrivera sous votre nom de page.
Choisissez également la couleur de votre chat. Vous pouvez choisir parmi la dizaine de couleurs proposées ou écrire vous-même votre code couleur avec le « # ».

4. Dans la 3ème étape, ajoutez l’adresse de votre boutique en ligne avec les « https:// » et cliquez sur « Enregistrer ».
Copiez le code dans l’encadré de droite en cliquant simplement dessus (et sauvez le quelque part, nous en aurons besoin par la suite).
Puis cliquez sur « Terminé » pour fermer cette fenêtre.

3ème étape : Ajouter Facebook Messenger sur votre boutique en ligne avec Google Tag Manager

Tout d’abord, assurez-vous que votre compte Google Tag Manager est lié à votre boutique en ligne (Aide ici).

1. Afin d’ajouter votre chat, on va devoir ajouter deux balises HTML personnalisé.
Connectez-vous à votre compte https://tagmanager.google.com
Sur votre espace de travail, cliquez sur « Ajouter une balise ».
Vous pouvez renommer votre balise « SDK Facebook » par ex.

2. Cliquez sur l’encadré « Configuration de la balise » et choisissez « HTML personnalisé ».

3. Dans l’encadré HTML, copiez-collez le code ci-dessous en changeant l’AppID avec l’ID de votre app que vous avez sauvé dans la 1ère étape.

<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘Code de votre app à 15 chiffres‘,
autoLogAppEvents : true,
xfbml : true,
version : ‘v3.2’
});
};
(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/en_US/sdk/xfbml.customerchat.js »;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>

4. Choisissez ensuite en déclencheur « All pages ».
Voici le rendu final que vous devez avoir (avec votre appID).
Et cliquez sur le bouton bleu « Enregistrer ».

5. Votre balise SDK Facebook est enregistré, maintenant refaites les étapes pour ajouter la balise de votre chat. Voici le code html qu’il faut ajouter :

<script>
(function() {
var page_id = ‘Votre page ID‘;
var ref = »;
var theme_color = ‘#votre code couleur‘;
var logged_in_greeting = ‘Votre texte de bienvenue‘;
var logged_out_greeting = ‘Votre texte de bienvenue‘;

var el = document.createElement(‘div’);
el.className = ‘fb-customerchat’;
el.setAttribute(‘page_id’, page_id);
if (ref.length) { el.setAttribute(‘ref’, ref); }
el.setAttribute(‘theme_color’, theme_color);
el.setAttribute(‘logged_in_greeting’, logged_in_greeting);
el.setAttribute(‘logged_out_greeting’, logged_out_greeting);
document.body.appendChild(el);
})();
</script>

Avec le code enregistré dans la 2ème partie de cet article vous trouverez les 4 informations à changer en gras (page ID, theme color, logged in et out).Voici un exemple de rendu final :

6. Une fois, vos deux balises enregistrées, vous pouvez les envoyer dans votre boutique, pour cela cliquez sur le bouton « Envoyer ».

7. Donnez un nom à votre « envoi » et cliquez sur « Publier ».

Et c’est fait !

Votre chat Messenger est en ligne sur votre boutique web.

(Si vous ne le voyez pas tout de suite, videz votre cache navigateur afin qu’il apparaisse).