Si vous cherchiez des moyens d’intégrer une application de chat en direct à votre site Web il y a quelques années, vous deviez probablement installer un plugin volumineux et compliqué ou même une application dédiée qui serait un casse-tête à utiliser.
Il existe désormais une alternative intelligente aux applications de chat en direct – vous pouvez intégrer Facebook Messenger à votre site WordPress. Et vous pouvez le faire vous-même en moins de 5 minutes !
Il y a cependant une exigence. Afin d’avoir un chat Facebook Messenger sur votre site web, vous devez avoir une sorte de page Facebook. Pourquoi ? Parce que l’utilisation la plus courante d’un chat sur un site web est de permettre aux clients de communiquer plus facilement avec votre entreprise. Vous avez donc probablement déjà une page Facebook pour votre entreprise de toute façon.
Comment intégrer le chat Messenger à un site WordPress
Première étape – préparer votre site WordPress
La première chose dont vous avez besoin si vous voulez ajouter le chat Messenger à votre site, est d’aller dans Apparence >> Éditeur de thème, et d’ouvrir le fichier de fonctions du thème – functions.php. Voici l’exemple de ce que vous verrez (cela peut varier en fonction du thème WordPress que vous utilisez) :
Faites défiler jusqu’au bas du fichier, et ajoutez ce code à la fin du fichier :
function fb_chat_code() {
}
add_action('wp_body_open', 'fb_chat_code');Cliquez ensuite sur Mettre à jour le fichier pour qu’il ressemble à ceci :
Deuxième étape – générer le code de chat Messenger dans Facebook
Allez sur le site Web de Facebook, et ouvrez votre page Facebook – celle à laquelle vous voulez associer votre site Web. Si vous êtes défini comme administrateur de la page, vous verrez un menu d’administration sur la gauche. Cliquez sur Paramètres.
Étape suivante – sélectionnez Messagerie sur la gauche, et faites défiler jusqu’à la section Ajouter Messenger à votre site web. Cliquez sur Get Started.
Maintenant vous verrez un assistant qui vous guidera à travers les paramètres du chat Messenger. Vous pouvez choisir la langue de la messagerie, modifier le message d’accueil, autoriser ou non la discussion avec les invités. Lorsque vous avez terminé, cliquez sur Suivant.
Étape suivante – vous pouvez modifier la couleur par défaut de la fenêtre Messenger pour l’adapter à la palette de couleurs de votre site Web. Si vous en avez besoin, faites le changement, et cliquez sur Next.
Après avoir fait cela, entrez l’adresse URL de votre site web (y compris http… ) dans le coin supérieur gauche de la fenêtre. Cela permettra d’utiliser Messenger uniquement sur votre site web spécifié, de sorte que personne ne puisse copier et utiliser le même code sur d’autres sites. Cliquez sur Enregistrer.
L’étape finale – cliquez sur la fenêtre des extraits de code à droite, et copiez le code Messenger. Vous devrez l’ajouter à votre site web WordPress. Puis cliquez sur Terminer.
Troisième et dernière étape – ajouter le code du chat Messenger à WordPress
Maintenant, vous devez retourner sur votre site web WordPress. Cliquez sur Apparence >> Éditeur de thème, et ouvrez à nouveau le fichier functions.php. Faites défiler jusqu’au bas du fichier où vous avez précédemment ajouté une fonction, et faites ce changement :
function fb_chat_code() {
echo " PUT MESSENGER CODE BETWEEN THESE DOUBLEQUOTES ";
}
add_action('wp_body_open', 'fb_chat_code');Puisque nous utilisons des guillemets dans notre fonction (« ), et que le code de Messenger utilise également des guillemets, nous devons ajouter des antislashs ( ) entre chaque guillemet dans le code de Messenger (6 endroits).
Voici à quoi devrait ressembler le code final (les 6 barres obliques inverses sont marquées en vert dans l’exemple) :
Après avoir collé le code Messenger et ajouté les barres obliques inversées, cliquez sur le bouton Update File. Si tout va bien, vous verrez un message de réussite :
Résultat final
Si toutes les étapes ont été complétées avec succès, le chat Messenger apparaîtra sur chaque page de votre site WordPress. Voici un exemple de ce à quoi cela ressemblerait sur ce site web :
