Purpose of this document

This document will serve as a guide to integrate a Satisfi Labs webview chat page into your Android application. Along with this document, Satisfi Labs also provides a fully working sample Android application with code available for download.

The test application can be downloaded from the google play store: https://play.google.com/store/apps/details?id=com.satisfilabs.webclient

The associated codebase can be downloaded from here:

https://github.com/satisfi-github/SatisfiInAppWebviewAndroid

For an instance of a web chat URL, you can use the URL provided to you by your Satisfi Labs Customer success representative or you can use the following sample Url:

https://chat.satis.fi/?pageID=4398

Prerequisites

Min Deployment Target: API Level 21

IDE: Android Studio Third Party

Libraries: None

Dependencies

The minimum dependencies should involved in this project are,

dependencies { 
implementation 'androidx.appcompat:appcompat:1.2.0' 
implementation 'androidx.constraintlayout:constraintlayout:2.0.4' 
}

These dependencies should be included in:

Gradle Scripts > build.gradle (Module: yourApp)

(These dependencies may already exist in your project.)

Integration Steps

1. Install the latest version Android studio

2. Create New Project or open Existing Project

3. If new project is opened then,

   1. In the Select a Project Template window, select Empty Activity and click Next.

   2. In the Configure your project window, complete the following:

      1. Enter "Your App Name" in the Name field.

      2. Enter "com.example.yourappname" in the Package name field.

      3. If you'd like to place the project in a different folder, change its Save location.

      4. Select Java from the Language drop-down menu.

      5. Select the API 21: Android 5.0 (Lollipop) version of Android your app will support this version as Minimum SDK field.

      6. Leave the other options as they are.

      7. Click Finish.

4. If Existing project is opened then,

   1. Check whether the Minimum SDK is API 21 or not, if not then change it into API 21: Android 5.0 (Lollipop) version.

   2. Check whether the Language of the Project is Java or not, if not create new project or change the language of present project into java

5. With the Project window open, select View > Tool Windows > Project and the Android view is selected from the drop-down list at the top of that window.

6. Add user permissions to the ManiFest file located: app > manifests > AndroidManifest.xml.

   a. Internet Permissions

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

b. Location Permissions

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

c. Internal storage permissions for uploading images

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

7. Add the Activity tag under application tag in the Manifest file as shown below,

<activity
android:name=".WebContainerActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|
uiMode|screenSize|smallestScreenSize"/>

8. If you're working with the Http Url rather than Https, Then You need to add below line, in Manifest File file located: app > manifests > AndroidManifest.xml. Under application tag,

<application
	. . .
	android:usesCleartextTraffic="true"
	. . .
</application>

9. Open the Java folder to copy Two Java files, which are located at the following url: https://bitbucket.org/satisfi/satisfiinappwebviewandroid/src/master/satisfilabsandroid/app/src/main/java/com/satisfilabs/webclient/

After opening the url, copy the two java files: ConstantsUtility and WebContainerActivity into the java folder on Android Studio. Java folder is located on app > java > com.example.yourappname

You should be able to paste the files into this folder.

10. Open the folder Layout which is located on app > res > layout. Here you will need to paste one xml file i.e activity_web_container.xml which is located at the following url: https://bitbucket.org/satisfi/satisfiinappwebviewandroid/src/master/satisfilabsandroid/app/src/main/res/layout/ Copy the file activity_web_container.xml and paste into the layout folder

Copy the file activity_web_container.xml and paste into the layout folder.

11. Copy the images and respective xml files in the Drawable folder from following url: https://bitbucket.org/satisfi/satisfiinappwebviewandroid/src/master/satisfilabsandroid/app/src/main/res/drawable/ Open above link and copy the following files: back.xml, exit.xml, refresh.xml and progressbar_circular.xml and paste into app > res > drawable folder.

12. To include animation effects when moving from one activity to another activity, copy the anim folder from the link below to the app > res directory.

https://bitbucket.org/satisfi/satisfiinappwebviewandroid/src/master/satisfilabsandroid/app/src/main/res/

Note

If animation effects are to be excluded you should remove the line 324 in WebContainerActivity java class and line 124 in ConstantsUtility java class.

13. You're done with basic Requirements of the project. Next section will cover how to set up a call to a method to run the Satisfi WebView.

Integrating WebView Classes

1. Call the following method from the ConstantsUtility class:

   1. openWebView(String baseUrl, String UrlParams, Context context, boolean openInWebView, boolean topBar, boolean bottomBar)

      For this method you’ll need to the following parameters:

   2. baseUrl - In this you need to pass the Url without parameters

   3. UrlParams - In this you need to pass the parameters of the url

   4. Context - In this you need to pass the Present Activity context, For example - you're in MainActivity in your project, want to open a WebView Activity then you need to pass the context of MainActivity in the above method

   5. Open In Webview - In this you need to pass boolean value, if true has passed then it will open the url in webView. If false has passed then it will open the url in chrome browser.

   6. Top Bar - In this you need to pass boolean value, if true then top bar will be displayed only in webView only otherwise the top bar is hidden.

   7. Bottom Bar - In this you need to pass boolean value, if true then bottom bar will be displayed only in webView only otherwise the top bar is hidden.

2. Call Method “openWebView” from your Current Activity. String valueFromMethod = ConstantsUtility.openWebView("https://chat.satis.fi/?pageID=", "4398", CurrentActivity.this, true, true, true); This method has a return type of a String. This method returns a string only when there is an error in the URL only, Otherwise it opens WebView Activity. If the URL has any error then the Method will returns,

   1. “Zero” - Which means the URL length is zero

   2. “InvalidUrl” - Which means the URL is not a valid one.

   3. “noInternetConnection” - Which means the user does not have Internet connectivity.

Note

This method should run in background only. If you want to show the user some action is done in the background then you can use ProgressBar.

Sample Code For Background Execution

progressDialog.show();
new Thread(() -> {
   String error = ConstantsUtility.openWebView("https://chat.satisfitest.us/?pageID=1897", "",
YourActivity.this, true, true, true);
   runOnUiThread(() -> {
       switch (getError) {
           case ConstantsUtility.urlLength:	// If the url length is ‘0’ then this will be executed      
               progressDialog.dismiss();
               break;
           case ConstantsUtility.noInternet:	// If the user does not have internet this will be executed
               progressDialog.dismiss();
               break;
           case ConstantsUtility.inValidURL:	// If the user enter wrong url this will be executed
               progressDialog.dismiss();
               break;
           default:					// this is for dismissing the progress bar
               progressDialog.dismiss();
               break;
       }
   });
}).start();

Additional Recommendations

1. Avoid loading the Chat Webview with modals on Android. This may cause undesired scrolling behavior and display issues when the keyboard is loaded.

2. Avoid using the following setting: android:windowSoftInputMode="adjustPan" This may cause the input container to be hidden when the keyboard is loaded.