Como instalar o Customer Chat Plugin do Facebook no seu site WordPress

Como instalar o Customer Chat Plugin do Facebook no seu site WordPress

Utilizador pagina web

Atualizado: Outubro 2019


**Atualizado para 2018**

O Facebook lançou a funcionalidade do Messenger Customer Chat Plugin que permite às pessoas contactarem a sua Página diretamente a partir do seu site.

Neste artigo vou explicar como instalar o Customer Chat Plugin no seu site WordPress.

1. O seu site não está em WordPress? Clique aqui para ver as instruções em como instalar em qualquer tipo de site.

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.

Dá para instalar o Customer Chat Plugin com plugin e sem plugin:

  • Sem plugin: é menos prático mas não prejudica a velocidade do seu site.
  • Com plugin: é mais prático mas é mais um plugin a empanturrar o seu site.

Esteja descansado(a) que vou explicar tudo.


Como instalar sem plugin

Passo 1. Encontre o seu Facebook Page ID

Precisamos de saber o nosso Facebook Page ID.

Vá a este website e coloque o endereço da sua página: https://findmyfbid.com/

Encontrar ID de Página Facebook

Clique em “Find numeric ID” e irá saber o ID da sua página.

ID de página Facebook numero

Uma forma alternativa seria ir ao separador “Sobre” da sua Página Facebook, e cá em baixo estará o ID da sua página.

Facebook ID página Sobre

Passo 2. Whitelist o seu domínio

Adicione o seu domínio à lista de domínios permitida da sua Página Facebook.

Vá à sua Página Facebook > Definições > Plataforma do Messenger e faça scroll até encontrar Whitelisted Domains.

definições da página Facebook

Plataforma do Messenger definições

Escreva o domínio (ou domínios) que quer juntar à whitelist. É isto que vai permitir dizer ao Facebook que o Customer Chat pode aparecer no seu website.

Adicionar domínio à lista de domínios segura

Passo 3: Instale este código

No seu painel de controlo no WordPress, vá a Apresentação > Editor e encontre o ficheiro functions.php

Editor tema no WordPress functions

Vai colocar o código que lhe vou dar a seguir à etiqueta
<?php

Colocar código no functions.php

Coloque este código nesse espaço e substitua “ID_DA_SUA_PAGINA_AQUI” com o ID da sua página que encontrou no passo 1.

// Janela Messenger Chat
if ( ! function_exists('messenger_chat') ) {
    function messenger_chat() {
        echo '<div class="fb-customerchat" page_id="<ID_DA_SUA_PAGINA_AQUI>" minimized="false"></div>';
    }
}

// Facebook SDK oficial
if ( ! function_exists('fb_sdk') ) {
    function fb_sdk() {
        echo '<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/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));</script>';
    }
}

add_action('wp_footer', 'messenger_chat');
add_action('wp_footer', 'fb_sdk');

Eis como eu o coloquei.

Código no functions.php Janela Messenger Chat

Clique em Atualizar ficheiro. A janela do Messenger Chat fica ativa no seu site. Eis como aparece no meu.

**BÓNUS**

Quer personalizar a sua janela do Messenger como eu (a minha tem um texto de boas vindas e cores diferentes)?

Você pode personalizar o texto de boas vindas e a cor dos botões.

Eis como.

Adicione ao seu código estes três atributos:

  • theme_color
  • logged_in_greeting
  • logged_out_greeting

Eis o código com a linha sublinhada a amarelo, onde esses 3 novos atributos estão. Você agora substitui com o seu texto e com as cor que quiser.

// Janela Messenger Chat
if ( ! function_exists('messenger_chat') ) {
    function messenger_chat() {
        echo '<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>';
    }
}

// Facebook SDK oficial
if ( ! function_exists('fb_sdk') ) {
    function fb_sdk() {
        echo '<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/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));</script>';
    }
}

Assim você pode escrever o texto que quiser e ter as cores da sua marca para proporcionar uma boa experiência aos utilizadores (além de parecer bem porreiro).

Nota: A cor é em formato hex (6 números). Para encontrar a cor que quer neste formato, clique aqui, e nesse site encontre uma cor que gosta, ou a cor da sua marca.

Janela Messenger Chat


Como instalar com plugin

Passo 1. Encontre o seu Facebook Page ID

Eis como encontrar o ID da sua página Facebook.

Neste website coloque o endereço da sua página: https://findmyfbid.com/

Encontrar ID de Página Facebook

Clique em “Find numeric ID” para saber o ID da sua página.

ID de página Facebook numero

Outra maneira de saber isto é ir ao separador “Sobre” da sua Página Facebook, e em baixo está o ID da sua página.

Facebook ID página Sobre

Passo 2. Whitelist o seu domínio

Adicione o seu domínio à lista de domínios em “lista branca”.

Vá à sua Página Facebook > Definições > Plataforma do Messenger e encontre Whitelisted Domains.

definições da página Facebook

Plataforma do Messenger definições

Escreva o domínio que quer juntar à whitelist. Isto diz ao Facebook que a janela do Chat Messenger pode aparecer no seu website.

Adicionar domínio à lista de domínios segura

Passo 3. Instale este plugin

Agora vá a Plugins > Adicionar novo e instale este plugin.

Facebook Customer Chat Plugin WordPress (

Vá às definições do Plugin e coloque e em “Facebook Page ID” coloque a ID da sua página, e em “Facebook App ID” coloque este número, 1678638095724206, nesse campo. Este é o número da app ID criada pelo Chatfuel (a minha plataforma favorita de Bots). Assim não precisamos de criar a nossa app. Mas se quiser criar uma app, vá à app dashboard, crie uma app e copie e cole o código dela neste campo.

Definições do plugin

Pode selecionar que a janela apareça minimizada (só com o ícone do Messenger) para ser menos intrusivo e ocupar menos espaço ao utilizador.

Janela Messenger minimizada

Janela Messenger completa

E você, já instalou a janela do Customer Chat no seu site?



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

Marketing Digital sem espinhas

Deixe um comentário