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/

Bots Brasil

Conectamos pessoas e compartilhamos conteúdos relacionados à Bots, Inteligência Artificial e Interfaces Conversacionais em Português.

Ricardo Blumer Grobel

Written by

Chatbots, IA, Blockchain

Bots Brasil

Conectamos pessoas e compartilhamos conteúdos relacionados à Bots, Inteligência Artificial e Interfaces Conversacionais em Português.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade