Vista web

La plataforma de Messenger te permite abrir una vista web estándar, en la que puedes cargar páginas web dentro de Messenger. De esta manera, puedes ofrecer experiencias y funciones que pueden ser difíciles de ofrecer con burbujas de mensajes, como elegir productos para comprar o reservar asientos o fechas.

Cómo abrir la vista web

Puedes abrir la vista web de cualquiera de las siguientes maneras:

Con el menú persistente
Con un botón de URL dentro de un mensaje, incluida la plantilla genérica
Con un plugin de chat

En cada una de estas instancias, puedes especificar el aspecto y el comportamiento de la vista web.

Si tu experiencia usa las extensiones de Messenger que se describen en esta sección, recuerda configurar el parámetro messenger_extensions como true en el elemento de menú o el botón desde el cual lo invocas.

SDK de extensiones de Messenger: lista blanca obligatoria de dominios

Para mostrar una página web con el SDK de extensiones de Messenger activado en la vista web de Messenger, es necesario que incluyas el dominio (y el subdominio) en la lista de autorizados en la propiedad whitelisted_domains del perfil de Messenger de tu bot. Esto garantiza que solo los dominios confiables tengan acceso a la información de usuario que se encuentra disponible mediante las funciones del SDK.

Para obtener más información sobre cómo incluir dominios en la lista de autorizados, consulta la referencia whitelisted_domains.

Cómo configurar el título de la vista web

Como en cualquier página web, con la etiqueta <title> se define el texto que se muestra en la barra de título de la vista web.

<html><head><title>My Awesome Webview</title></head>
   ...
</html>

Cómo cerrar la vista web

Es recomendable cerrar la vista web una vez que se completa la transacción, especialmente si las acciones que realizó el usuario generarán un mensaje en el hilo. Puedes hacerlo con el SDK de extensiones de Messenger o mediante una URL de redireccionamiento.

Cómo cerrar la vista web con el SDK de extensiones de Messenger

Para cerrar la vista web con el SDK de extensiones de Messenger, llama al método MessengerExtensions.requestCloseBrowser(). También tienes la opción de implementar funciones de devolución de llamada de éxito y error.

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

Cómo cerrar la vista web con redireccionamiento

Puedes cerrar la vista web redireccionando al usuario a una URL con el siguiente formato:

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

Los valores configurados con los que configures los parámetros display_text y image_url se mostrarán brevemente hasta que se cierre la ventana. Ten en cuenta que con este método solo se cerrará la vista si realizas el redireccionamiento desde tu URL o página. Si se abre directamente la URL, no se cierra el navegador.

Este método solo funciona en Android. En iOS, se muestran el texto y la imagen, pero el navegador no se cierra automáticamente.

SDK de extensiones de Messenger

Para que puedas integrar con precisión las experiencias de la vista web con la experiencia de Messenger, también tienes disponible el SDK de extensiones de Messenger para JS. De esta manera, se puede acceder a las funcionalidades de la vista web, como la información acerca del contenido del hilo.

Para obtener más información, consulta Cómo agregar el SDK de extensiones de Messenger.

Prácticas recomendadas

Úsala para interacciones más largas (de más de tres pasos), en las que las personas tal vez quieran editar lo que ingresaron o avanzar de forma no secuencial.

Úsala para contenido especialmente visual.

Úsala para las preferencias del usuario o para permitir cambios a pedido en selecciones anteriores.

Úsala en combinación con interacciones de tipo conversacional.

Configura la altura de tu vista web para que coincida con el contenido y se mantenga por debajo el contexto del hilo.

Aprovecha las extensiones de la vista web de Messenger para implementar el contexto del hilo en la vista web.

No es necesario que recopiles toda la información a la vez. Puedes capturarla parte por parte en modo de conversación y luego usar un formulario en la vista web para editarla.

Combina interacciones conversacionales y de vista web, las cuales deben ser breves. Combina interacciones de hilo y vista web para tener una experiencia "nativa de Messenger".

Ejemplos de uso

En una experiencia de búsqueda de boletos, puede mostrarse un mapa interactivo de los asientos del estadio para que el usuario elija uno.
En una experiencia de viaje, se pueden proporcionar preferencias —asiento junto al pasillo o la ventana, posada u hotel, necesidades alimentarias— accesibles desde el menú persistente.
En una experiencia de cita con un odontólogo, se puede mostrar un calendario interactivo para elegir un horario.
Un editor de noticias puede proporcionar una lista de selección múltiple de temas para suscribirse.
Una marca puede ofrecer preferencias personales para personalizar las ofertas y los regalos.

Proceso de diseño recomendado

Las personas acceden a tu experiencia de vista web mediante un botón, si se trata de un proceso de conversación más amplio, o mediante un elemento de menú para el acceso continuo (p. ej., preferencias), o mediante ambas maneras.
Tu experiencia aparece como una capa sobre el hilo: en pantalla completa, a 75% de altura o a 50%, según el contenido y el caso de uso.
También te conviene enviar contenido al hilo durante la interacción con la vista web o después de ella.
Al terminar, las personas pueden cerrar la vista web y volver al hilo. También puedes cerrarla tú en respuesta a las acciones que realizan los usuarios (p. ej., un botón "Guardar").