{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-integrate-vuukle-in-native-mobile-application/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"633eac3e-0597-5b8e-80be-d8c38fa1b2d6","html":"

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.

\n

You will be working with our iframe URL’s

\n

Comment widget iframe looks like this:

\n

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

\n

Required parameters (for comment widget iframe):

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

Emote widget iframe looks like this:

\n

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

\n

Required parameters (for emote widget iframe):

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

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

\n

Integration Steps

\n
    \n
  1. Create xml resourse:
    2. \n
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:layout_width=\"match_parent\"\n    android:id=\"@+id/container\"\n    android:layout_height=\"match_parent\"\n    tools:context=\"com.vuukle.webview.MainActivity\">\n\n    <WebView\n        android:id=\"@+id/activity_main_webview_comments\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        tools:layout_editor_absoluteX=\"8dp\"\n        tools:layout_editor_absoluteY=\"8dp\" />\n\n</FrameLayout>
\n

Add permission to AndroidManifest.xml:

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

Getting events from javascript page.

\n

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

\n

Example:

\n
//javascript support\n    mWebViewComments.getSettings().setJavaScriptEnabled(true);\n    mWebViewComments.getSettings().setDomStorageEnabled(true);\n    mWebViewComments.getSettings().setSupportMultipleWindows(true);\n    mWebViewComments.setWebChromeClient(webChromeClient);
\n

The webСlientChrome looks like this

\n
 private WebChromeClient webChromeClient = new WebChromeClient() {\n        @Override\n        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {\n            Log.d("consoleJs", consoleMessage.message());\n            //Listening for console message that contains "Comments initialized!" string\n            if (consoleMessage.message().contains("Comments initialized!")) {\n                //signInUser(name, email) - javascript function implemented on a page\n                mWebViewComments.loadUrl("javascript:signInUser('" + name + "', '" + email + "')");\n            }\n            return super.onConsoleMessage(consoleMessage);\n        }\n​\n        @Override\n        public boolean onCreateWindow(final WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {\n            popup = new WebView(MainActivity.this);\n            popup.getSettings().setJavaScriptEnabled(true);\n            popup.getSettings().setPluginState(WebSettings.PluginState.ON);\n            popup.getSettings().setSupportMultipleWindows(true);\n            popup.setLayoutParams(view.getLayoutParams());\n            popup.getSettings().setUserAgentString(popup.getSettings().getUserAgentString().replace("; wv", ""));\n            final String[] urlLast = {""};\n            popup.setWebViewClient(new WebViewClient() {\n                @Override\n                public boolean shouldOverrideUrlLoading(WebView view, String url) {\n                    if (url.contains(AUTH) || url.contains(CONSENT)) {\n                        Log.d("openWebView", "open vebView 2 " + url);\n                        if (popup != null)\n                            popup.loadUrl(url);\n                        checkConsent(url);\n                    } else {\n                        return selectOpenTab(url);\n                    }\n                    return true;\n                }\n               private boolean selectOpenTab(String url) {\n                    if (url.contains("msg_url")) {\n                        Log.d("openWebView", "open app " + url);\n                        openSite.openApp(url);\n                    } else if (url.contains("facebook") || url.contains("twitter") || url.contains("telegram")) {\n                        Log.d("openWebView", "open vebView 2 " + url);\n                        popup.loadUrl(url);\n                    } else {\n                        Log.d("openWebView", "open vebView 1 " + url);\n                        mWebViewComments.loadUrl(url);\n                        mContainer.removeView(popup);\n                        popup.destroy();\n                        return false;\n                    }\n                    return true;\n                }\n                          private void checkConsent(String url) {\n                    if (urlLast[0].equals(url)) {\n                        mContainer.removeView(popup);\n                        popup.destroy();\n                    } else {\n                        mWebViewComments.reload();\n                        urlLast[0] = url;\n                    }\n                }\n​\n            });\n            popup.setWebChromeClient(new WebChromeClient() {\n                @Override\n                public void onCloseWindow(WebView window) {\n                    super.onCloseWindow(window);\n                    mContainer.removeView(window);\n                }\n            });\n            mContainer.addView(popup);\n            WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;\n            transport.setWebView(popup);\n            resultMsg.sendToTarget();\n​\n            return true;\n        }\n        // For Lollipop 5.0+ Devices\n        public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {\n            if (uploadMessage != null) {\n                uploadMessage.onReceiveValue(null);\n                uploadMessage = null;\n            }\n            uploadMessage = filePathCallback;\n            return openPermission();\n        }\n        private boolean openPermission() {\n            if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {\n                openPhoto.selectImage(MainActivity.this);\n                return true;\n            } else {\n                ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.CAMERA}, CAMERA_PERMISSION);\n                try {\n                    openPhoto.selectImage(MainActivity.this);\n                } catch (Exception e) {\n                    Toast.makeText(MainActivity.this, "An error has occurred", Toast.LENGTH_SHORT).show();\n                }\n                if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {\n                    openPhoto.selectImage(MainActivity.this);\n                    return true;\n                } else {\n                    uploadMessage = null;\n                    return false;\n               }\n            }\n        }\n    };
\n

Return the selected photo or snapshot

\n
protected void onActivityResult(int requestCode, int resultCode, Intent intent) {\n    if (CAMERA_PERMISSION == resultCode && requestCode == Activity.RESULT_OK)\n        openPhoto.selectImage(MainActivity.this);\n    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {\n        if (requestCode == REQUEST_SELECT_FILE) {\n            if (uploadMessage == null)\n                return;\n            if (intent == null) {\n                Intent intent1 = new Intent();\n                intent1.setData(openPhoto.getImageUri());\n             uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent1));\n            } else\n                uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));\n            uploadMessage = null;\n        }\n    } else if (requestCode == FILE_CHOOSER_RESULT_CODE) {\n        if (null == mUploadMessage)\n           return;\n        Uri result = intent == null || resultCode != MainActivity.RESULT_OK ? null : intent.getData();\n        mUploadMessage.onReceiveValue(result);\n        mUploadMessage = null;\n    }\n}
\n

