How to integrate YourGPT Chat widget in an android application

Integrate AI-powered chatbot functionality into your Android applications with the YourGPT Android SDK. This comprehensive guide covers Gradle installation, complete implementation steps with Kotlin, and best practices for seamless chatbot integration in your native Android apps.

What is YourGPT Android SDK?

The YourGPT Android SDK is a native Kotlin library that brings intelligent AI chatbot capabilities to your Android applications. Whether you're building customer support features, interactive assistants, or conversational interfaces, this SDK provides a seamless integration experience optimized for Android devices.

Prerequisites

Before you begin, ensure you have:

• Android Studio Arctic Fox or later installed

• Minimum SDK version 21 (Android 5.0 Lollipop) or higher

• A YourGPT account with a widget UID (sign up here)

• Basic knowledge of Android development and Kotlin

• Gradle build system configured in your project

Installation

Add the dependency to your app's build.gradle file:

 gradle dependencies {     
  implementation 'com.yourgpt:android-sdk:1.0.0'     
  implementation 'androidx.webkit:webkit:1.8.0' 
  } 

After adding the dependencies, sync your project with Gradle files.

Permissions

Update your AndroidManifest.xml to include the required permissions and activity declaration:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Required permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat.Light.DarkActionBar">

        <!-- Your main activity -->
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- YourGPT SDK ChatbotActivity - Required -->
        <activity
            android:name="com.yourgpt.sdk.ChatbotActivity"
            android:exported="false"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"
            android:hardwareAccelerated="true" />
    </application>

</manifest>

Implementation Steps

To use the YourGPT chat widget in your Android application, follow these steps:

1: Create Your Activity (e.g., MainActivity.kt)

Implement `YourGPTEventListener` and initialize the SDK:

package com.yourapp
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.lifecycleScope
import com.yourgpt.sdk.*
import kotlinx.coroutines.flow.collect
import kotlinx.coroutines.launch

class MainActivity : AppCompatActivity(), YourGPTEventListener {

    private lateinit var openChatButton: Button
    private lateinit var statusText: TextView

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

        setupUI()
        setupSDK()
        initializeSDK()
    }

    private fun setupUI() {
        openChatButton = findViewById(R.id.btn_open_chat)
        statusText = findViewById(R.id.tv_status)

        openChatButton.setOnClickListener {
            openChatbot()
        }

        // Disable button until SDK is ready
        openChatButton.isEnabled = false
        statusText.text = "SDK Status: Initializing..."
    }

    private fun setupSDK() {
        // Set event listener
        YourGPTSDK.setEventListener(this)

        // Observe SDK state changes
        lifecycleScope.launch {
            YourGPTSDK.stateFlow.collect { state ->
                updateUIForSDKState(state)
            }
        }
    }

    private fun initializeSDK() {
        // Configure SDK with your widget UID
        val configuration = YourGPTConfig(
            widgetUid = "your-widget-uid-here",  // Replace with your actual widget UID
        )

        // Initialize SDK
        lifecycleScope.launch {
            try {
                YourGPTSDK.initialize(configuration)
            } catch (error: Exception) {
                runOnUiThread {
                    Toast.makeText(
                        this@MainActivity,
                        "SDK initialization failed: ${error.message}",
                        Toast.LENGTH_LONG
                    ).show()
                }
            }
        }
    }

    private fun updateUIForSDKState(state: YourGPTSDKState) {
        runOnUiThread {
            statusText.text = "SDK Status: ${state.connectionState.name.lowercase().replaceFirstChar { it.uppercase() }}"

            when (state.connectionState) {
                YourGPTConnectionState.CONNECTED -> {
                    statusText.setTextColor(0xFF28A745.toInt()) // Green
                    openChatButton.isEnabled = true
                }
                YourGPTConnectionState.CONNECTING -> {
                    statusText.setTextColor(0xFFFFC107.toInt()) // Orange
                    openChatButton.isEnabled = false
                }
                YourGPTConnectionState.ERROR -> {
                    statusText.setTextColor(0xFFDC3545.toInt()) // Red
                    openChatButton.isEnabled = false
                    state.error?.let {
                        statusText.text = "SDK Error: $it"
                    }
                }
                YourGPTConnectionState.DISCONNECTED -> {
                    statusText.setTextColor(0xFF6C757D.toInt()) // Gray
                    openChatButton.isEnabled = false
                }
            }
        }
    }

    private fun openChatbot() {
        val configuration = YourGPTConfig(
            widgetUid = "your-widget-uid-here",  // Replace with your actual widget UID
        )

        YourGPTSDK.openChatbot(this, configuration)
    }

    // YourGPTEventListener implementation
    override fun onMessageReceived(message: Map<String, Any>) {
        runOnUiThread {
            Toast.makeText(
                this,
                "New message: $message",
                Toast.LENGTH_SHORT
            ).show()
        }
    }

    override fun onChatOpened() {
        runOnUiThread {
            Toast.makeText(this, "Chat opened", Toast.LENGTH_SHORT).show()
        }
    }

    override fun onChatClosed() {
        runOnUiThread {
            Toast.makeText(this, "Chat closed", Toast.LENGTH_SHORT).show()
        }
    }

    override fun onError(error: String) {
        runOnUiThread {
            Toast.makeText(this, "Error: $error", Toast.LENGTH_LONG).show()
        }
    }

    override fun onLoadingStarted() {
        runOnUiThread {
            Toast.makeText(this, "Loading started", Toast.LENGTH_SHORT).show()
        }
    }

    override fun onLoadingFinished() {
        runOnUiThread {
            Toast.makeText(this, "Loading finished", Toast.LENGTH_SHORT).show()
        }
    }
}

2: Create Layout File (`res/layout/activity_main.xml`)

Create a simple layout with a button to open the chatbot:

xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center">

    <TextView
        android:id="@+id/tv_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SDK Status: Initializing..."
        android:textSize="16sp"
        android:layout_marginBottom="32dp" />

    <Button
        android:id="@+id/btn_open_chat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open YourGPT Chat"
        android:textSize="16sp"
        android:padding="16dp" />

</LinearLayout>

Configuration

The YourGPTConfig only requires your widget UID:

val configuration = YourGPTConfig(
   widgetUid = "your-widget-uid-here",  // Replace with your actual widget UID
)

Demo Screenshots

Here's how the YourGPT chatbot looks in action:

Github Link

https://github.com/YourGPT/yourgpt-widget-sdk-android