logoUIKit
On this page

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:
    1. Create a project, and get the AppID and AppSign of your project.
    2. Activate the In-app Chat service.

Integrate the SDK

Add SDK dependencies

Untitled
flutter pub add zego_zimkit
1
Copied!

Integrate In-app Chat Kit into the project

  1. Create an instance and log in.

a. Call the init method to initialize the In-app Chat Kit SDK.

Untitled
void main() {
  ZIMKit().init(
    appID: YourSecret.appID, // your appid
    appSign: YourSecret.appSign, // your appSign
  );
  runApp(YourApp());
}
1
Copied!

b. Log in by calling the connectUser method with your user information. And the login only succeeded when the authentication passed.

Warning

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.

Untitled
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,
                );
              },
            ));
          },
        ),
      ),
    );
  }
}
1
Copied!

Configure your project

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:

Update user's avatar and username

You can use the updateUserInfo method to update the user's avatar and username.

Untitled
await ZIMKit().updateUserInfo(avatarUrl: avatarUrl, name: name);
1
Copied!

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

Previous

Overview

Next

Overview