Passing data to javascript page.

\n

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

\n

Example:

\n
//signInUser(name, email) - function implemented in javascript code on page\nmWebViewComments.loadUrl(\"javascript:signInUser('\" + name + \"', '\" + email + \"')\");
\n

Listening on url loading.

\n

We also can override url loading with WebViewClient.

\n

Example:

\n
 mWebViewComments.setWebViewClient(new WebViewClient() {\n    @Override\n    public boolean shouldOverrideUrlLoading(WebView view, final String url) {\n        //Clicked url\n        Log.d(TAG, "Clicked url: " + url);\n        if (url.contains("mailto:to") || url.contains("mailto:")) {\n            openSite.openEmail(url.replace("%20", " "));\n        } else {\n            //Lets signInUser whenever url is clicked just for sample\n            openSite.openWhatsApp(url, view);\n            openSite.openMessenger(url);\n        }\n        //if u use super() it will load url into webview\n        return true;\n    }\n});
\n

Class for different page transitions

\n

Example:

\n
public class OpenSite {\n    private Context context;\n    public OpenSite(Context context) {\n        this.context = context;\n    }\n    public void openWhatsApp(String url, WebView view) {\n        url = decodeUrl(url);\n        if (!url.contains("whatsapp://send") && !url.contains("fb-messenger"))\n            view.loadUrl(url);\n        else if (url.contains("whatsapp://send"))\n            openApp("https://api.whatsapp.com" + url.substring(url.indexOf("://") + 2));\n    }\n    public void openMessenger(String url) {\n        url = decodeUrl(url);\n        if (url.contains("fb-messenger")) {\n            Intent sendIntent = new Intent();\n            sendIntent.setAction(Intent.ACTION_SEND);\n            sendIntent\n                    .putExtra(Intent.EXTRA_TEXT,\n                            url.substring(url.indexOf("?link=") + 6));\n            sendIntent.setType("text/plain");\n            sendIntent.setPackage("com.facebook.orca");\n            try {\n                context.startActivity(sendIntent);\n            } catch (android.content.ActivityNotFoundException ex) {\n                context.startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=com.facebook.orca")));\n            }\n        }\n    }\n    public void openEmail(String url) {\n        url = decodeUrl(url);\n        Intent emailIntent = new Intent(Intent.ACTION_SENDTO, Uri.fromParts(\n                "mailto", "", null));\n        emailIntent.putExtra(Intent.EXTRA_SUBJECT, url.substring(url.indexOf("subject=") + 8, url.indexOf("&body")));\n        emailIntent.putExtra(Intent.EXTRA_TEXT, url.substring(url.indexOf("body=") + 5));\n        try {\n            context.startActivity(Intent.createChooser(emailIntent, null));\n        } catch (android.content.ActivityNotFoundException ex) {\n            context.startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=com.google.android.gm")));\n        }\n    }\n    private String decodeUrl(String url) {\n        try {\n            url = URLDecoder.decode(url, "UTF-8");\n        } catch (UnsupportedEncodingException e) {\n            e.printStackTrace();\n            return url;\n        }\n        return url;\n    }\n    public void openApp(String url) {\n        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));\n        context.startActivity(intent);\n    }\n}
\n

