Skip to content
Vuukle Docs

Integrate Vuukle in a native Android app

The current Android integration uses Vuukle’s mobile iframe URLs loaded inside a standard WebView (or WebChromeClient). You don’t need to ship updates to your app when Vuukle ships features — the web view always gets the latest.

The iframe URLs

Comment widget

https://cdn.vuukle.com/amp.html?apiKey={APIKEY}&host={HOST}&id={ARTICLE_ID}&img={IMAGE}&title={TITLE}&url={URL}
ParamValue
apiKeyYour public API key
hostYour site host (no www., no https://)
idUnique article ID
imgArticle image URL
titleArticle title
urlFull article URL (with scheme)

Emote widget

https://cdn.vuukle.com/widgets/emotes.html?apiKey={APIKEY}&host={HOST}&articleId={ARTICLE_ID}&img={IMAGE}&title={TITLE}&url={URL}

For any extra parameters you need, contact support@vuukle.com.

Android implementation

1. Add the WebView to your layout

res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <WebView
        android:id="@+id/activity_main_webview_comments"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

2. Add INTERNET permission

AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

3. Wire up the WebView

mWebViewComments.getSettings().setJavaScriptEnabled(true);
mWebViewComments.getSettings().setDomStorageEnabled(true);
mWebViewComments.getSettings().setSupportMultipleWindows(true);
mWebViewComments.setWebChromeClient(webChromeClient);
mWebViewComments.loadUrl(VUUKLE_IFRAME_URL);

4. Listen for events from the web layer

Vuukle emits events as console messages — for example "Comments initialized!" — that your WebChromeClient.onConsoleMessage() can pick up:

private WebChromeClient webChromeClient = new WebChromeClient() {
  @Override
  public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
    if (consoleMessage.message().contains("Comments initialized!")) {
      // e.g. autofill SSO user info
      mWebViewComments.loadUrl("javascript:signInUser('" + name + "', '" + email + "')");
    }
    return super.onConsoleMessage(consoleMessage);
  }


  @Override
  public boolean onCreateWindow(WebView view, boolean isDialog,
                                boolean isUserGesture, Message resultMsg) {
    // Handle social-auth popup windows (Facebook, Twitter, etc.)
    // see full sample for the pop-up WebView setup
    return true;
  }
};

5. Handle image uploads and file pickers

Allow onShowFileChooser() on the WebChromeClient and request the CAMERA permission at runtime. See the full reference app for the boilerplate.

6. Handle back navigation

@Override
public void onBackPressed() {
  if (mWebViewComments.canGoBack()) {
    mWebViewComments.goBack();
  } else {
    super.onBackPressed();
  }
}

Reference apps

Was this page helpful?
Help us improve — drop a note or open the dashboard.
Email support Open dashboard ↗ Suggest an edit ↗