Como adicionar o SDK de Extensões do Messenger

O SDK de Extensões do Messenger traz recursos valiosos e específicos do Messenger para qualquer site ou app web aberto na webView do Messenger. Com o SDK, é possível recuperar informações sobre a pessoa que abriu a webView, compartilhar conteúdos nas conversas no Messenger e integrar-se profundamente com a interface do usuário do Messenger.

Recursos disponíveis

Os seguintes recursos estão disponíveis na webView do Messenger quando o SDK de Extensões do Messenger é incluído. Observe que a disponibilidade real de recursos pode variar de acordo com a versão do Messenger e do dispositivo.

Função	Descrição
getContext()	Recupere o contexto da conversa, como o PSID da pessoa que abriu a webView.
requestCloseBrowser()	Feche a webView e volte para a conversa do Messenger.
askPermission()	Solicite permissão para fazer coisas como recuperar as informações do perfil de uma pessoa.
getGrantedPermissions()	Verifique as permissões concedidas atualmente.
getSupportedFeatures	Verifique quais recursos são compatíveis com a webView no dispositivo atual, como compartilhamento.

Para obter detalhes completos sobre como usar estes recursos, consulte a referência Messenger Extensions SDK.

Como instalar o SDK

1. Coloque seu domínio na lista de liberação

Para usar as Extensões do Messenger no seu bot, é necessário primeiro colocar na lista de liberação os domínios a partir dos quais a página é exibida; por motivos de segurança, todos os domínios na sua página web têm de ser adicionados aos domínios da lista de liberação. Consulte o documento de referência sobre a lista de liberação para obter mais detalhes.

É possível facilmente adicionar um domínio à lista de liberação de maneira programada usando a seguinte API:

 
curl -X POST -H "Content-Type: application/json" -d '{
  "whitelisted_domains":[
    "https://petersfancyapparel.com"
  ]
}' "https://graph.facebook.com/v21.0/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

Se houver sucesso, a API do Perfil do Messenger responderá:

{"result":"success"}

2. Inclua o SDK do JS de Extensões do Messenger

Adicione o SDK Javascript de Extensões do Messenger à página que está sendo carregada na webView com o código abaixo. É necessário inseri-lo diretamente após a tag do body de abertura em cada página que deseja carregá-lo:

(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 = "//connect.facebook.net/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));

3. Aguarde pelo evento de carregamento do SDK

window.extAsyncInit() será chamada quando o SDK de JS de Extensões do Messenger terminar de carregar. É possível usá-lo como gatilho para chamar outras funções disponíveis no SDK.

window.extAsyncInit = function() {
  // the Messenger Extensions JS SDK is done loading 
};

Como usar o SDK no cliente web do Messenger

O SDK de Extensões do Messenger pode ser usado em clientes móveis e de desktop do Messenger. No entanto, pode ser necessário fazer os seguintes procedimentos para que ele funcione corretamente.

Você também pode usar a propriedade window.name para verificar a localização do iframe a partir do seu código no cliente.

Quando o iframe é acionado no Messenger web, definimos window.name para ser "messenger_ref". Caso contrário, ao carregar nas abas de bate-papo do Facebook, window.name será "facebook_ref".

Recursos não compatíveis

As seguintes configurações ou recursos não são compatíveis com clientes web do Messenger. Eles ainda funcionam corretamente nos clientes móveis do Messenger.

webview_height_ratio
webview_share_button
Botões Voltar de navegação
Dialog title
Closing the webview via URL redirect

Solução de problemas

Se não conseguir chamar o SDK de Extensões do Messenger a partir da sua página, considere o seguinte:

Quando abrir a webView a partir do menu persistente ou de um botão, certifique-se de que o parâmetro messenger_extensions esteja definido como true. Se um usuário abriu a webView por meio de uma mensagem compartilhada, não é obrigatório que ele tenha falado com seu bot para que as Extensões do Messenger funcionem.
Verifique se você incluiu o domínio na lista de liberação na qual a página está hospedada.
Verifique se o SDK de JS está incluído em todas as páginas que utilizam extensões.
Certifique-se de não tentar chamar nenhuma função antes que o SDK termine de carregar. Use window.extAsyncInitdescrito aqui para saber quando o carregamento foi concluído.
Certifique-se de que a página seja exibida em https e não inclua nenhuma porta não padrão.