Integración Oct8ne con webviews
Funcionamiento básico
En apps móviles basadas en un webview que contenga la web del cliente podemos mostrar el chat de Oct8ne, ya sea utilizando el widget en la web del cliente que se lanza dentro del webview, o abriendo una nueva página en blanco con el código de Oct8ne.
Si existen algunas páginas propias de la aplicación, que no contienen el iframe con la página del cliente, sino que son vistas propias de la app, se puede añadir un Call to Action (botón, link, etc), que permita la carga de Oct8ne.
Por defecto Oct8ne no permite mostrarse dentro de iframes, a la URL del iframe que muestra el webview se le añade el querystring customApp=2, para permitir que se pueda mostrar.
La comunicación entre la webview y el iframe que contiene Oct8ne se realiza mediante eventos PostMessage de Javascript.
Comunicación
- Al clicar el Call to action en el webview:
La aplicación debe detectar si la página contiene el iframe con la página del cliente o no, y realiza las siguientes acciones:
- En las páginas que contienen el iframe de la web se envía un evento:
IFRAME.contentWindow.postMessage("OCT8NEOPEN,Webview","*");
La API de Oct8ne recibe este evento y dependiendo del estado en el que se encuentre el coviewer de Oct8ne, lo crea, maximiza o minimiza.
- En las páginas propias de la aplicación (sin iframe):
La aplicación deberá modificar la URL del iframe y redirigirlo a la home de la web, que si contiene el código de Oct8ne. A la URL añade el parámetro oct8neOpen=Webview, que hará que se ejecute el coviewer de Oct8ne automáticamente.
https://www.client.es/?oct8neOpen=Webview&customapp=2
- Salientes (De iframe a webview )
- En las páginas propias de la aplicación (sin iframe), se muestra una capa Loading, mientras carga la página cuando Oct8ne está totalmente cargado envía el siguiente evento al webview para indicar que ya está preparado y ya puede ocultar la capa.
parent.postMessage("oct8neOpened", "*");