Como incluir um bot no Messenger na sua página em 3 passos!

Published in

Bots Brasil

3 min readDec 1, 2017

A algumas semanas atrás o Facebook atualizou sua plataforma Messenger e incluiu novas funcionalidades, dentre elas o tão esperado Web Plugin!

A relevância das interfaces conversacionais vem crescendo nestes últimos meses e esse é mais um sinal de que vamos convergir para esta tecnologia mais cedo ou mais tarde.

Sem delongas, vou explicar em 3 passos como incluir aquele Bot maneiro que você passou algum tempo desenvolvendo para o Messenger em seu Site.

Passo 1 — Incluir o Facebook SDK

Para que o Plugin funcione corretamente, você precisa incluir estas linhas no <body> do seu código html:

<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’));
</script>

Note na linha 4 você precisa inserir aqui o seu AppID, que você acha aqui ó: https://developers.facebook.com/apps

Passo 2 — Incluir uma <div> em qualquer lugar do seu código html

Mais simples que isso não existe:

<div class=”fb-customerchat”
  page_id=”<PAGE_ID>”
  ref=”<OPTIONAL_WEBHOOK_PARAM>”
  minimized=”<true|false>”>
</div>

Vamos explicar rapidamente as linhas:

page_id: Número da página do chat, você pode pegar aqui: https://www.facebook.com/pg/nomedapagina/about/
Lá no final da página tem o PAGE ID
ref (opcional): Se você quiser passar alguma referência para seu backend quando o usuário abre o chat. Mais sobre isso aqui: https://developers.facebook.com/docs/messenger-platform/discovery/m-me-links#parameters
minimized: Opção para abrir o chat na página aberto ou fechado

Passo 3 — Incluir o endereço do site na whitelist da página do Facebook

Para você poder abrir o Chat Plugin em seu site, você precisa autorizar o endereço web dele dentro do Facebook.
Há duas formas de se fazer isso:

Via Facebook

Entre no endereço da sua página Facebook:
https://www.facebook.com/nomedapagina/settings/?tab=messenger_platform
Página do Facebook -> Configurações -> Plataforma Messenger

No meio da página você vai encontrar isso aqui:

Só incluir ai o endereço do seu site e pronto!

Via POST/cURL

A chamada é bem simples, vou passar aqui via cURL:

curl -X POST -H “Content-Type: application/json” -d ‘{
 “whitelisted_domains”:[
 “http://www.meuchatnaweb.com.br"
 ]
}’ “https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

Só incluir aí o access_token e o endereço web do seu site.

Pronto!

Última dica:

Ao ativar o chat no seu bot, não esqueça que se o cliente estiver no mobile, ele receberá um mensagem no WebChat e talvez receba uma mensagem no Messenger também, criando essa experiência: