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

Bender everywhere!

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:


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!

Rapidinho está no ar!

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

Mensagem no WebChat e notificação no Messenger.

Para evitar esse tipo de problema, basta alterar a forma de envio de mensagem para o usuário alterando o parametro:

notification_type: NO_PUSH

Mais informações sobre isso aqui na documentação: https://developers.facebook.com/docs/messenger-platform/reference/send-api?hc_location=ufi

Tutorial bem rápido e simples, divirtam-se! =D


Gostou? Deixe seu Like! =D

Não deixe de escrever nos comentários se tiver alguma sugestão ou dúvida!

Quer conversar sobre Bots? Pode me enviar um email: ricardo.grobel@harlio.com

Comunidade Brasileira de ChatBot no Facebook: https://www.facebook.com/groups/chatbotbrasil/