Como instalar o Customer Chat Plugin do Facebook no seu site

Como instalar o Customer Chat Plugin do Facebook no seu site

Apoiar nas estatísticas

Atualizado: Outubro 2019


O Facebook permite que o seu website tenha um widget de Chat do Messenger.

Clique aqui para saltar para as instruções se não quiser ler este texto introdutório.

Se não tem um live chat no seu site, mas tem uma Página Facebook, pode ter um web chat sem custo e quase sem esforço.

1. O seu site está em WordPress? Clique aqui para ver as instruções em como instalar rapidamente no seu site WordPress.

2. Usa o ManyChat e quer instalar isto facilmente no seu site? Clique aqui para saber como instalar a janela do Messenger em qualquer tipo de site.

Com 1.3 biliões de pessoas a usar o Facebook Messenger e uma integração bem fácil entre a sua página Facebook e o seu site, esta é uma solução espetacular para falar com os seus visitantes.

Exemplo Chat Messenger widget

Este Chat do Messenger é diferente

O Customer Chat Plugin do Facebook é diferente das soluções de chat que existem por aí, porque não é anónimo.

As pessoas que usam este plugin têm de ter sessão iniciada no Facebook, e o perfil delas, juntamente com o nome, é visível para si. Assim você sabe com quem está a falar, o que é bem diferente das soluções de chat, em que teria de pedir o nome à pessoa para saber com quem está a falar.

Exemplo de Customer Chat Plugin

Outra característica do Messenger Chat é que a conversa aparece também na app do Messenger do visitante, para que eles possam continuar a conversa mesmo que tenham saído do seu website.

Isto é bom porque se precisar de tempo para responder à pessoa, não tem de se preocupar em perder aquele contacto mesmo que o utilizador saia do seu site.

Como colocar Customer Chat no seu site

Para colocar o plugin de chat Messenger do Facebook no seu site, precisa do seguinte:

  1. Saber ID da sua página Facebook
  2. Adicionar o seu domínio à whitelist
  3. Criar uma app
  4. Editar código do plugin do chat
  5. Colocar este código no seu site

1. Saber ID da sua página

Para encontrar o ID (é um número) da sua página:

  • Vá à sua Página Facebook
  • Clique no separador Sobre
  • Faça scroll até encontrar o seu Page ID

Facebook ID página Sobre

2. Adicionar o seu site à whitelist

Adicione o seu domínio à “lista branca”, para mostrar ao Facebook que este website onde irá aparecer o chat está associado à sua Página.

  • Vá à sua Página
  • Clique em Definições (canto superior direito)
  • Clique em Plataforma do Messenger
  • Adicione o seu domínio e clique em Save

Adicionar domínio à lista de domínios segura

3. Criar uma app Facebook

Isto não envolve código nenhum. É fácil. Só precisa clicar nuns botões para poder copiar o número da aplicação para o colar no código do passo seguinte.

  • Vá a developers.facebook.com (se ainda não tem conta clique em Register e aceite os termos do Facebook)
  • Clique em Create a New App
  • Escreva nome da app e email
  • Clique em Create App ID

Criar app ID

Depois de o fazer irá para a página da app. No canto superior esquerdo irá ver um número. Esse é o n.º da app. É só disto que precisa. Vai copiar e colar isto no próximo passo.

4. Edite o código do Costumer Chat

Este é o código oficial do Customer Chat Plugin do Facebook. Antes de colocar isto no seu site, só tem de editar algumas linhas.

<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/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  jQuery('body').append('<div class="fb-customerchat" page_id="YOUR-PAGE-ID" theme_color="A-SUA-COR" logged_in_greeting="A-SUA-MENSAGEM-BOASVINDAS" logged_out_greeting="A-SUA-MENSAGEM-BOASVINDAS" minimized="true"></div>');

</script>
  • Linha 4: substitua YOUR-APP-ID pelo número da sua app que criou no passo 3.
  • Linha 15: substitua en_US para pt_PT, que significa Português de Portugal.
  • Linha 19: substitua YOUR-PAGE-ID pelo ID da sua página no passo 1.
  • Linha 19: substitua A-SUA-COR pela sua cor preferida (ou de acordo com a sua marca/logótipo). Veja aqui para selecionar uma cor em formato Hex (6 números).
  • Linha 19: substitua A-SUA-MENSAGEM-BOASVINDAS com o texto inicial que os utilizadores irão ver (com sessão iniciada ou não, aconselho ter as 2 mensagens iguais).
  • Linha 19 (opcional): se quer que o seu chat abra automaticamente para o visitante, escreva true, se não, escreva false.

Eis o exemplo que eu uso no meu website, e que instalei via Google Tag Manager.

Não copie este código. Isto é o meu exemplo. Se copiar e colocar no seu site as mensagens virão para mim (e você não quer isso pois não).

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1678638095724206',
      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_PT/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
 
  jQuery('body').append('<div class="fb-customerchat" page_id="1788914828052330" theme_color="#ee4250" logged_in_greeting="Olá :) Precisa de ajuda em anúncios Facebook?" logged_out_greeting="Olá :) Precisa de ajuda em anúncios Facebook?" minimized="true"> </div>');
 
 
</script>

Vamos mais uma vez perceber o que cada um dos atributos significa:

  • page_id é o número de identificação da sua página;
  • theme_color é a cor em formato 6 números que pode escolher aqui;
  • logged_in_greeting é o texto de boas vindas para utilizadores com sessão iniciada;
  • logged_out_greeting é o texo de boas vindas para utilizadores com sessão terminada (aconselho os dois serem iguais);
  • minimized é se a janela aparece toda (com o texto e botão) ou minimizada (só o ícone).

Ao ter um texto personalizado e a cor da sua marca vai dar uma boa experiência aos utilizadores.

Nota: A cor é em formato hex (6 números). Para encontrar uma cor nesse formato, clique aqui, e nesse site procure por uma cor que goste, ou que seja a cor da sua marca ou logótipo.

5. Coloque o código no seu site

Após ter feito as edições que lhe mostrei no passo 4, pode agora copiar e colar este código no seu site.

Se o seu site estiver montado em WordPress, veja as instruções aqui. De qualquer forma, aconselho a instalar via Google Tag Manager:

  • Crie uma nova Etiqueta de HTML personalizada
  • Cole o código aqui
  • Para o acionador selecione All Pages (ou páginas individuais)
  • Clique em Guardar e depois em Publicar para efetivar as mudanças

Google Tag Manager Chat do Messenger

Está feito

Não foi complicado pois não? A partir de agora o chat do Messenger irá aparecer no seu site tanto em PC de secretária como em dispositivos móveis.


Ao teu sucesso,
assinatura-joao-78x50-nenhuma
João Alexandre
Estratega Digital

Marketing Digital sem espinhas

Deixe um comentário