Getting started with Stringee Live Chat API

Prepare

In order to use Stringee Live Chat API, you need to have a widget key which will be used to identify your portal. You can get that key by doing the following steps:

Login to your StringeeX account as an admin
In the Setting -> Chat Management -> Chat Widget -> Embed web widget, get the key in the URL

Adding the Stringee Flutter Plugin

Download stringee-flutter-plugin here: https://github.com/stringeecom/stringee_flutter_plugin

Put stringee-flutter-plugin into the same directory of your project them add the following to your pubspec.yaml file

dependencies:
    stringee_flutter_plugin:
        git:
            url: https://github.com/stringeecom/stringee_flutter_plugin.git

Install the plugin by running the following command from the project root:
```
$ flutter pub get
```

Setup

Android

Permissions

The Stringee Android SDK requires some permissions from your AndroidManifest
- Open up android/app/src/main/AndroidManifest.xml
- Add the following lines:
```
// for internet access
<uses-permission android:name="android.permission.INTERNET" />
```

Proguard

If your project uses ProGuard, you may have to add the following settings to the ProGuard configuration file to make sure Stringee builds correctly:

Create file proguard-rules.pro in your app/ dir and insert inside:

#Flutter Wrapper
-dontwarn org.webrtc.**
-keep class org.webrtc.** { *; }
-keep class com.stringee.** { *; }

Add the following lines to /app/buidl.gradle :

