Incorporando o Facebook Messenger no Vinyl¶

Instruções¶

Obtenha um ID de aplicativo aqui https://developers.facebook.com/apps
- Inscrição gratuita
Obtenha o ID da sua página do Facebook aqui https://www.facebook.com/business/help/2814101678867149
- O ID da página é um valor numérico, o URL intuitivo não funcionará.
Na fanpage do Facebook que é alvo do Messenger, vá em Configurações>MessengerPlatform>WhitelistedDomains.
- Este deve ser um site HTTPS.
- Endereços IP e hospedar local não funcionarão
- Certifique-se de clicar em salvar!

Crie um novo modelo HTML no Vinyl e copie o código abaixo, substituindo o ID do aplicativo e o ID da página obtidos nas etapas acima.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '[AppID]',
      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>
<div class="fb-customerchat" page_id="[PageId]"></div>

Adicione o controle HTML à página de sua escolha. Uma vez carregado, ele irá acompanhá-lo por todo o aplicativo.

Notas¶

Isso também funciona no celular!
O Facebook considera que isso está em Beta
O usuário final deverá fazer login no Facebook para poder se corresponder. Existe um plugin alternativo que permitirá apenas uma mensagem unilateral do usuário para a empresa.
Existem muitas personalizações, respostas automáticas, cores, etc. Aqui está a documentação do Facebook.
O padrão é que a janela apareça na área de trabalho. No celular, está configurado para ser minimizado. A área de trabalho pode ser configurada para esse mesmo comportamento.