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 ...Oct8ne dynamic widget
These instructions are intended for people with a basic understanding of web programming languages: HTML and CSS. If this doesn't apply to you, we recommend contacting your developers and providing them with these instructions. Installation will be ...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 ...Oct8ne API for custom CSM integration
These instructions are intended for people with a basic understanding of web development languages. If this doesn't apply to you, we recommend contacting your developers and providing them with these instructions. Integration and development will be ...