Widget for Android with WebView
This example shows how to integrate the Tiledesk Widget via a WebView for Android.
Attention the Tiledesk Widget is compatible with Android 13+
Integrate Widget for Android with WebView
Permissions
Don't forget to give permission in your manifest.xml adding the following:
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
Method 1: load Tiledesk widget from embedding url
Activity
package com.tiledesk.tiledeskwidgetintegrationexample;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.util.Log;
import android.webkit.ConsoleMessage;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;
public class TiledeskActivity extends AppCompatActivity {
public static final int REQUEST_SELECT_FILE = 100;
public ValueCallback<Uri[]> uploadMessage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tiledesk);
WebView myWebView = (WebView) findViewById(R.id.tiledesk);
myWebView.setWebChromeClient(new FileChooserWebChromeClient(this) {
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
Log.d("TiledeskActivity", consoleMessage.message() + " -- From line "
+ consoleMessage.lineNumber() + " of "
+ consoleMessage.sourceId());
return super.onConsoleMessage(consoleMessage);
}
});
// Enable JavaScript
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
// Enable DOM storage API (localStorage/sessionStorage)
webSettings.setDomStorageEnabled(true);
//allow to snap photos
webSettings.setAllowFileAccess(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//Inject widget load URL
myWebView.loadUrl("https://widget.tiledesk.com/v6/assets/twp/index.html?tiledesk_projectid=<CHANGE_IT>&tiledesk_fullscreenMode=true&tiledesk_hideHeaderCloseButton=true&tiledesk_open=true");
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == REQUEST_SELECT_FILE) {
if (uploadMessage == null) return;
uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
uploadMessage = null;
}
}
public class FileChooserWebChromeClient extends WebChromeClient {
private Activity myActivity;
public FileChooserWebChromeClient(TiledeskActivity myActivity) {
this.myActivity = myActivity;
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
uploadMessage = filePathCallback;
Intent intent = fileChooserParams.createIntent();
try {
myActivity.startActivityForResult(intent, REQUEST_SELECT_FILE);
} catch (ActivityNotFoundException e) {
Toast.makeText(myActivity, "Cannot open file chooser", Toast.LENGTH_LONG).show();
return false;
}
return true;
}
}
}
Layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".TiledeskActivity">
<WebView
android:id="@+id/tiledesk"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Method 2: load Tiledesk widget from custom html file that integrate tiledesk script
HTML code
Consider an *.html file into assets that contains basic html code with script tag able to integrate tilesk widget inside your webview
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="application/javascript">
window.tiledeskSettings=
{
projectid: "<CHANGE_IT>",
fullscreenMode: true,
open:true,
};
(function(d, s, id) {
var w=window; var d=document; var i=function(){i.c(arguments);};
i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;
var js, fjs=d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js=d.createElement(s);
js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
fjs.parentNode.insertBefore(js, fjs);
}(document,'script','tiledesk-jssdk'));
window.addEventListener('load', (event)=> {
document.dispatchEvent(new Event('mousemove'))
})
</script>
</head>
</html>
Activity
package com.tiledesk.tiledeskwidgetintegrationexample;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.util.Log;
import android.webkit.ConsoleMessage;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;
public class TiledeskInjectActivity extends AppCompatActivity {
public static final int REQUEST_SELECT_FILE = 100;
public ValueCallback<Uri[]> uploadMessage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tiledesk);
WebView myWebView = (WebView) findViewById(R.id.tiledesk);
myWebView.setWebChromeClient(new FileChooserWebChromeClient(this) {
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
Log.d("TiledeskInjectActivity", consoleMessage.message() + " -- From line "
+ consoleMessage.lineNumber() + " of "
+ consoleMessage.sourceId());
return super.onConsoleMessage(consoleMessage);
}
});
// Enable JavaScript
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
// Enable DOM storage API (localStorage/sessionStorage)
webSettings.setDomStorageEnabled(true);
//allow to snap photos
webSettings.setAllowFileAccess(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//Inject widget load URL
myWebView.loadUrl("file:///android_asset/index.html");
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == REQUEST_SELECT_FILE) {
if (uploadMessage == null) return;
uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
uploadMessage = null;
}
}
public class FileChooserWebChromeClient extends WebChromeClient {
private Activity myActivity;
public FileChooserWebChromeClient(TiledeskInjectActivity myActivity) {
this.myActivity = myActivity;
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
uploadMessage = filePathCallback;
Intent intent = fileChooserParams.createIntent();
try {
myActivity.startActivityForResult(intent, REQUEST_SELECT_FILE);
} catch (ActivityNotFoundException e) {
Toast.makeText(myActivity, "Cannot open file chooser", Toast.LENGTH_LONG).show();
return false;
}
return true;
}
}
}
Find here other widget parameters to customize your experience.
Layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".TiledeskInjectActivity">
<WebView
android:id="@+id/tiledesk"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Example
You can find here a complete Tiledesk Widget example for Android.
Last updated