Ajouter chat Messenger comme la tranchée

Bonjour à tous,

J’espère que vous allez bien ! :slight_smile:

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 ! :wink:

@Maxime2 Olivier l’a programmé, mais il y a des plugin wordpress pour le faire

https://srd.wordpress.org/plugins/search.php?q=messenger

3 « J'aime »

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. :frowning:

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 :slight_smile:

1 « J'aime »

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>
5 « J'aime »

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 :slight_smile:

@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.

j'installe le plugin de page facebook ça se convertit en j'aime

Code pour le haut du body ou le head section si tu veux pouvoir installer le snippet sur n'importe quelle page. Tu dois remplacer le numero d'identification facebook dans le script par le tien le mien ici commence par 7386....
Comme tu peux le constater, le premier script est invisible tu pouras récupérer le tien sur la page

Tu peux te faire configurer et ajuster les dimensions sur cette page:

https://developers.facebook.com/docs/plugins/page-plugin

configures les dimensions que tu veux en pixels et ce qu tu veux comme données

Dans l'option tabs ou il est marqué **timeline,** tu écfris messages pour avoir l'onglet messages ya 3 options **timelin, events et messages,** tu peux mettre les 3. une fois configuré tu fais get code. Moi je fais une petite boite 70pxx300px juste messages et je la plave dans un div> pour la positionner. Dans ce cas ci les restrictions je script me permettent pas de l'essayer ici et te le montrer, ça post juste un lien au lieu de la boite.

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.

Si tu examines la partie du bas du script, c'est dans ce dernier qu'il y a les dimensions et les options de banière et de visages si tu lis comme il faut tu peux aussi la changer manuellement.

Sciptes pour installet facebook page plugin en mode messages.

Essayez de cliquer droit sur les cases grises en bas vous aurez peut être les lens je ne sais pas au mois ya l'image faut changer l'id de facebook et les URL. >
> ```
Affiliate Subverts
```

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 ! :wink:

Ou quelqu’un d’autres d’ailleurs ahah !

@Olivier_Lambert et @Maxime-C

j’ai pas encore cherché mais j’ai eu le même problème en essayant de prendre le code d’Olivier

1 « J'aime »

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 :slight_smile:

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 :wink:

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… :wink:

1 « J'aime »

Salut Maxime!

Le sujet de conversation que tu as lu date un peu :stuck_out_tongue:

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 :disappointed_relieved: 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/