Comment ajouter un ChatBot Messenger dans votre site WordPress ?

Comment ajouter un ChatBot Messenger dans votre site WordPress ?

Partagez cet article
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Voici ce que nous avons reçu cette nuit dans notre boîte mail !

Messenger nous permet enfin de pouvoir insérer dans notre site-web un ChatBot développé au départ pour Messenger et profiter de toute l’experience que fournit Messenger (boutons, réponses rapides, images, videos, …).

La documentation officielle se trouve ici : https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin et le plugin est toujours en Bêta. Certaines fonctionnalités peuvent alors varier.

 

As requested, we wanted to let you know that the customer chat plugin is now available globally in open beta for use on your website. You can find information on how to implement it in our developer documentation. We’ve also put together a blog post with some quick implementation tips to help you get started.

 

The Messenger customer chat plugin is a seamless way for businesses and people to communicate with one another anytime, anywhere. Unlike traditional web-based chat, people can continue a conversation from website to Messenger and vice versa, allowing for a better overall experience at a pace that works for everyone. Customer chat also allows businesses to utilize many of the benefits of the Messenger Platform, so businesses can incorporate automation, NLP, rich media and more into their website experience.

 

Comment insérer ce plugin Messenger dans notre site-web développé avec WordPress ?

Tout d’abord, vous allez avoir besoin de plusieurs informations : Votre Page ID (la page où est hébergé votre ChatBot Messenger) et votre App ID (l’application Facebook qui vous permet de developper le ChatBot Messenger?

Comment récupérer son Identifiant de page Facebook ?

Dirigez-vous sur Facebook et recherchez votre page Facebook. Dans cet exemple, j’utilise Facebook Business Manager pour gérer mes pages mais la procédure est exactement la même.

Dans le menu de gauche, cliquez sur l’onglet A propos et recherchez l’ID de votre page comme indiqué sur la photo suivante. Notez de côté cet identifiant pour la suite de la procédure.

Comment récuperer son App ID Facebook ?

Dirigez-vous vers https://www.developers.facebook.com et cliquez sur le nom de votre Application liée à votre ChatBot (en haut à droite).

Une fois arrivé sur le Tableau de bord, notez votre identifiant d’application comme indiqué à l’endroit indiqué sur la photo suivante :

Maintenant, il ne vous reste plus qu’à signifier à Facebook que vous souhaitez mettre ce Chatbot sur votre site-web et lui indiquer que vous êtes le propriétaire de ce site-web. Pour cela, vous devez whitelister votre nom de domaine.

Comment Whitelister mon nom de domaine ?

Retournez sur votre Page Facebook. Cliquez sur Paramètres (en haut à droite) puis dans le menu de gauche sur l’onglet Plate-forme Messenger.

Ajoutez ensuite dans la partie Whitelisted Domains l’URL complet de  votre site-web sur lequel vous souhaitez installer ce plugin.

Sauvegardez et c’est terminé !

La dernière étape consiste maintenant à ajouter les quelques lignes de code nécessaires à l’activation de ce plugin Messenger depuis votre site-web WordPress.

Comment activer le plugin Messenger sur mon site-web WordPress ?

Dirigez-vous sur votre interface WordPress et connectez-vous en tant qu’administrateur. Dans le menu de gauche, cliquez sur Apparence puis sur Editeur.

Attention : Les modifications que vous allez effectuer par la suite peuvent causer de grâve dommages à votre site-web en cas de fausses manipulations. Effectuez ces modifications avec précautions !

Recherchez dans votre thème wordpress la page functions.php ! C’est elle que vous allez modifier.

Dirigez vous tout en bas de celle-ci et copiez-collez ce code :

if (!function_exists('fb_sdk')) {
function fb_sdk() {
echo '< script>window.fbAsyncInit=function(){
FB.init({
appId: "XXXXXXXX",
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>';

N’oubliez pas de remplacer XXXXXXX par l’ID de votre APP Facebook que vous avez noté précédemment.

Maintenant, dirigez-vous vers vers la page où vous souhaitez ajouter ce plugin (le plus souvent, ce sera la page d’accueil de votre site-web) et ajoutez ce code entre les balises HTML <body> et </body>

<div class=”fb-customerchat”
      page_id=”XXXXXXXXXXX”
      minimized=”true”
</div>

N’oubliez pas de remplacer XXXXXXXX par l’ID de votre page Facebook que vous avez noté précédemment.

 

C’est terminé, testez directement en vous dirigeant vers la page où vous venez de rajouter ce morceau de code et vérifiez que tout fonctionne.

Pour de plus amples informations, dirigez-vous vers la documentation officielle ici : https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

Mathieu DUBOY

Partagez cet article
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
No Comments

Post A Comment