webView

A plataforma do Messenger permite que você abra um webView padrão, no qual é possível carregar páginas da web no Messenger. Com isso, é possível oferecer experiências e recursos difíceis de disponibilizar com balões de mensagem, como a seleção de produtos para comprar e assentos ou datas para reservar.

Como exibir o webView

É possível abrir o webView a partir do seguinte:

O menu persistente
O botão de URL em uma mensagem, incluindo o modelo genérico
Um plugin de bate-papo

Em cada um deles, é possível especificar a aparência e o comportamento do webView.

Se a sua experiência usa as extensões do Messenger descritas nesta seção, lembre-se de definir o parâmetro messenger_extensions como true no botão ou no item de menu usado para a invocação.

SDK de extensões do Messenger: é obrigatório incluir domínio na lista de liberação

Para exibir uma página da web com o SDK das Extensões do Messenger ativado no webView da plataforma, é obrigatório adicionar o domínio (inclusive o subdomínio) à lista de liberação na propriedade whitelisted_domains do perfil do Messenger do seu bot. Isso garantirá que apenas domínios confiáveis tenham acesso aos dados do usuário disponíveis com as funções do SDK.

Consulte a referência de whitelisted_domains para saber mais sobre a inclusão de domínios na lista de liberação.

Como definir o título do webView

Como em todas as páginas da web, a tag <title> define o texto exibido na barra de título do webView.

<html><head><title>Meu incrível webView</title></head> ... </html>

Como fechar o webView

Fechar o webView depois de a transação ser finalizada é uma boa ideia, principalmente se as ações do usuário resultarem em uma mensagem no tópico. Isso pode ser feito com o SDK de extensões do Messenger ou uma URL de redirecionamento.

Com o SDK de extensões do Messenger

Faça uma chamada a MessengerExtensions.requestCloseBrowser() para fechar o webView com o SDK de extensões do Messenger. Como opção, é possível implementar chamadas de funções de sucesso e erro.

MessengerExtensions.requestCloseBrowser(function success() {
  // webview closed
}, function error(err) {
  // an error occurred
});

Com redirecionamento

Também é possível fechar o webView redirecionando o usuário para uma URL com este formato:

https://www.messenger.com/closeWindow/?image_url=<IMAGE_URL>&display_text=<DISPLAY_TEXT>

Os valores definidos para os parâmetros display_text e image_url serão exibidos de forma breve até o fechamento da janela. Observe que esse método fará o fechamento apenas se for redirecionado da sua URL/página. Abrir a URL de forma direta não fechará o navegador.

Esse método só é válido para o Android. No iOS, o texto e a imagem serão exibidos, mas o navegador não fechará de forma automática.

SDK de extensões do Messenger

Para que sua integração com as experiências no webView com o Messenger seja perfeita, disponibilizamos o SDK de JS das extensões do Messenger. Com isso, as funcionalidades adicionadas (como as informações sobre o contexto do tópico) ficam acessíveis no webView.

Para mais informações, consulte Adicionar o SDK das Extensões do Messenger.

Boas práticas

Use para interações longas (mais de três etapas) nas quais as pessoas talvez queiram editar a entrada ou proceder de forma não linear.

Use para conteúdo especificamente visual.

Use para preferências do usuário ou para permissão de alterações por demanda em seleções anteriores.

Use em combinação com mais interações de conversas.

Configure a altura do webView para corresponder ao conteúdo e preservar o contexto do tópico que estiver abaixo.

Aproveite as extensões do Messenger para trazer ao webView o contexto do tópico.

Não é necessário coletar todas as informações do formulário de uma vez. É possível coletá-las gradualmente de forma conversacional, depois usar um formulário no webView para edições posteriores.

Misture interações conversacionais e de webView e deixe-as sucintas. Combine interações de tópico e de webView para criar uma experiência nativa do Messenger.

Exemplos de uso

Uma experiência de compra de ingresso pode exibir um mapa interativo do estádio para a escolha do assento.
Uma experiência de viagem pode fornecer preferências (corredor ou janela, pousada ou hotel, restrições alimentares) acessíveis no menu persistente.
Uma experiência de marcação de consulta odontológica pode exibir um calendário interativo para a escolha do horário.
Um portal de notícias pode fornecer uma lista de seleção múltipla para a assinatura das preferências.
Uma marca pode oferecer preferências pessoais para a personalização de ofertas e presentes.

Fluxo de design recomendado

As pessoas acessam a experiência do webView por um botão, se for parte de um fluxo maior de conversa, ou por um item de menu para acesso contínuo (por exemplo, preferências). Além disso, elas também podem usar as duas maneiras.
A experiência é exibida como uma camada sobre o tópico e, dependendo do conteúdo e do caso de uso, pode aparecer em tela cheia, com altura de 75% ou 50%.
Recomendamos enviar o conteúdo ao tópico durante ou depois da interação com o webView.
Depois de finalizarem, as pessoas podem fechar o webView e retornar ao tópico. Outra possibilidade é você fechá-lo em resposta a ações (por exemplo, do botão Salvar).