Instalando o chat do Messenger no seu site ou blog

Recentemente o Facebook disponibilizou o Bate-bapo do Messenger, no qual possibilita o uso em seu site ou blog transformando um contato mais próximo com seus clientes e parceiros. Se você  gostou desta ideia, então não deixe de conferir nosso tutorial de como instalar ele. Vamos lá.

Passo 1 – Para colocar o chat do Messenger em seu site primeiro teremos que saber o ID de sua página no Facebook.
Para isso abra sua página do Facebook >> Clique no item Sobre >> Localize o ID como mostrado abaixo:

Passo 2 – Você deve adicionar o seu domínio que irá ter o chat a lista branca de autorizado em sua página no Facebook. Para isso novamente esteja em sua página >> Clique em Configurações (canto superior direito) >> Plataforma do Messenger  >> Adicione seu domínio na lista como mostrado abaixo:

Passo 3 – O próximo passo é criar um app Facebook, para isso vá até o developer.facebook.com se não tiver uma conta será necessário se registrar e aceitar os termos do Facebook. Depois clique em Adicionar um novo aplicativo >> Dê um nome ao app, coloque o e-mail e clique em Criar um número de identificação do aplicativo.

Após criar, na página do App. No canto superior esquerdo terá um ID, é o numero do App que acabamos de criar, pegue este ID e anote-o.

Passo 4 – Vamos editar o código do chat Messenger com as devidas informações com o seguinte:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'YOUR-APP-ID',
      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/pt_BR/sdk/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
 
  jQuery('body').append('<div class="fb-customerchat" page_id="YOUR-PAGE-ID" minimized="false"> </div>');
 
</script>

Localize a linha 4 e mude o YOUR-APP-ID pelo ID que anotou no passo 3

Localize a linha 19 e coloque no lugar de YOUR-PAGE-ID pelo numero ID da sua pagina que fizemos lá no passo 1, ainda na linha 19 é opcional se desejar que o chat inicie aberto mude onde está: false para true

Passo 5 – Coloque o código HTML no site ou blog, aconselhamos o uso do Google Tag Manager para isso, você poderá criar um nova etiqueta HTML personalizada >> depois colar o código >> Selecionar o acionar como ALL (se quiser em todas as páginas) >> Clique em Guardar e Publicar, ou poderá insera este código edite o código antes da tag </body> de seu website.

Caso queira seguir a documentação do Chat Messenger, não deixe de ver o seguinte link: Facebook Delevopers

Pronto, seu chat foi instalado com sucesso. Até a próxima e esperamos que este tutorial tenha sido util, caso tenha gostado compartilhe com seus amigos.

Compartilhar é se importar!