Android SDK

This document assumes that you understand the basic terms of Android app development in Kotlin language

Part 1: To Add Floating Chat Icon:

• Step 1 : Add a WebView in your layout file where you want to add your floating chat button

---

Code Sample

<androidx.cardview.widget.CardView
        android:id="@+id/fab"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:elevation="6dp"
        app:cardCornerRadius="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent">


        <WebView
            android:id="@+id/floatingWebView"
            android:layout_width="80dp"
            android:layout_height="80dp" />


        <View
            android:id="@+id/touchView"
            android:layout_width="80dp"
            android:layout_height="80dp"/>


    </androidx.cardview.widget.CardView>

• Step 2: Bind the webview to an activity in your code

floatingWebView = findViewById(R.id.floatingWebView)
// Configure WebView settings
val webSettingsFloating: WebSettings = floatingWebView.settings
webSettingsFloating.javaScriptEnabled = true // Enable JavaScript (optional)

// Load a URL in the WebView

floatingWebView.loadUrl("URL From Sales Assist Dashboard")
floatingWebView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)

        val cssCode = "video::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button { display: none !important; }"
        floatingWebView.loadUrl("javascript:(function() { var style = document.createElement('style'); style.innerHTML = '$cssCode'; document.head.appendChild(style); })();")
    }
}

With This, you will see a floating chat icon in your app

Now we need to open the chat window with the click of the floating chat icon.

but before that, we need to create a web view for the opening window

• Step 3: Create A new Activity and layout with webview

<WebView
        android:id="@+id/webViewNext"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView

class NextWebViewActivity : AppCompatActivity() {
    private lateinit var webViewNext: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_next_web_view)

        // Find the WebView by its ID
        webViewNext = findViewById(R.id.webViewNext)

        // Configure WebView settings
        val webSettings: WebSettings = webViewNext.settings
        webSettings.javaScriptEnabled = true // Enable JavaScript (optional)

        // Load a URL in the WebView
        webViewNext.loadUrl("your URL from sale assist dashboard")

    }
}

• Step4: Setup Touch Event with the floating chat icon

val touchView: View = findViewById(R.id.touchView)
        touchView.setOnClickListener {
            // Add your action here
            // For example, navigate to another activity
             val intent = Intent(this, NextWebViewActivity::class.java)
             startActivity(intent)
        }

Part 2: Adding Slider View

• Step 1 : Add a Webview in your layout file

<WebView
        android:id="@+id/webView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="48dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/webView"
        app:layout_constraintEnd_toEndOf="@+id/webView"
        app:layout_constraintStart_toStartOf="@+id/webView"
        app:layout_constraintTop_toTopOf="@+id/webView" />

• Step 2 : Connect webview to Activity and load the URL in it

webView = findViewById(R.id.webView)
progressBar = findViewById(R.id.progressBar)
val webSettings: WebSettings = webView.settings


webSettings.javaScriptEnabled = true // Enable JavaScript (optional)


webView.webViewClient = object : WebViewClient() {
            @SuppressLint("NewApi")
            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                super.onPageStarted(view, url, favicon)
                progressBar.visibility = View.VISIBLE
            }


            @SuppressLint("NewApi")
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                progressBar.visibility = View.GONE
            }
        }
webView.loadUrl("URL From Sales Assist Dashboard")