Como incluir um bot no Messenger na sua página em 3 passos!
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:
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/