Open dialog

\n

Lets you choose between gallery and photo.

\n

Example:

\n
public class OpenPhoto {\n    private String FORMAT_TIME = "yyyyMMddHHmmss";\n    private String FILE_EXTENSION = ".jpg";\n    private String FILE_PROVIDER = "com.vuukle.webview.android.fileprovider";\n    private Uri imageUri;\n    public Uri getImageUri() {\n        return imageUri;\n    }\n    private File getPictureFile(Context contex) throws IOException {\n        String timeStamp = new SimpleDateFormat(FORMAT_TIME).format(new Date());\n        String pictureFile = "VUUKLE" + timeStamp;\n        File storageDir = contex.getExternalFilesDir(Environment.DIRECTORY_PICTURES);\n        File image = File.createTempFile(pictureFile, FILE_EXTENSION, storageDir);\n        String pictureFilePath = image.getAbsolutePath();\n        return image;\n    }\n    public  void selectImage(Context context) {\n        final CharSequence[] options = {context.getString(R.string.take_photo), context.getString(R.string.choose_from_gallery), context.getString(R.string.cancel)};\n        AlertDialog.Builder builder = new AlertDialog.Builder(context);\n        builder.setTitle(context.getString(R.string.choose_your_profile_picture));\n        builder.setItems(options, (dialog, item) -> {\n            if (options[item].equals(context.getString(R.string.take_photo))) {\n                Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);\n                File photo = null;\n                try {\n                    photo = getPictureFile(context);\n                } catch (IOException e) {\n                    e.printStackTrace();\n                }\n                imageUri = FileProvider.getUriForFile(\n                        context,\n                        FILE_PROVIDER,\n                        photo);\n                intent.putExtra(MediaStore.EXTRA_OUTPUT,\n                        imageUri);\n                ((MainActivity) context).startActivityForResult(intent, REQUEST_SELECT_FILE);\n            } else if (options[item].equals(context.getString(R.string.choose_from_gallery))) {\n                try {\n                    Intent pickPhoto = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);\n                    ((MainActivity) context).startActivityForResult(pickPhoto, REQUEST_SELECT_FILE);\n                } catch (ActivityNotFoundException e) {\n                }\n           } else if (options[item].equals(context.getString(R.string.cancel))) {                dialog.dismiss();\n            }\n        });\n        builder.show();\n    }\n}
\n
\n

Handling social login windows.

\n

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

\n
\n

Implements the possibility to go back on the previous page.

\n

Handling onBackPressed

\n
 public void onBackPressed() {\n     if (popup != null && popup.getParent() != null) {\n         mContainer.removeView(popup);\n         popup.destroy();\n     } else {\n         mWebViewComments.goBack();\n     }\n }
\n
\n

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

","frontmatter":{"title":"How to integrate Vuukle web version into your native Android application","date":"March 03, 2020","category":"Install Vuukle","tags":["how to","install","vuukle","native","android"],"shortDescription":"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"}}},"pageContext":{"id":"633eac3e-0597-5b8e-80be-d8c38fa1b2d6"}}}