Bonjour à tous,
J’espère que vous allez bien ! 
Je souhaitais savoir si l’un de vous saurais m’expliquer comment intégrer le petit bouton messenger comme c’est justement le cas sur le site de La Tranchée, je trouve le concept super sympa et cela permet d’avoir un chat connu de tous et du coup plus facilement accessible.
Le site développé est sous Wordpress.
Bonne journée à vous ! 
@Maxime2 Olivier l’a programmé, mais il y a des plugin wordpress pour le faire
Yeah, merci pour ce lien déjà,
C’est vrai que j’aurais préféré le faire à la main aussi, enfaite j’arrive à insérer l’icone avec le HTML / CSS, c’est le clic sur l’icone qui ouvre la boite de dialogue que je n’arrive pas à faire. J’imagine que c’est du JavaScript ? Que je ne maîtrise pas du tout ^^
J’ai testé certain des plugins…j’aurais du noter le noms. 
Il y en a 1 qui faisait disparaitre certaines de mes images et pas toujours le choix ou l’icone messenger apparait…mais l’avantage c’est que ça prend 2 minutes à installer et être fonctionnel.
Merci @Pascal_Cabana pour ton aide, je vais tester les plugins voir ce que ça donne et je mettrais ici lequel a été le plus effiace.
Si @Olivier_Lambert passe par ici, ce serait sympa d’avoir ton aide
Oui, c’est du Javasctipt!
Tu peux inspecter le code de mon site pour faire pareil.
Vite fait, voici le html, javascript et CSS que j’ai utilisé. Il manque peut-être quelques règles, mais ça devrait marcher:
<div class="messenger-icon pointer"></div>
<div class="messenger border-radius">
<div class="fb-page"
data-href="https://www.facebook.com/latranchee/"
data-tabs="messages"
data-width="250"
data-height="350"
data-small-header="true">
<div class="fb-xfbml-parse-ignore">
<blockquote></blockquote>
</div>
</div>
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '95100348886',
xfbml : true,
version : 'v2.6'
});
};
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$('.messenger-icon').click(function(){
if($('.messenger').hasClass("active")){
$('.messenger').animate({
opacity: 0,
bottom: 75
}, 300, function() {
$('.messenger').toggleClass("active");
});
} else {
$('.messenger').css({"bottom":"75px", "opacity":0}).animate({
opacity: 1,
bottom: 85
}, 300, function() {
$('.messenger').toggleClass("active");
});
}
});
$('html').click(function(event) {
if($('.messenger').hasClass("active")){
$('.messenger').animate({
opacity: 0,
bottom: 75
}, 300, function() {
$('.messenger').removeClass("active");
});
}
});
$('.messenger').click(function(event){
event.stopPropagation();
});
</script>
<style>
.messenger-icon:before{
content: "Chattez avec nous!";
background: #f6f6f6;
padding: 4px 11px;
border-radius: 3px;
position: absolute;
left: -180px;
width: auto;
top: 10px;
opacity: 0;
display: none;
opacity: 0;
box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
}
.messenger-icon:after{
opacity: 0;
content: "";
width: 0;
height: 0;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 9px solid #f6f6f6;
font-size: 0;
line-height: 0;
position: absolute;
left: -20px;
top: 18px;
display: none;
opacity: 0;
box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
}
.messenger-icon:hover, .messenger-icon:hover:after, .messenger-icon:hover:before{
opacity:1;
display: block;
}
.messenger-icon{
content:"";
background: url("https://www.latranchee.com/img/messenger.png");
background-size: cover;
height: 50px;
width: 50px;
position:fixed;
bottom:20px;
right:20px;
opacity:0.9;
transition: all ease-out .15s;
}
.messenger:after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-top:-1px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ffffff;
font-size: 0;
line-height: 0;
right: 25px;
}
.messenger.active{
z-index: 500;
}
.messenger{
z-index: -500;
position:fixed;
bottom:95px;
right:15px;
box-shadow: 0 15px 35px -10px rgba(0,0,0,.35);
opacity:0;
width:250px;
height: 350px;
}
</style>
Merci beaucoup @Olivier_Lambert ! Je préfère avoir le moins de plugin possible pour mon site Wordpress, je teste ça dans la journée
@Pascal_Cabana et aux autres que cela pourrait intéresser, j’ai personnellement préféré le plugin dévelopé par Zatabox : https://wordpress.org/plugins/fb-messenger-live-chat/
Pas mal d’options de personnalisations, il s’intègre assez bien sur le site, juste la version mobile qui est pas top étant donné que j’utilise une barre fixe pour mon lead magnet, la superposition rendait pas très bien.
Je ne sais pas comment intégrer du javascript et du html ici sans qu’il soit actif. Dans le script ici la partie du haut peut aussi aller dans le head (header.php_ comme ça il sera actif sur toutes les pages mais le haut du <body ouvrant est corect aussi tant que ça reste dans header.php.
Comment tu fais intégrer du script?
Salut @Olivier_Lambert, j’es^ère que tu vas bien !
Je reviens vers toi car j’ai toujours un soucis sur l’intégration de Messenger sur mon site.
Tout y est, ma boxe de message et mon icône. Cependant j’ai un problème, lorsque je clic sur mon icône la boxe ne s’ouvre pas, pourtant elle est bien présente.
C’est au niveau du JS que çà doit planter, mais c’est vraiment pas mon langage de prédilection. Je te mets le lien de mon site : https://www.divitheque.fr/produit/experts-seo/ si tu peux aller jeter un coup d’œil en inspectant l’élément ce serait top !
Ou quelqu’un d’autres d’ailleurs ahah !
j’ai pas encore cherché mais j’ai eu le même problème en essayant de prendre le code d’Olivier
Ca doit se situer sur l’action lors du clic !
Salut Maxime!
J’ai été voir ton site web et je ne crois pas avoir vu mon code sur la page. La partie responsable de la gestion des clics est celle-ci:
$('.messenger-icon').click(function(){
if($('.messenger').hasClass("active")){
$('.messenger').animate({
opacity: 0,
bottom: 75
}, 300, function() {
$('.messenger').toggleClass("active");
});
} else {
$('.messenger').css({"bottom":"75px", "opacity":0}).animate({
opacity: 1,
bottom: 85
}, 300, function() {
$('.messenger').toggleClass("active");
});
}
});
$('html').click(function(event) {
if($('.messenger').hasClass("active")){
$('.messenger').animate({
opacity: 0,
bottom: 75
}, 300, function() {
$('.messenger').removeClass("active");
});
}
});
$('.messenger').click(function(event){
event.stopPropagation();
});
Pour ceux qui n’ont pas été capable d’insérer la boîte sur leur site, c’est important d’avoir le SDK de Facebook d’installé sur son site web!
On l’obtient ici:
https://developers.facebook.com/docs/plugins/page-plugin
Ça ressemble à ça:
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.8&appId=XXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Il faut remplacer le XXXXXXXX donc c’est important de prendre le code à partir de cette page.
Salut Oliver,
Merci de ta réponse, le script est pourtant bien intégré, mais la console me renvoie l’erreur suivante
Uncaught TypeError: $ is not a function
at script.js?ver=4.7.3:17
Donc apparement ça viendrait de la ligne suivante :$('.messenger-icon').click(function(){
Je continue de chercher de mon côté, si entre temps tu vois d’où vient le problème ce sera avec plaisr
Une fois le problème résolu je posterais la solution !
C’est parce que tu n’as pas jquery d’installé sur ton site on dirait bien!
Ajoutes-ça:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Si ça ne fonctionne pas, utilise ça à la place, c’est une version plus vieille de jQuery, mais c’est elle qui est installé sur mon site:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
@Maxime-C Est-ce que le code a fonctionner sur ton site?
@Maxime-C Je ne sais pas si c’est la meilleure façon de le faire, mais cette façon ne prend pas de plugin pour installer Messenger sur son WordPress…
Voici comment :
1- Sous l’onglet Paramètres de la page Facebook, cliques sur le sous-menu Plate-forme Messenger
2-Dans la section Plug-in de discussion client, cliques sur Configuration
3- Cliques sur Suivant
4- Sélectionnes la langue, le texte de salutation et cliques sur Suivant
5- Définis le délai de réponse et l’apparence
6- Whitelist tes domaines et copie le code fourni et clique sur Terminé
7- Dans ton Éditeur de thème, sur header.php, insères le code après le tag body et cliques sur Enregistrer
8- Ouvres ton site web et ça devrait marcher…
@Olivier_Lambert Je ne sais pas ce que tu en penses, c’est peut-être pas optimal, mais Facebook permet l’intégration de Messenger assez facilement depuis leur plateforme…
En espérant vous avoir aider un peu… 
Salut Maxime!
Le sujet de conversation que tu as lu date un peu 
On a eu le plugin de chat messenger longtemps avant qu’il sorte en hackant le plugin “Facebook Pages”! Le code que j’ai partagé ci-dessus servait à ça.
Maintenant, on utilise le code donné par ManyChat, mais ton intégration est toute aussi bonne!
Merci d’avoir bumpé le sujet avec des infos plus à jour!
Je viens de faire la procédure qui était super bien détaillée (merci d’ailleurs). Sauf que de mon côté ca ne fonctionne pas 
Quand la page charge, je le vois apparaître 1 seconde puis il disparaît… Est ce que quelque chose peut entrer en conflit avec le chat messenger?
Voici mon site (pas encore fini): https://aromatic.ca/
