Suggestions

close search

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:

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

Install stringee-react-native package

1. In your terminal (Command Prompt in Windows), change into your React Native project's directory
2. In your terminal (Command Prompt in Windows), run $ npm install stringee-react-native-v2 --save

Setup

Android

1. Permissions

   The Stringee Android SDK requires some permissions from your AndroidManifest

   • Open up android/app/src/main/AndroidManifest.xml
   • Add the following lines:

   <!--Internet-->
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

2. 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'
           }
       }
   }

3. Add volley library

   In your file build.gradle add this line:

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

iOS

1. In you terminal, change into your ios directory, from the command line run following command:

   pod install --repo-update

2. After run cocoapods command, open project file .xcworkspace

3. In the "Build Settings" tab -> "Other linker flags" add "$(inherited)" flag

4. In the "Build Settings" tab -> "Enable bitcode" select "NO"

5. Right-click the information property list file (Info.plist) and select Open As -> Source Code. Then insert the following XML snippet into the body of your file just before the final element:

   <key>NSCameraUsageDescription</key>
   <string>$(PRODUCT_NAME) uses Camera</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>$(PRODUCT_NAME) uses Microphone</string>

6. In the "Build Settings" tab -> "Allow Non-modular includes in Framework Modules" select "YES"

Customer

Step 1: Connect to Stringee Server

1. Initialize StringeeClient

   import {StringeeClient} from 'stringee-react-native-v2';
   ...
   const stringeeClient: StringeeClient = new StringeeClient();

2. Register client events

   // Listen for the StringeeClient event
   const stringeeClientListener: StringeeClientListener = new StringeeClientListener();
   // Invoked when the StringeeClient is connected
   stringeeClientListener.onConnect = (stringeeClient, userId) => {
      console.log('onConnect: ', userId);
   };
   // Invoked when the StringeeClient is disconnected
   stringeeClientListener.onDisConnect = (stringeeClient) => {
      console.log('onDisConnect');
   };
   // Invoked when StringeeClient connect false
   stringeeClientListener.onFailWithError = (stringeeClient, code, message) => {
      console.log('onFailWithError: ', message);
   };
   // Invoked when your token is expired
   stringeeClientListener.onRequestAccessToken = (stringeeClient) => {
      console.log('onRequestAccessToken');
   };
   // Invoked when conversation or message update
   stringeeClientListener.onObjectChange = (stringeeClient, objectType, objectChanges, changeType) => {
      console.log('onObjectChange: ', objectType, objectChanges, changeType);
   };
   // Invoked when a chat request timed out and no agent in queue accept
   stringeeClientListener.onTimeoutInQueue = (stringeeClient, convId, customerId, customerName) => {
      console.log('onTimeoutInQueue: ', convId, customerId, customerName);
   };
   // Invoked when the conversation is ended
   stringeeClientListener.onConversationEnded = (stringeeClient, convId, endedby) => {
      console.log('onConversationEnded: ', convId, endedby);
   };
   stringeeClient.setListener(stringeeClientListener);

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(chatProfile => {
    console.log('getChatProfile', JSON.stringify(chatProfile));
}).catch(console.log);

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:

stringeeClient.getLiveChatToken('YOUR_WIDGET_KEY', 'YOUR_CUSTOMER_NAME', 'YOUR_CUSTOMER_EMAIL').then(token => {
    console.log('getLiveChatToken', token);
    // After get token then can connect
    stringeeClient.connect(token);
}).catch(console.log);

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: 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:

stringeeClient.updateUserInfo("USER_NAME", "USER_EMAIL", "USER_AVATAR").then(() => {
    console.log('updateUserInfo success');
}).catch(console.log);

Then start a live chat conversation by calling:

stringeeClient.createLiveChatConversation(queueId).then(conversation => {
    console.log('createLiveChatConversation', JSON.stringify(conversation));
}).catch(console.log);

In which:

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

Step 5: Messages

Follow this instruction Messages

Step 6: End a live chat conversation

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

conversation.endChat().then(() => {
    console.log('endChat success');
}).catch(console.log);

Agent

