- Documentation
- In-app Chat Kit
- Quick start
Quick start
This doc will guide you to integrate the In-app Chat Kit and start a chat quickly.
Prerequisites
- Go to ZEGOCLOUD Admin Console and do the following:
- Create a project, and get the
AppID
andAppSign
of your project. - Subscribe to the In-app Chat service.
- Create a project, and get the
Integrate the SDK
Add SDK dependencies
flutter pub add zego_zimkit
Integrate In-app Chat Kit into the project
Create an instance and log in.
a. Call the
init
method to initialize the In-app Chat Kit SDK.
void main() {
ZIMKit().init(
appID: YourSecret.appID, // your appid
appSign: YourSecret.appSign, // your appSign
);
runApp(YourApp());
}
b. Log in by calling the `connectUser` method with your user information. And the login only succeeded when the authentication passed.
You can customize rules to generate the user ID and user name. We recommend that you set a meaningful user ID. You can associate the user ID with your business account system.
ZIMKit().connectUser(id: id, name: name).then(_){
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const ZIMKitDemoHomePage(),
),
);
}
class ZIMKitDemoHomePage extends StatelessWidget {
const ZIMKitDemoHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: Scaffold(
appBar: AppBar(
title: const Text('Conversations'),
actions: const [HomePagePopupMenuButton()],
),
body: ZIMKitConversationListView(
onPressed: (context, conversation, defaultAction) {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return ZIMKitMessageListPage(
conversationID: conversation.id,
conversationType: conversation.type,
);
},
));
},
),
),
);
}
}
Configure your project
- Android:
- Open the
your_project/android/app/build.gradle
file, and modify thecompileSdkVersion
to 33.
- And in the same file, edit the
minSdkVersion
.
minSdkVersion 21
- Add app permissions.
Open the file
your_project/app/src/main/AndroidManifest.xml
, and add the following code:<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.BLUETOOTH" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.WAKE_LOCK" /> <uses-permission android:name="android.permission.FOREGROUND_SERVICE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" /> <uses-permission android:name="android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS" /> <uses-permission android:name="android.permission.VIBRATE"/> <uses-permission android:name="android.permission.READ_MEDIA_VIDEOS"/> <uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/> <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
- Prevent code obfuscation.
To prevent obfuscation of the SDK public class names, do the following:
a. In your project's your_project > android > app
folder, create a proguard-rules.pro
file with the following content as shown below:
-keep class **.zego.** { *; }
b. Add the following config code to the release
part of the your_project/android/app/build.gradle
file.
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
- iOS:
- To add permissions, open
your_project/ios/Runner/Info.plist
, and add the following code to thedict
part:
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
To use the notifications and build your app correctly, navigate to the Build Settings tab, and set the following build options for your target app.
Refer to and set the following build options:
In the Runner Target:
a. Build Libraries for Distribution ->
NO
b. Only safe API extensions ->
NO
c. iOS Deployment Target ->
11 or greater
In other Targets:
a. Build Libraries for Distribution ->
NO
b. Only safe API extensions ->
YES
Ideally, by this point, your app will look like this:
Start a chat
In-app Chat Kit supports the following and this section shows you how to implement those respectively:
Start a one-on-one chat
Whether starting a one-on-one chat or a group chat, the peer user you want to chat with/the users you want to invite to a chat group must have logged in to the In-app Chat UIKit at least once. Otherwise, an error will occur.
- Get the
userID
that is generated using your own business logic. (theuserID
here refers to the peer user you want to chat with.) - Fill in the
userID
parameter and run the following code:
// 1. connect user
ZIMKit().connectUser(id: id, name: name).then(_){
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const ZIMKitDemoHomePage(),
),
);
}
// 2. navigate to the MessageListPage
Navigator.push(context, MaterialPageRoute(builder: (context) {
return ZIMKitMessageListPage(
conversationID: userID,
conversationType: ZIMConversationType.peer,
);
}));
Start a group chat
- Get the
groupID
groupName
andinviteUserIDs
that is generated using your own business logic. (theinviteUserIDs
here refers to the ID list of the users that you want to invite to the group chat.) - Fill in the parameters and run the following code:
ZIMKit().createGroup(groupName, inviteUserIDs, id:groupID).then((String? groupID) {
if (groupID != null) {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return ZIMKitMessageListPage(
conversationID: groupID,
conversationType: ZIMConversationType.group,
);
}));
}
});
Join a group chat
- Get the
groupID
that is generated using your own business logic. (thegroupID
here refers to the group chat you want to join.) - Fill in the
groupID
parameter and run the following code:
ZIMKit().joinGroup(groupID).then((int errorCode) {
if (errorCode == 0) {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return ZIMKitMessageListPage(
conversationID: groupID,
conversationType: ZIMConversationType.group,
);
}));
}
});
Update user's avatar and username
You can use the updateUserInfo
method to update the user's avatar and username.
await ZIMKit().updateUserInfo(avatarUrl: avatarUrl, name: name);
More to explore
Get support
Need help or want to raise your questions? Click the button below to join our Discord community to get quick responses.
Join Discord community