android {
    buildTypes {
        release {
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

Add volley library

In your file build.gradle add this line:

dependencies {
    implementation 'com.android.volley:volley:1.2.1'
}

iOS

From the command line run following command:
```
pod install --repo-update
```
After run cocoapods command, open project file .xcworkspace
In the Build Settings tab -> Other linker flags add $(inherited) flag
In the Build Settings tab -> Enable bitcode select NO
In the Build Settings tab -> Allow Non-modular includes in Framework Modules select YES

Customer

Step 1: Initialize StringeeClient

```
import 'package:stringee_flutter_plugin/stringee_flutter_plugin.dart';
...
StringeeClient _stringeeClient = StringeeClient();
```

The StringeeClient class is defined in Stringee Plugin. It includes methods interacting with Stringee Server.

Step 2: Get chat profile

Chat Profile is an object which will let you know:

Configuration information about user interface that you should display to customers.
Queue information (queue is where you will route live chat conversations to)

_stringeeClient.getChatProfile('YOUR_WIDGET_KEY').then((result) {
    debugPrint('getChatProfile: message - ${result['message']}');
    if (result['status']) {
      StringeeChatProfile chatProfile = result['body'];
      List<Queue>? queues = chatProfile.queues;
    }
});

Step 3: Generate access token for customers

In order to chat with your agents, your customers have to connect to Stringee server first. But they are not users in your system, they can be anybody, so you need to generate a token for them. In order to do that, call the following function:

late String token;
...
_stringeeClient.getLiveChatToken('YOUR_WIDGET_KEY', 'YOUR_CUSTOMER_NAME', 'YOUR_CUSTOMER_EMAIL').then((result) {
    debugPrint('getLiveChatToken: message - ${result['message']}');
    if (result['status']) {
      token = result['body'];
    }
});

In which:

YOUR_WIDGET_KEY: your portal's widget key
YOUR_CUSTOMER_NAME, YOUR_CUSTOMER_EMAIL: you can ask your customer to supply it

Step 4: Connect to Stringee Server

Next, we will connect to Stringee Server. You must do this before you can start a live chat conversation.

/// Listen for the StringeeClient event
_stringeeClient.registerEvent(StringeeClientListener(
  /// Invoked when the StringeeClient is connected
  onConnect: (stringeeClient, userId) {
     debugPrint('onConnect: $userId');
  },
  /// Invoked when the StringeeClient is disconnected
  onDisconnect: (stringeeClient) {
     debugPrint('onDisconnect');
  },
  /// Invoked when StringeeClient connect false
  onFailWithError: (stringeeClient, code, message) {
     debugPrint('onFailWithError: code - $code - message - $message');
  },
  /// Invoked when your token is expired
  onRequestAccessToken: (stringeeClient) {
     debugPrint('onRequestAccessToken');
  },
  /// Invoked when receive an chat change event
  onChangeEvent: (stringeeClient, objectChange) {
     debugPrint('onChangeEvent: objectChange - ${objectChange.toString()}');
  },
  /// Invoked when no agent accept chat request and time out
  onTimeoutInQueue: (stringeeClient, conversationId, customerId, customerName) {
     debugPrint('onTimeoutInQueue: conversationId - $conversationId');
  },
  /// Invoked when conversation end
  onConversationEnded: (stringeeClient, conversationId, endedBy) {
     debugPrint('onConversationEnded: conversationId - $conversationId');
  },
));

Connect by calling:
```
_stringeeClient.connect(token);
```

Step 5: Start a live chat conversation

Before starting a live chat conversation, you can update the customer information to Stringee Server, so your agent can know more about your customer (where is the customer from? what type of cell phone the customer using?...). In order to do that, call the following function:

StringeeUser newUser = StringeeUser.forUpdate({name: "USER_NAME"});
_stringeeClient.updateUserInfo(newUser).then((result) {
    debugPrint('updateUserInfo: message - ${result['message']}');
});

Then start a live chat conversation by calling:

_stringeeClient.createLiveChatConversation(queueId).then((result) {
   debugPrint('updateUserInfo: message - ${result['message']}');
   if (result['status']) {
      StringeeConversation conversation = result['body'];
   }
});

In which:

queueId: The queue's id which you will route the live chat conversation to

Step 6: Messages

Follow this instruction Messages.

Step 7: End a live chat conversation

In order to end the live chat conversation, you call the following method:

conversation.endChat().then((result) {
   debugPrint('endChat: message - ${result['message']}');
});

Agent

Step 1: Initialize StringeeClient and connect to Stringee Server

Next, we will connect to Stringee Server. You must do this before you can start a live chat conversation.

import 'package:stringee_flutter_plugin/stringee_flutter_plugin.dart';
...
StringeeClient _stringeeClient = StringeeClient();
...
/// Listen for the StringeeClient event
_stringeeClient.registerEvent(StringeeClientListener(
  /// Invoked when the StringeeClient is connected
  onConnect: (stringeeClient, userId) {
     debugPrint('onConnect: $userId');
  },
  /// Invoked when the StringeeClient is disconnected
  onDisconnect: (stringeeClient) {
     debugPrint('onDisconnect');
  },
  /// Invoked when StringeeClient connect false
  onFailWithError: (stringeeClient, code, message) {
     debugPrint('onFailWithError: code - $code - message - $message');
  },
  /// Invoked when your token is expired
  onRequestAccessToken: (stringeeClient) {
     debugPrint('onRequestAccessToken');
  },
  /// Invoked when receive an chat change event
  onChangeEvent: (stringeeClient, objectChange) {
     debugPrint('onChangeEvent: objectChange - ${objectChange.toString()}');
  },
  /// Invoked when receive a chat request
  onReceiveChatRequest: (stringeeClient, chatRequest) {
     debugPrint('onReceiveChatRequest: chatRequest - ${chatRequest.toString()}');
  },
  /// Invoked when receive a transfer chat request
  onReceiveTransferChatRequest: (stringeeClient, chatRequest) {
     debugPrint('onReceiveTransferChatRequest: chatRequest - ${chatRequest.toString()}');
  },
  /// Invoked when chat request to agent is handle on another device
  onChatRequestHandleOnAnotherDevice: (stringeeClient, chatRequest, state) {
     debugPrint('onChatRequestHandleOnAnotherDevice: chatRequest - ${chatRequest.toString()} - state - $state');
  },
  /// Invoked when chat request to agent timeout
  onTimeoutAnswerChat: (stringeeClient, chatRequest) {
     debugPrint('onTimeoutAnswerChat: chatRequest - ${chatRequest.toString()}');
  },
  /// Invoked when conversation end
  onConversationEnded: (stringeeClient, conversationId, endedBy) {
     debugPrint('onConversationEnded: conversationId - $conversationId');
  },
));

Connect by calling:

String token = '';
...
_stringeeClient.connect(token);
...

Step 2: Accept/ Reject

After receive a chat request, agent can accept or reject this chat request.

Accept

For accept chat request, call the following function:

chatRequest.accept().then((result) {
   debugPrint('accept: message - ${result['message']}');
   if (result['status']) {
      _stringeeClient.getConversationById(chatRequest.convId).then((value) {
         debugPrint('getConversationById: message - ${value['message']}');
         if (result['status']) {
            StringeeConversation conversation = value['body'];
         }
      });
   }
});

After accept chat request success, you can get conversation by conversationId from chat request

Reject