Step 1: Connect to Stringee Server

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

1. Initialize StringeeClient

   import {StringeeClient} from 'stringee-react-native-v2';
   ...
   const stringeeClient: StringeeClient = new StringeeClient();

2. Register client events

   // Listen for the StringeeClient event
   const stringeeClientListener: StringeeClientListener = new StringeeClientListener();
   // Invoked when the StringeeClient is connected
   stringeeClientListener.onConnect = (stringeeClient, userId) => {
      console.log('onConnect: ', userId);
   };
   // Invoked when the StringeeClient is disconnected
   stringeeClientListener.onDisConnect = (stringeeClient) => {
      console.log('onDisConnect');
   };
   // Invoked when StringeeClient connect false
   stringeeClientListener.onFailWithError = (stringeeClient, code, message) => {
      console.log('onFailWithError: ', message);
   };
   // Invoked when your token is expired
   stringeeClientListener.onRequestAccessToken = (stringeeClient) => {
      console.log('onRequestAccessToken');
   };
   // Invoked when conversation or message update
   stringeeClientListener.onObjectChange = (stringeeClient, objectType, objectChanges, changeType) => {
      console.log('onObjectChange: ', objectType, objectChanges, changeType);
   };
   // Invoked when the client receives chat request
   stringeeClientListener.onReceiveChatRequest = (stringeeClient, request) => {
      console.log('onReceiveChatRequest', JSON.stringify(request));
   };
   // Invoked when the client receives transfer chat request
   stringeeClientListener.onReceiveTransferChatRequest = (stringeeClient, request) => {
      console.log('onReceiveTransferChatRequest', JSON.stringify(request));
   };
   // Invoked when a chat request time out for answer and route to next agent
   stringeeClientListener.onTimeoutAnswerChat = (stringeeClient, request) => {
      console.log('onTimeoutAnswerChat', JSON.stringify(request));
   };
   // Invoked when the conversation is ended
   stringeeClientListener.onConversationEnded = (stringeeClient, convId, endedby) => {
      console.log('onConversationEnded: ', convId, endedby);
   };
   stringeeClient.setListener(stringeeClientListener);

3. Connect to Stringee

   const token: string = 'PUT YOUR TOKEN HERE'
   ...
   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.acceptChatRequest().then(() => {
   console.log('acceptChatRequest success');
    // if accept success, you can get conversation to start chatting
   stringeeClient.getConversationById(chatRequest.convId).then(conversation => {
      console.log('getConversationById', JSON.stringify(conversation));
   }).catch(console.log);
}).catch(console.log);

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

Reject

For reject chat request, call the following function:

chatRequest.rejectChatRequest().then(() => {
   console.log('acceptChatRequest success');
    // if accept success, you can get conversation to start chatting
   stringeeClient.getConversationById(chatRequest.convId).then(conversation => {
      console.log('getConversationById', JSON.stringify(conversation));
   }).catch(console.log);
}).catch(console.log);

Step 3: Messages

Follow this instruction Messages

Step 4: End a live chat conversation

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

conversation.endChat().then(() => {
   console.log('endChat success');
}).catch(console.log);

Extra

Create a ticket for a miss chat

For agent want to create a ticket for a missed live chat conversation, you call:

const liveChatTicketParam: LiveChatTicketParam = new LiveChatTicketParam({
   name: 'CUSTOMER_NAME',
   email: 'CUSTOMER_EMAIL',
   phone: 'CUSTOMER_PHONE',
   note: 'TICKET_DESCRIPTION',
});
stringeeClient.createLiveChatTicket('YOUR_WIDGET_KEY', liveChatTicketParam).then(() => {
   console.log('createLiveChatTicket success');
}).catch(console.log);

Chat Transcript

If you want to send chat's content to an email at any time, you can use the following function:

conversation.sendChatTranscript('EMAIL', 'DOMAIN').then(() => {
   console.log('sendChatTranscript success');
}).catch(console.log);

Sample

You can view a completed version of this sample app on GitHub: https://github.com/stringeecom/react-native-samples/tree/master/LiveChatSample