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

Install stringee-react-rative package

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

Setup

Android

Permissions

The Stringee Android SDK requires some permissions from your app's AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

ProGuard

Open up android/app/proguard-rules.pro and add following lines:

-dontwarn org.apache.**
-keep class com.stringee.** { *; }
-keep class org.apache.** { *; }

iOS

Note Please make sure to have CocoaPods on your computer.

In you terminal, change into your ios directory.
Create a pod file by running: pod init

Add the following to your pod file:

platform :ios, '8.0'

target '<YourProjectName>' do
    node_modules_path = '../node_modules'

    pod 'yoga', path: "#{node_modules_path}/react-native/ReactCommon/yoga/yoga.podspec"
    pod 'React', path: "#{node_modules_path}/react-native", :subspecs => ['DevSupport', 'RCTNetwork']

    pod 'RNStringee', path: "#{node_modules_path}/stringee-react-native-chat/ios"
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

Now run pod install
Open XCode
Open <YourProjectName>.xcworkspace file in XCode. This file can be found in the ios folder of your React Native project.
In the Build Settings tab -> Other linker flags add $(inherited) flag.
In the Build Settings tab -> Enable bitcode select NO.
Right-click the information property list file Info.plist and select Open As -> Source Code.

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>

Customer

Step 1: Connect to Stringee Server

Initialize StringeeClient

import {StringeeClient} from "stringee-react-native";
...
render () {
    return (
        <View>
            ...    
            <StringeeClient
                ref={this.client}
                eventHandlers = {this.clientEventHandlers}
                />
            ...
        </View>
    )
}

...
    constructor(props) {
        super(props);
        ...
        // Create client ref
        this.client = createRef();
        // Register client events
        this.clientEventHandlers = {
            onConnect: this.onConnect,
            onDisConnect: this.onDisConnect,
            onFailWithError: this.onFailWithError,
            onRequestAccessToken: this.onRequestAccessToken,
            onCustomMessage: this.onCustomMessage,
            onObjectChange: this.onObjectChange,
            onTimeoutInQueue: this.onTimeoutInQueue,
            onConversationEnded: this.onConversationEnded,
            onUserBeginTyping: this.onUserBeginTyping,
            onUserEndTyping: this.onUserEndTyping,
        };
    }
...
//Event
// The client connects to Stringee server
onConnect = ({userId}) => {
    console.log('onConnect - ' + userId);
};

// The client disconnects from Stringee server
onDisConnect = () => {
    console.log('onDisConnect');
};

// The client fails to connects to Stringee server
onFailWithError = ({code, message}) => {
    console.log('onFailWithError: code-' + code + ' message: ' + message);
};

// Access token is expired. A new access token is required to connect to Stringee server
onRequestAccessToken = () => {
    console.log('onRequestAccessToken');
};

// Receive custom message
onCustomMessage = ({data}) => {
    console.log('onCustomMessage: ' + data);
};

// Receive event of Conversation or Message
onObjectChange = ({objectType, objectChanges, changeType}) => {
    console.log('onObjectChange: objectType - ' + objectType + '\n changeType - ' + changeType + '\n objectChanges - ' + JSON.stringify(objectChanges),);
};

// Receive when chat request to queue is timeout
onTimeoutInQueue = ({convId, customerId, customerName}) => {
    console.log('onTimeoutInQueue: convId - ' + convId + '\n customerId - ' + customerId +
    '\n customerName - ' + customerName,);
};

// Receive when conversation ended
onConversationEnded = ({convId, endedby}) => {
    console.log('onConversationEnded: convId - ' + convId + '\n endedby - ' + endedby,);
};

// Receive when user send beginTyping
onUserBeginTyping = ({convId, userId, displayName}) => {
    console.log('onUserBeginTyping: convId - ' + convId + '\n userId - ' + userId + '\n displayName - ' + displayName,);
};

// Receive when user send endTyping
onUserEndTyping = ({convId, userId, displayName}) => {
    console.log('onUserEndTyping: convId - ' + convId + '\n userId - ' + userId + '\n displayName - ' + displayName,);
};

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)

this.client.current.getChatProfile('YOUR_WIDGET_KEY', (status, code, message, chatProfile)=> {
    console.log('getChatProfile, msg: ' + message + ' Profile: ' + JSON.stringify(chatProfile),);
      },
    );

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:

this.client.current.getLiveChatToken('YOUR_WIDGET_KEY', 'YOUR_CUSTOMER_NAME', 'YOUR_CUSTOMER_EMAIL', (status, code, message, token) => {
    console.log('getLiveChatToken: ' + JSON.stringify(token));
    // After get token then can connect
    this.client.current.connect(token);
    },
);

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:

this.client.current.updateUserInfo("USER_NAME", "USER_EMAIL", "USER_AVATAR", (status, code, message) => {
    console.log('updateUserInfo: ' + message);
);

Then start a live chat conversation by calling:

this.client.current.createLiveChatConversation(queueId, (status, code, message, conversation) => {
    console.log('createLiveChatConversation - ' + JSON.stringify(_conversation),);
    },
);

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:

this.client.current.endChat(convId, (status, code, message) => {
    console.log('endChat: status - ' + status + ' code - ' + code + ' message - ' + message,);
    },
);

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.

Initialize StringeeClient

import {StringeeClient} from "stringee-react-native";
...
render () {
    return (
        <View>
            ...    
            <StringeeClient
                ref={this.client}
                eventHandlers = {this.clientEventHandlers}
                />
            ...
        </View>
    )
}

...
    constructor(props) {
        super(props);
        ...
        // Create client ref
        this.client = createRef();
        // Register client events
        this.clientEventHandlers = {
            onConnect: this.onConnect,
            onDisConnect: this.onDisConnect,
            onFailWithError: this.onFailWithError,
            onRequestAccessToken: this.onRequestAccessToken,
            onCustomMessage: this.onCustomMessage,
            onObjectChange: this.onObjectChange,
            onReceiveChatRequest: this.onReceiveChatRequest,
            onReceiveTransferChatRequest: this.onReceiveTransferChatRequest,
            onTimeoutAnswerChat: this.onTimeoutAnswerChat,
            onConversationEnded: this.onConversationEnded,
            onUserBeginTyping: this.onUserBeginTyping,
            onUserEndTyping: this.onUserEndTyping,
        };
    }
...
//Event
// The client connects to Stringee server
onConnect = ({userId}) => {
    console.log('onConnect - ' + userId);
};

// The client disconnects from Stringee server
onDisConnect = () => {
    console.log('onDisConnect');
};

// The client fails to connects to Stringee server
onFailWithError = ({code, message}) => {
    console.log('onFailWithError: code-' + code + ' message: ' + message);
};

// Access token is expired. A new access token is required to connect to Stringee server
onRequestAccessToken = () => {
    console.log('onRequestAccessToken');
};

// Receive custom message
onCustomMessage = ({data}) => {
    console.log('onCustomMessage: ' + data);
};

// Receive event of Conversation or Message
onObjectChange = ({objectType, objectChanges, changeType}) => {
    console.log('onObjectChange: objectType - ' + objectType + '\n changeType - ' + changeType + '\n objectChanges - ' + JSON.stringify(objectChanges),);
};

// Receive when chat request to queue is timeout
onReceiveChatRequest = ({request}) => {
    console.log('onReceiveChatRequest: chatRequest - ' + JSON.stringify(request),);
};

// Receive when chat request to queue is timeout
onReceiveTransferChatRequest = ({request}) => {
    console.log('onReceiveTransferChatRequest: chatRequest - ' + JSON.stringify(request),);
};

// Receive when chat request to queue is timeout
onTimeoutAnswerChat = ({request}) => {
    console.log('onTimeoutAnswerChat: chatRequest - ' + JSON.stringify(request),);
};

// Receive when conversation ended
onConversationEnded = ({convId, endedby}) => {
    console.log('onConversationEnded: convId - ' + convId + '\n endedby - ' + endedby,);
};

// Receive when user send beginTyping
onUserBeginTyping = ({convId, userId, displayName}) => {
    console.log('onUserBeginTyping: convId - ' + convId + '\n userId - ' + userId + '\n displayName - ' + displayName,);
};

// Receive when user send endTyping
onUserEndTyping = ({convId, userId, displayName}) => {
    console.log('onUserEndTyping: convId - ' + convId + '\n userId - ' + userId + '\n displayName - ' + displayName,);
};

Connect to Stringee

this.client.current.connect('YOUR_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:

this.client.current.acceptChatRequest(chatRequest, (status, code, message) => {
    console.log('acceptChatRequest: status - ' + status + ' code - ' + code + ' message - ' + message,);
    if (status) {
        // if accept success, you can get conversation to start chatting
        this.client.current.getConversationById(chatRequest.convId, (status, code, message, conversation) => {
            console.log('getConversationById: status - ' + status + ' code - ' + code + ' message - ' + message + ' conversation - ' + JSON.stringify(conversation),);
                },
            );
        }
    },
);

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

Reject

For accept chat request, call the following function:

this.client.current.rejectChatRequest(chatRequest, (status, code, message) => {
    console.log('rejectChatRequest: status - ' + status + ' code - ' + code + ' message - ' + message,);
    },
);

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:

this.client.current.endChat(convId, (status, code, message) => {
    console.log('endChat: status - ' + status + ' code - ' + code + ' message - ' + message,);
    },
);

Extra

Create a ticket for a miss chat

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

this.client.current.createLiveChatTicket('YOUR_WIDGET_KEY', 'CUSTOMER_NAME', 'CUSTOMER_EMAIL', 'TICKET_DESCRIPTION', (status, code, message) => {
    console.log('createLiveChatTicket: status - ' + status + ' code - ' + code + ' message - ' + message,);
    },
);

Chat Transcript

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

this.client.current.sendChatTranscript('EMAIL', convId, 'DOMAIN', (status, code, message) => {
    console.log('sendChatTranscript: status - ' + status + ' code - ' + code + ' message - ' + message,);
    },
);

Sample

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

Suggestions

Getting started with Stringee Live Chat API

Prepare

Install stringee-react-rative package

Setup

Android

iOS

Customer

Step 1: Connect to Stringee Server

Step 2: Get chat profile

Step 3: Generate access token for customers

Step 4: Start a live chat conversation

Step 5: Messages

Step 6: End a live chat conversation

Agent

Step 1: Connect to Stringee Server

Step 2: Accept/ Reject

Accept

Reject

Step 3: Messages

Step 4: End a live chat conversation

Extra

Create a ticket for a miss chat

Chat Transcript

Sample