mobile_chat_flutter 1.0.4

Flutter package help you to manage customer relationship with customer conversation feature inside your flutter app.

mobile_chat_flutter

Mobile Chat Flutter help you to manage customer relationship with customer conversation feature inside your flutter app.

Installation

1. Pre-installation

a. Your app using Firebase Cloud Messaging

b. You have created mobile chat channel integration in mobile chat integration page and make sure you have done on the following step

• Add package name or bundle id of your app
• Fill server key form with all text inside private key file, don't fill with server key from Cloud Messaging API (Legacy). Get private key file from your console firebase (Project settings -> Service accounts -> click "Generate new private key" button), open Service Accounts page

2. Install Mobile Chat Flutter

dependencies:
 mobile_chat_flutter: $latestSdkVersion

3. Add permissions

Info.plist in iOS project

1. Add NSMicrophoneUsageDescription and NSCameraUsageDescription to Runner -> Info.plist file
2. Add this to Runner -> Info.plist file

  <key>LSSupportsOpeningDocumentsInPlace</key>
	<true/>
	<key>UIFileSharingEnabled</key>
	<true/>

Podfile in iOS project

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|

      
      ## ...
      ## Add code below
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
        'PERMISSION_CAMERA=1',
        'PERMISSION_MICROPHONE=1',
        'PERMISSION_PHOTOS=1',
      ]
      ## ...

    end
  end
end

AndroidManifest.xml in Android project

Add permission below

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

Also, add this code inside

<provider
        android:name="com.pichillilorenzo.flutter_inappwebview_android.InAppWebViewFileProvider"
        android:authorities="${applicationId}.flutter_inappwebview_android.fileprovider"
        android:exported="false"
        android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/provider_paths" />
</provider>            

Usage

//Add this import for every dart file using Mobile Chat Flutter functions
import 'package:mobile_chat_flutter/mobile_chat_flutter.dart';

Initialization

Implement this initialization function as early as possible in your app

MobileChatInitialization.init(
    appId: string, 
    clientId: string, 
    secretKey: string, 
    externalId: string, 
    fullName: string
) : string

Parameter appId, clientId, secretKey can be found in integration page. ParameterexternalId is your customer unique identifier and fullName is your customer full name.

Example initialization with customer unique id and customer full name in your UserInfo class when login successful.

//Your function to handle login successful
onLoginSuccessful(UserInfo userInfo) {
  //...  
  MobileChatInitialization.init(
    "YOUR_APP_ID",
    "YOUR_CLIENT_ID",
    "YOUR_SECRET_KEY",
    "${userInfo.id}",
    "${userInfo.fullName}",
  );
  //... 
}

Conversation feature

MobileChatScreen used by your customer to make conversation with your agents.

@override
Widget build(BuildContext context) {
  return MaterialApp(
        title: 'Your app title',
        onGenerateRoute: (settings) {
          final argument = settings.arguments;
          switch (settings.name) {
            case 'route-key-to-mobile-chat-screen':
              return MaterialPageRoute(
                builder: (_) => const MobileChatScreen(),
              );
          }
        }
  );
}

//Implement this to navigate to mobile chat screen
navigator.pushNamed(context, 'route-key-to-mobile-chat-screen');

Notification feature

Register your customer fcm token to mobile chat server to get notification from agent

registerMobileChatNotification(fcmToken: string) : string

To distinct mobile chat payload and your own payload, use this function

isMobileChatPayload() : boolean

To get state of mobile chat component is opened or not

isMobileChatOpened() : boolean

To stop getting notification, implement function below. This can be used when your customer logout from your app.

revokeNotification() : string

Example implementation of notification feature

//Register your FCM token to Mobile Chat
FirebaseMessaging.instance.getToken().then((fcmToken) async {
    await MobileChatNotification.registerNotification(fcmToken ?? "");
});

//Handle receive notification from Mobile Chat
FirebaseMessaging.onMessage.listen((RemoteMessage remoteMessage) {
    if (MobileChatNotification.isMobileChatPayload(remoteMessage.toMap())) {
      if (!MobileChatNotification.isMobileChatOpened()) {
        //Handle Mobile Chat notification here

      }
    }else{
      //Handle your own notification here
    }
});