Getting Started

This section help you to start building your integration, so that you can send your first message.

Step 1: Get Your App ID

First of all, you need to create your application (App ID) in dashboard, by accessing Qiscus Chat Dashboard.

You can create more than one App ID within a single account. For further information regarding multiple applications in single account.

Step 2: Install Qiscus Chat SDK

• You need to make sure to use flutter for stable version, by running this following code:

// to see current flutter version

flutter channel

​

// if the current is not stable version, please change the stable one

flutter channel stable

• Add this to your package's pubspec.yaml file:

dependencies:

  qiscus_chat_sdk: ^2.0.3

• You can install packages from the command line:

flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more

• Now in your Dart code, you can use:

import 'package:qiscus_chat_sdk/qiscus_chat_sdk.dart';

Step 3: Initialization Qiscus Chat SDK

You need to initiate your App ID for your chat app before you carry out to authentication. Initialization can be implemented in the initial startup. Here is the example on how you can do that:

import 'package:qiscus_chat_sdk/qiscus_chat_sdk.dart';

​

class _MyAppState extends State<MyApp> {

  final qiscus = QiscusSDK();

​

  qiscus.setup(appId);

}

Step 4: Authenticate to Qiscus

To use Qiscus Chat SDK features, first, user needs to authenticate to Qiscus Server. This authentication is done by calling setUser() function. This function will retrieve or create user credential based on the unique userId, for example:

qiscus.setUser(

  userId: userId,

  userKey: userKey,

  username: username,

  avatarUrl: avatarUrl,

).then((account) {

  print('success ${account}');

});

Where:

• userId (string): a user identifier that will be used to identify a user and used whenever another user needs to chat with this user. It can be anything, whether is is user's email, your user database index, etc. As long as it is unique and a string. This value is case sensitive.
• userKey (string): a user key for authentication purpose. So, even if a stranger knows your userId, he cannot access the user data.
• username (string): a username is used as a display name inside chat room.
• avatarUrl (string, optional): to display user's avatar, fallback to default avatar if not provided.
• extras (JSON, optional): to give additional information (metadata) to user, which consist key-value, for example key:position, and value: engineer

For further details, you might see on Authentications section.

Step 5: Create a Chat Room

There are three Chat Room types in Qiscus Chat SDK:

• 1-on-1 Chat Room
• Group Chat Room
• Channel Chat Room

In this section, we will use 1-on-1 Chat Room. We assume that you already know a targeted user you want to chat with. To start a conversation with your targeted user, you can call chatUser() method. Qiscus Chat SDK, then, will serve you a new chat room, asynchronously. When the room is successfully created, Qiscus Chat SDK will return a chat room package through onSuccess listener.

qiscus.chatUser(

  userId: userId,

  extras: extras,

).then((chatRoom) {

  print('success ${chatRoom}');

});

Where:

• userId (string) : a user identifier that will be used to identify a user and used whenever another user needs to chat with this user. It can be anything, whether is user's email, your user database index, etc. as long as it is unique and a string. This value is case sensitive
• extras (map<string, dynamic> , optional) : metadata that can be as additional information to chat room, which consists key-value, for example, key: background, and value: red

Step 6: Send Message

You can send any type of data through Qiscus Chat SDK, in this section let's send a "Hi" message, with type value is text. You need to pass roomId and the message value, for example:

var message = qiscus.generateMessage(chatRoomId: 1, text: 'something');

​

qiscus.sendMessage(

    message: message,

).then((message) {

  print("success $message");

});

Where:

• roomId (long): chat room id, you can get this id in chat room object
• text (string): text that you send to other participant
• sender (QUser): QUser object consist of below properties, such as:

Messages can be received by the recipient target through a onMessageReceived event. This event is triggered whenever users send a message.

qiscus.onMessageReceived().listen((message) {

  print('new message $message');

});

For further details about message, you can find at Message section and Event handler section.