Mobile App Integration

Can the commenting unit be used in a mobile application? Yes, it can.

Insticator commenting is a web based application, thus it canโ€™t be run natively in mobile applications. It can however be integrated using WebView.

๐Ÿ“˜

Insticator supports both Android WebView and iOS WKWebView


Integration Types

There are two ways this can be implemented:

WebView "Entire Article"

  • This would mean the entire article is webviewed directly from the website itself
    • So the same URL you would visit when viewing the website through a browser on a desktop or mobile browser like Chrome/Safari/Firefox
  • In this case, no additional setup is needed (example: Newsmax's web app)
    • The reason for no additional setup is because the whole page is essentially in a webview and Insticator commenting is already included as part of that page

WebView "Comments Only"

  • The articles themselves would be incorporated in your native mobile app and only Insticator commenting would be webviewed in.
  • In this case, Insticator commenting would need to have a hosted standalone webpage. Only the commenting unit would be displayed on that page. The page would would accept some parameters that would identify which article the commenting unit belongs to and display the correct comments associated with that article. This webpage would then be WebViewed into your mobile app to display comments for a given article.
  • This approach has some limitations and needs some minor additional setup. (see below for more details).

Additional Setup

If you plan to WebView ONLY the comments section, then you'll need to take the following steps:

Create a Standalone Page

Create a standalone webpage, implement a single commenting unit on that page, and host it on a server.

Make sure you include the correct data params in the body code. A combination of data-page-url, data-page-title and data-ext-page-id defines an article.

At this point, you should have one webpage hosted on a server and one commenting unit integrated on that page. As perviously stated, providing a combination of data params unique to a given article will make that one Insticator Commenting unit load the specific comments for that article.

๐Ÿšง

Providing data-page-url and data-page-title is crucial in this case.

If you only provide data-ext-page-id the correct comments will display, but it will make the comments link to this standalone webpage instead of the original article url

WebView Page into your App

The standalone webpage created in the previous step can now be opened via WebView from inside your native mobile app. This will allow users to utilize comments via the app.

๐Ÿšง

Itโ€™s recommended to NOT utilize the WebView inline from the content but to instead to open it over the whole screen once interacted with.

This means when a user clicks to comment it would temporarily takeover the viewport so they are within the commenting unit itself.


Settings Insights

Please ensure the following WebView settings are configured correctly:

Enable JavaScript

JavaScript should be enabled by default for both Android WebView and iOS WKWebView. If for any reason it is disabled, you can enable it using the following code:

๐Ÿ“˜

Android WebView:
settings.setJavaScriptEnabled(true);

IOS WKWebView:
preferences.javaScriptEnabled = true

Enable LocalStorage

Insticator Commenting requires LocalStorage access to work properly. Make sure your WebView settings enable apps to use LocalStorage.

๐Ÿ“˜

Android WebView:
LocalStorage is disabled by default in Android WebView. To enable LocalStorage, please add the following line of code to the WebView settings:

settings.setDomStorageEnabled(true);

IOS WKWebView:
In WKWebView, LocalStorage is enabled by default.

To enable default DataStore use the following code:
configuration.websiteDataStore = WKWebsiteDataStore.default()

If you are using a custom DataStore, we recommend using persistent storage (according to this documentation), as this will allow us to properly control user sessions.