Integrate Oct8ne with your mobile app (using webviews)
These instructions are intended for people with a basic understanding of web programming languages: HTML and JavaScript. If this does not apply to you, we recommend that you contact your developers and provide them with these instructions. The installation will be very easy for them.
Oct8ne integration with WebViews
Basic Operation
In mobile apps that use a webview to display the client's website, we can display the Oct8ne chat either by using the widget on the client's website that launches within the webview, or by opening a new blank page with the Oct8ne code.
If there are any pages within the app that do not contain the iframe with the client’s page—but are instead native app screens—you can add a call to action (button, link, etc.) that allows Oct8ne to load.
By default, Oct8ne does not allow itself to be displayed within iframes unless an additional parameter is included. Within your WebView, you must add the query string ‘customApp=2’ to the iframe's URL to enable it to be displayed.
Communication between the WebView and the iframe containing Oct8ne is handled via JavaScript ‘postMessage’ events.
Communication
1.- Entry: By clicking the “Call to Action” button in the webview.
The application must determine whether the page contains the iframe with the client's page or not, and then perform the following actions:
The application must determine whether the page contains the iframe with the client's page or not, and then perform the following actions:
- On pages that contain the website's iframe, an event is triggered:IFRAME.contentWindow.postMessage("OCT8NEOPEN,Webview","*");
* The Oct8ne API receives this event and, depending on the current state of the Oct8ne co-viewer, creates, maximizes, or minimizes it.
-On the app's own pages (without an iframe):
The app must modify the iframe's URL and redirect it to the website's home page, provided it contains the Oct8ne code.Add the parameter ‘oct8neOpen=Webview’ to the URL, which will automatically launch the Oct8ne co-viewer.
Example of the finl Url:
2.- Outbound (From iframe to WebView)
- On the app's native pages (without an iframe), a loading overlay is displayed while the page loads. Once Oct8ne has fully loaded, it sends the following event to the WebView to indicate that it is ready and the overlay can be hidden.parent.postMessage("oct8neOpened", "*");
Related Articles
How to integrate Whastsapp into Oct8ne
In the following document, we will try to explain how we can add a phone line to WhatsApp Business API, a Facebook (professional) page, or a professional Instagram account. Each process requires certain verifications by the business owner, which will ...CONFIGURING PERMISSIONS WHEN INSTALLING MESSENGER AND INSTAGRAM (VIA ONE-CLICK)
The issue arises when, upon initiating the one-click process, the user receives a message indicating they are not an admin of the page, causing the process to be canceled. Often, the user asserts that they are indeed an admin and demonstrates that ...Public methods in javascript
These instructions are intended for people with a basic understanding of web programming languages: HTML and JavaScript. If this does not apply to you, we recommend that you contact your developers and provide them with these instructions. The ...Bot Instruction Manual for Web and Messaging
TABLE OF CONTENTS 1. OVERVIEW 1.1. Flow Designer 2. WEB BOT: GETTING STARTED 2.1. Create a conversation 2.2. Specific tools in the conversation designer 2.3. Turning the Bot on and off 3. BOT MESSAGING: GETTING STARTED 3.1. Create a conversation 3.2. ...Instal Oct8ne into your website
Oct8ne can be integrated into any website in three different ways, depending on your platform and needs. 1. Via Plugin. If your website is built on one of the most common platforms, Oct8ne provides a specific “plugin/add-on” for each platform, which ...