Integrate Widget for Android with WebView

Attention the Tiledesk Widget is compatible with Android 5+
Integrate Widget for Android with WebView
Permissions
Don't forget to give permission in your manifest.xml adding the following:
1
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
2
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
Copied!
Activity
1
package com.tiledesk.tiledeskwidgetintegrationexample;
2
​
3
import androidx.annotation.RequiresApi;
4
import androidx.appcompat.app.AppCompatActivity;
5
​
6
import android.os.Bundle;
7
​
8
import android.app.Activity;
9
import android.content.ActivityNotFoundException;
10
import android.content.Intent;
11
import android.net.Uri;
12
import android.os.Build;
13
import android.util.Log;
14
import android.webkit.ConsoleMessage;
15
import android.webkit.ValueCallback;
16
import android.webkit.WebChromeClient;
17
import android.webkit.WebSettings;
18
import android.webkit.WebView;
19
import android.widget.Toast;
20
​
21
public class TiledeskActivity extends AppCompatActivity {
22
​
23
​
24
    public static final int REQUEST_SELECT_FILE = 100;
25
    public ValueCallback<Uri[]> uploadMessage;
26
​
27
    @Override
28
    protected void onCreate(Bundle savedInstanceState) {
29
        super.onCreate(savedInstanceState);
30
        setContentView(R.layout.activity_tiledesk);
31
​
32
        WebView myWebView = (WebView) findViewById(R.id.tiledesk);
33
​
34
​
35
        WebSettings webSettings = myWebView.getSettings();
36
        webSettings.setJavaScriptEnabled(true);
37
​
38
​
39
        myWebView.setWebChromeClient(new FileChooserWebChromeClient(this) {
40
            @Override
41
            public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
42
                Log.d("TiledeskActivity", consoleMessage.message() + " -- From line "
43
                        + consoleMessage.lineNumber() + " of "
44
                        + consoleMessage.sourceId());
45
                return super.onConsoleMessage(consoleMessage);
46
            }
47
        });
48
​
49
//        allow to snap photos
50
        webSettings.setAllowFileAccess(true);
51
​
52
        webSettings.setDomStorageEnabled(true);
53
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
54
​
55
        myWebView.loadUrl("https://widget.tiledesk.com/v5/assets/twp/index.html?tiledesk_projectid=<CHANGE_IT>&tiledesk_fullscreenMode=true&tiledesk_hideHeaderCloseButton=true&tiledesk_isOpen=true");
56
​
57
    }
58
​
59
​
60
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
61
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
62
        super.onActivityResult(requestCode, resultCode, data);
63
        if (requestCode == REQUEST_SELECT_FILE) {
64
            if (uploadMessage == null) return;
65
            uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
66
            uploadMessage = null;
67
        }
68
    }
69
​
70
​
71
    public class FileChooserWebChromeClient extends WebChromeClient {
72
​
73
        private Activity myActivity;
74
​
75
        public FileChooserWebChromeClient(TiledeskActivity myActivity) {
76
            this.myActivity = myActivity;
77
        }
78
​
79
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
80
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
81
            uploadMessage = filePathCallback;
82
​
83
            Intent intent = fileChooserParams.createIntent();
84
            try {
85
                myActivity.startActivityForResult(intent, REQUEST_SELECT_FILE);
86
            } catch (ActivityNotFoundException e) {
87
                Toast.makeText(myActivity, "Cannot open file chooser", Toast.LENGTH_LONG).show();
88
                return false;
89
            }
90
​
91
            return true;
92
        }
93
    }
94
​
95
}
Copied!
Find here other widget parameters to customize your experience.
Layout
1
<?xml version="1.0" encoding="utf-8"?>
2
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
    xmlns:app="http://schemas.android.com/apk/res-auto"
4
    xmlns:tools="http://schemas.android.com/tools"
5
    android:layout_width="match_parent"
6
    android:layout_height="match_parent"
7
    tools:context=".TiledeskActivity">
8
​
9
    <WebView
10
        android:id="@+id/tiledesk"
11
        android:layout_width="match_parent"
12
        android:layout_height="match_parent" />
13
​
14
</androidx.constraintlayout.widget.ConstraintLayout>
Copied!
Example
You can find here a complete Tiledesk Widget example for Android.

Apps - Previous

External Channels integration flow diagram

Next - Mobile SDK

Integrate Widget for iOS with WKWebView

Last modified 2mo ago

Copy link

Contents

Integrate Widget for Android with WebView