Get Started - Android

This section will cover a step-by-step approach to bridge your Flutter project to OneTalk Live Chat Android SDK. We will be using Android Studio to configure native code in Flutter project.

Before you get started: Make sure you have created a channel in OneTalk dashboard and obtain the APP_KEY_SECRET.

Configure and Initialize TapTalk.io Omnichannel Android SDK for Flutter project

Step 1: Open Flutter project's android folder in Android Studio

To begin, open the android folder inside your Flutter project root folder as a project using Android Studio. Once all gradle dependencies are downloaded, we will follow the first step of OneTalk Android Live Chat implementation by installing the omnichannel SDK for the android project.

Step 2: Install TapTalk.io Omnichannel SDK

To start, open your Android project and add the following repositories to your top-level build.gradle file.

build.gradle (project)

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
        maven { url "https://s3.amazonaws.com/repo.commonsware.com" }
    }
}

Then add the following dependency to your app-level build.gradle:

build.gradle (:app)

dependencies {
    implementation 'com.github.taptalk-io:taptalk.io-omnichannel-android:2.2.0'
}

You can check a more updated version release notes of the SDK here.

Note: In the app build.gradle file, make sure that your project is using supported Java 8 language features under the android tag like below

build.gradle (:app)

android {
    
    ...

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

Note: If you are getting a dex error when building the project (e.g. Cannot fit requested classes in a single dex file), try to enable multidex in the app build.gradle file.

build.gradle (:app)

android {
    
    ...

    defaultConfig {
        ...
        multiDexEnabled true
    }
}

After adding the required dependency, sync your project and begin the next step by writing custom platform-specific code using platform channels.

Step 3: Create Flutter Platform Client

If you have finished this step from the iOS side, you can skip to the next step.

In this example, we will add the following inside the MyHomePageState class:

Method Channel to connect to the native Android host
openOneTalkLiveChatTalkUI() function to open the Live Chat's view
A button to call the openOneTalkLiveChatTalkUI() function

main.dart

class _MyHomePageState extends State<MyHomePage> {
  
  // Create the MethodChannel
  static const oneTalkLiveChatMethodChannel = MethodChannel('io.taptalk.onetalklivechat');
  
  // Function to open the live chat view
  Future<void> _openOneTalkLiveChatTalkUI() async {
    try {
      // Initialize OneTalk Live Chat SDK
      final bool isOneTalkInitialized = await oneTalkLiveChatMethodChannel.invokeMethod('initOneTalkLiveChat');
      if (isOneTalkInitialized) {
        // Open live chat view
        await oneTalkLiveChatMethodChannel.invokeMethod('openLiveChatView');
      }
    }
    on PlatformException catch (e) {
      // Call might fail if the platform doesn’t support the platform API
      print(e.message);
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      body:
        ...
          // Sample button to call openOneTalkLiveChatTalkUI
          ElevatedButton(
            onPressed: _openOneTalkLiveChatTalkUI,
            child: Text(
              'Get Started with OneTalk Live Chat',
            ),
          ),
      ...
    );
  }
}

Please note the name parameter in the MethodChannel constructor that was used (io.taptalk.onetalklivechat), and the method name in the invokeMethod() parameter (initOneTalkLiveChat & openLiveChatView). We will use the same names later to configure Flutter engine in the native side.

Step 4: Add an Android platform-specific implementation

Next, we will configure the native side of the Android host implementation. Go back to previously opened Android Studio project, and open MainActivity file. We will do the following to the Activity:

Add a MethodChannel Result variable to handle asynchronous call
override configureFlutterEngine to handle calls from the MethodChannel that we previously created.
Add native functions to init OneTalk Live Chat SDK and open the live chat view

MainActivity.java

import io.taptalk.taptalklive.TapTalkLive;
import io.taptalk.taptalklive.Listener.TapTalkLiveListener;

public class MainActivity extends FlutterActivity {

    // MethodChannel Result to handle asynchronous call
    private MethodChannel.Result oneTalkMethodChannelResult = null;

    // Override configureFlutterEngine
    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        
        // Handle MethodChannel calls
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), "io.taptalk.onetalklivechat")
            .setMethodCallHandler((call, result) -> {
                // Save result to variable
                oneTalkMethodChannelResult = result;
                switch (call.method) {
                    // Call native methods
                    case "initOneTalkLiveChat":
                        initOneTalkLiveChat();
                        break;
                    case "openLiveChatView":
                        openLiveChatView();
                        break;
                    default:    
                        result.notImplemented();
                }
            }
        );
    }
    
    // Method to initialize OneTalk Live Chat SDK
    private void initOneTalkLiveChat() {
        TapTalkLive.init(
            getApplicationContext(),
            ONETALK_APP_KEY_SECRET,
            R.drawable.your_app_icon,
            getString(R.string.your_app_name),
            new TapTalkLiveListener() {
                @Override
                public void onInitializationCompleted() {
                    if (oneTalkMethodChannelResult != null) {
                        oneTalkMethodChannelResult.success(true);
                    }
                }
            }
        );
    }

    // Method to open live chat view
    private void openLiveChatView() {
        boolean isSuccess = TapTalkLive.openTapTalkLiveView(this);
        if (oneTalkMethodChannelResult != null) {
            oneTalkMethodChannelResult.success(true);
        }
    }
}

MainActivity.kt

import io.taptalk.taptalklive.TapTalkLive
import io.taptalk.taptalklive.Listener.TapTalkLiveListener

class MainActivity: FlutterActivity() {

    // MethodChannel Result to handle asynchronous call
    private var oneTalkMethodChannelResult: MethodChannel.Result? = null

    // Override configureFlutterEngine
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        // Handle MethodChannel calls
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "io.taptalk.onetalklivechat")
            .setMethodCallHandler {
                call, result ->
                // Save result to variable
                oneTalkMethodChannelResult = result
                when (call.method) {
                    // Call native methods
                    "initOneTalkLiveChat" -> initOneTalkLiveChat()
                    "openLiveChatView" -> openLiveChatView()
                    else -> result.notImplemented()
                }
            }
    }
    
    // Method to initialize OneTalk Live Chat SDK
    private fun initOneTalkLiveChat() {
        TapTalkLive.init(
            applicationContext,
            ONETALK_APP_KEY_SECRET,
            R.drawable.your_app_icon,
            getString(R.string.your_app_name),
            object : TapTalkLiveListener() {
                override fun onInitializationCompleted() {
                    oneTalkMethodChannelResult?.success(true)
                }
            }
        )
    }

    // Method to open live chat view
    private fun openLiveChatView() {
        val isSuccess = TapTalkLive.openTapTalkLiveView(this)
        oneTalkMethodChannelResult?.success(isSuccess)
    }
}

openTapTalkLiveView will return true if opening the view is successful, and will return false if it fails due to incomplete initialization. TapTalkLive initialization might not be completed if the device is not connected to internet or an incorrect APP_KEY_SECRET parameter was provided.

Step 5: Enable Chat Features

Please follow the steps in Enable Chat Features page to enable TapTalk.io's chat features, such as contact sync and sending media, document, and location messages.

You can now try running the app. Pressing the sample button will invoke the openOneTalkLiveChatTalkUI() method that we previously created, which will initialize OneTalk Live Chat SDK, and open the live chat view once the initialization is completed. You may also try a different implementation and separate the init and the open view methods. You can also add more calls to other native methods with the same approach using the same MethodChannel.

Note: You can check a more complete implementation guide in the OneTalk Live Chat for Android section.

PreviousOneTalk Live Chat for Flutter NextGet Started - iOS

Last updated 1 year ago