mobile_chat_flutter

Description:

mobile chat flutter

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 from your console firebase (Project settings -> Service accounts -> Generate new private key)

2. Install Mobile Chat Flutter #
dependencies:
mobile_chat_flutter: $latestSdkVersion
copied to clipboard
3. Add permissions #
Info.plist in iOS project

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

<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>UIFileSharingEnabled</key>
<true/>
copied to clipboard
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
copied to clipboard
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" />
copied to clipboard
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" />
copied to clipboard
Usage #
//Add this import for every dart file using Mobile Chat Flutter functions
import 'package:mobile_chat_flutter/mobile_chat_flutter.dart';
copied to clipboard
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
copied to clipboard
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}",
);
//...
}

copied to clipboard
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');
copied to clipboard
Notification feature #
Register your customer fcm token to mobile chat server to get notification from agent
registerMobileChatNotification(fcmToken: string) : string
copied to clipboard
To distinct mobile chat payload and your own payload, use this function
isMobileChatPayload() : boolean
copied to clipboard
To get state of mobile chat component is opened or not
isMobileChatOpened() : boolean
copied to clipboard
To stop getting notification, implement function below. This can be used when your customer logout from your app.
revokeNotification() : string
copied to clipboard
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
}
});
copied to clipboard