Need help with Vuukle?🤔

This is the place you are looking for!

How to integrate Vuukle web version into your native Android application

Updated over a month ago

We want to create the best experience possible for you. You have no need to update SDK anymore, since it’s in the web view we will handle the heavy lifting for you. You will get the latest updates and new features as soon as they are uploaded on our servers.

You will be working with our iframe URL’s

Comment widget iframe looks like this:

https://cdn.vuukle.com/amp.html?apiKey=c7368a34-dac3-4f39-9b7c-b8ac2a2da575&host=smalltester.000webhostapp.com&id=381&img=https://smalltester.000webhostapp.com/wp-content/uploads/2017/10/wallhaven-303371-825x510.jpg&title=Newpost&url=https://smalltester.000webhostapp.com/2017/12/new-post-22#1

Required parameters (for comment widget iframe):

  1. apiKey - Your API key (https://docs.vuukle.com/how-to-embed-vuukle-2.0-via-js/)
  2. host - your site host (Exclude http:// or www.)
  3. id -unique article ID
  4. img - article image
  5. title - article title
  6. url - article URL (include http:// or www.)

Emote widget iframe looks like this:

https://cdn.vuukle.com/widgets/emotes.html?apiKey=c7368a34-dac3-4f39-9b7c-b8ac2a2da575&host=smalltester.000webhostapp.com&articleId=381&img=https://smalltester.000webhostapp.com/wp-content/uploads/2017/10/wallhaven-303371-825x510.jpg&title=New%20post%2022&url=https://smalltester.000webhostapp.com/2017/12/new-post-22#1

Required parameters (for emote widget iframe):

  1. apiKey - Your API key (https://docs.vuukle.com/how-to-embed-vuukle-2.0-via-js/)
  2. host - your site host (Exclude http:// or www.)
  3. articleId -unique article ID
  4. img - article image
  5. title - article title
  6. url - article URL (include http:// or www.)

If you have any additional options to include, please contact support@vuukle.com

Integration Steps

  1. Create xml resourse:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout\_width="match\_parent"
    android:layout\_height="match\_parent"
    tools:context="com.example.pc\_5.vuukleweb.MainActivity">
    <WebView
        android:id="@+id/activity\_main\_webview\_comments"
        android:layout\_width="match\_parent"
        android:layout\_height="match\_parent"
        tools:layout\_editor\_absoluteX="8dp"
        tools:layout\_editor\_absoluteY="8dp" />
</RelativeLayout>
  1. Add permission to AndroidManifest.xml:

    <uses-permission android:name="android.permission.INTERNET" />
  2. Getting events from javascript page.

You can listen to events from javascript via console logs. WebChromeClient provides a callback onConsoleMessage.

Example:

//mWebViewComments - your WebView

mWebViewComments.setWebChromeClient(new WebChromeClient() { @Override public boolean onConsoleMessage(ConsoleMessage consoleMessage) {

//mWebViewComments - your WebView
mWebViewComments.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onConsoleMessage(ConsoleMessage consoleMessage) {

      //message
                Log.d("consolejs", consoleMessage.message());
                return super.onConsoleMessage(consoleMessage);
            }
 	    @Override
            public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
                WebView popup = new WebView(MainActivity.this);
                popup.getSettings().setJavaScriptEnabled(true);
				popup.setLayoutParams(view.getLayoutParams());
                popup.setWebChromeClient(new WebChromeClient() {
                    @Override
                    public void onCloseWindow(WebView window) {
                        mWebViewComments.removeView(window);
                    }

                });
                popup.getSettings().setUserAgentString(popup.getSettings().getUserAgentString().replace("; wv", ""));
                popup.setWebViewClient(new WebViewClient() {});
                view.addView(popup);
                WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
                transport.setWebView(popup);
                resultMsg.sendToTarget();
                return true;
            }
        });
  1. Passing data to javascript page.

WebView lets you ability to inject your javascript code into page. We can use it for passing data.

Example:

//signInUser(name, email) - function implemented in javascript code on page
mWebViewComments.loadUrl("javascript:signInUser("name", "email")");
  1. Listening on url loading.

We also can override url loading with WebViewClient.

Example:

mWebViewComments.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, final String url) {

     //Clicked url
                Log.d(TAG, "Clicked url: " + url);
  		view.loadUrl(url);
                //if u use super() it will load url
                return true;
            }
        });
  1. Handling social login windows.

    You need to add the property .setSupportMultipleWindows(true)to webview setting in order to enable the support of multiple windows.


The full application example you can check here or download a demo APK Here