Vista web

La plataforma de Messenger te permite abrir una vista web estándar en la que puedes cargar páginas web en Messenger. Puedes aprovechar esto para ofrecer experiencias y funciones que sería difícil proporcionar mediante burbujas de mensajes, como elegir productos que comprar, o asientos o fechas que reservar.

Mostrar la vista web

Puedes abrir la vista web con cualquiera de estos elementos:

El menú persistente.
Un botón de URL en un mensaje, incluida la plantilla genérica.
Un plugin de chat.

En cada uno de estos casos, puedes especificar cuál debe ser la apariencia y el comportamiento de la vista web.

Si tu experiencia usa las extensiones de Messenger descritas en esta sección, recuerda definir el parámetro messenger_extensions como true en el elemento de menú o botón desde el que se invoca.

SDK de extensiones de Messenger: lista de dominios autorizados requerida

Para mostrar una página web con el SDK de extensiones de Messenger activado en la vista web de Messenger, debes autorizar el dominio, incluido el subdominio, en la propiedad whitelisted_domains del perfil de Messenger del bot. De este modo, garantizarás que solo los dominios de confianza tengan acceso a la información del usuario disponible mediante las funciones del SDK.

Para obtener más información sobre la autorización de dominios, consulta la referencia de whitelisted_domains.

Definir el título de la vista web

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

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

Cerrar la vista web

Es conveniente cerrar la vista web cuando una transacción ha finalizado, sobre todo si las acciones que ha realizado el usuario van a dar lugar a un mensaje en la cadena. Para ello, puedes utilizar el SDK de extensiones de Messenger o una URL de redireccionamiento.

Cerrar la vista web con el SDK de extensiones de Messenger

Si quieres utilizar el SDK de extensiones de Messenger para cerrar la vista web, llama al método MessengerExtensions.requestCloseBrowser(). Si lo deseas, también puedes implementar funciones de devoluciones de llamada correctas y fallidas.

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

Cerrar la vista web con un redireccionamiento

Otra forma de cerrar la vista web consiste en redireccionar al usuario a una URL con el siguiente formato:

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

Los valores que se establezcan en los parámetros display_text e image_url aparecerán brevemente hasta que la ventana se cierre. Ten en cuenta que solo se cerrará la vista web con este método si redireccionas al usuario desde tu URL o página. Si la URL se abre directamente, el navegador no se cerrará.

Esto solo funciona en Android. En iOS, se mostrarán el texto y las imágenes, pero el navegador no se cerrará automáticamente.

SDK de extensiones de Messenger

También ponemos a tu disposición el SDK de extensiones de Messenger para JavaScript, con el que puedes integrar por completo las experiencias de la vista web con la experiencia de Messenger. Gracias a este SDK, puedes hacer que la funcionalidad que añadas sea accesible desde la vista web, como la información sobre el contexto de la cadena.

Consulta Añadir el SDK de extensiones de Messenger para obtener más información.

Prácticas recomendadas

Utilízala para interacciones más extensas (más de tres pasos) donde los usuarios podrían querer editar la información que han proporcionado o continuar de una forma no lineal.

Úsala para contenido que sea especialmente visual.

Utilízala para preferencias del usuario o para permitir cambios a petición en selecciones anteriores.

Úsala en combinación con interacciones de conversación.

Configura la altura de la vista web para que coincida con el contenido y conserva el contexto de la cadena de mensajes que aparece debajo.

Aprovecha las extensiones de vista web de Messenger para trasladar el contexto de la cadena de mensajes a la vista web.

No te sientas limitado a recopilar toda la información del formulario a la vez. Puedes capturarla dato por dato a modo de conversación y, después, usar un formulario en la vista web para efectuar modificaciones posteriormente.

Combina las interacciones de conversación y las de vista web, y haz que sean breves. Combina las interacciones de la cadena de mensajes y de la vista web para crear una experiencia “nativa de Messenger”.

Ejemplos de uso

Una experiencia de búsqueda de entradas puede mostrar un mapa interactivo de asientos de un estadio para seleccionar un asiento.
Una experiencia de viajes puede proporcionar preferencias de viaje (pasillo o ventanilla, pensión u hotel, necesidades alimentarias, etcétera) a las que se puede acceder desde el menú persistente.
Una experiencia de citas para el dentista puede mostrar un calendario interactivo a fin de seleccionar un intervalo para una cita.
Un editor de noticias puede proporcionar una lista de selección múltiple con temas a los que suscribirse.
Una marca puede ofrecer preferencias personales para personalizar las ofertas y los regalos gratuitos.

Proceso de diseño recomendado

Los usuarios acceden a tu experiencia de vista web de una de estas dos formas: a través de un botón si forma parte de un proceso de conversación más extenso, o de un elemento de menú en el caso del acceso continuo (por ejemplo, preferencias), o a través de ambos.
Tu experiencia aparece como una capa por encima de la cadena de mensajes; a pantalla completa, a una altura del 75 % o a una altura del 50 %, en función del contenido y del caso de uso.
Es posible que quieras enviar contenido a la cadena de mensajes durante la interacción con la vista web o después.
Cuando hayan terminado, los usuarios pueden cerrar la vista web y regresar a la cadena de mensajes, o bien puedes cerrarla tú mismo en función de las acciones que efectúen (por ejemplo, un botón “Guardar”).