TapTalk.io Documentation
  • Introduction
  • OneTalk Omnichannel Documentation
    • Getting Started with OneTalk
      • Team Members
      • Add Topic
      • Assign Agent to Topic
      • Paid Proactive Chat
    • Channel Integration
      • Telegram Integration
      • WhatsApp SME Integration
      • Instagram DM Integration
      • Facebook Messenger Integration
      • Live Chat Integration (iOS, Android, Web)
        • OneTalk Live Chat for Android
          • Get Started
          • Event Listener
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for iOS
          • Get Started
          • Background Process in TapTalk.io Omnichannel iOS
          • Event Delegate
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for Web
          • Get Started
          • Callback
          • Method
        • OneTalk Live Chat for React Native
          • Get Started - Android
          • Authentication - Android
          • Get Started - iOS
          • Authentication - iOS
        • OneTalk Live Chat for Flutter
          • Get Started - Android
          • Get Started - iOS
      • Google Business Messages Integration
      • Google Business Profile Integration
      • Tokopedia Integration
    • Integration API
      • Inbox API
      • User/Contact API
    • Live Chat Widget Callback Function
    • Social Channel Button
    • Custom Chatbot Integration
      • Get Started
      • Edit or Delete Chatbot
      • Development
    • QnA via API
    • Webhook
  • PowerTalk Chat SDK Documentation
    • Getting Started with PowerTalk
    • PowerTalk Android
      • Get Started
      • Enable Chat Features
      • Authentication
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Connection
      • Event Listener
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk iOS
      • Get Started
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Implement Application Delegate
      • Authentication
      • Connection
      • Event Delegate
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk React Native
      • Get Started - Android
      • Get Started - iOS
    • PowerTalk Flutter
      • Get Started - Android
      • Get Started - iOS
    • Javascript SDK
      • Get Started
      • Authentication
      • Connection
      • General
      • Event Listener
      • User
      • Room List
      • Chat Room
      • Messages
      • Contact
      • Message Type
    • Server API
      • Get Started
      • Base URL
      • Authentication
      • User
      • Contact
      • Message
      • Room
    • Webhook
      • Get Started
      • Webhook Payload
  • MeetTalk SDK Documentation
    • Getting Started with MeetTalk
    • MeetTalk Android
      • Get Started
      • Event Listener
    • MeetTalk iOS
      • Get Started
      • Implement Application Delegate
      • Event Delegate
  • SendTalk API Documentation
    • Introduction
    • Whatsapp Verification
Powered by GitBook
On this page

Was this helpful?

  1. OneTalk Omnichannel Documentation
  2. Channel Integration
  3. Live Chat Integration (iOS, Android, Web)
  4. OneTalk Live Chat for Flutter

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.

PreviousOneTalk Live Chat for FlutterNextGet Started - iOS

Last updated 1 month ago

Was this helpful?

Before you get started: Make sure you have 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.4.2'
}

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_17
        targetCompatibility JavaVersion.VERSION_17
    }
}

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

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

  1. Method Channel to connect to the native Android host

  2. openOneTalkLiveChatTalkUI() function to open the Live Chat's view

  3. 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:

  1. Add a MethodChannel Result variable to handle asynchronous call

  2. override configureFlutterEngine to handle calls from the MethodChannel that we previously created.

  3. 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

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.

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

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

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

Note: You can check a more complete implementation guide in the section.

here
Enable Chat Features
OneTalk Live Chat for Android
next step
created a channel in OneTalk dashboard
iOS side