Live Chat SDK React Native

Configuration

Before using DolphinConnect API, please install the latest version of dolphin-livechat-connector npm module. At the time of this writing the version is 1.1.4.

First Import the Required Class

import { DolphinProfile, DolphinConnect} from 'dolphin-livechat-connector';

The Outline of How to Use The API

/**
* Prepare your  customer  profile here
*/
 
let profile = new DolphinProfile();
profile.username= "your name"
profile.email   = "your email";
profile.phone   = "your  phone number";
profile.customerid= "your customerid";  //optional
 
/**
* Get  singleton  instance of  Dolphin Messenger  Connector
* Setup Your Avatar,  Client  Id,  and  Client  Secret
*/
 
let dolphinConnect = DolphinConnect.getlnstance(profile);
dolphinConnect.setAvatarCSri Virtual Assistant',
'http://www.inmotion.co.idlassets/images/logolsri_face.png');
 
dolphinConnect.setDetectorEndpoint('http://example:xxxxx/isonline/14xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.);  //optional
 
dolphinConnect.setAdditionalRestHeaders({ //optional
       'ApiKey'     :  rxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'
})
 
dolphinConnect.configure( 
      "your channel url",
      "your channel client id",
      "your  channel client  secret"
);
 
dolphinConnect.set0nReceiveMethod(this.on any iveMessage);
dolphinConnect.setMessageSentMethod(this.messageSentMethod);
dolphinConnect.setConnectedMethod(this.connectedMethod);
dolphinConnect.setConnectingMethod(this.connectingMethod);
dolphinConnect.setOnAgentTypingMethod(this.onAgentrypingMethod);

Connect()

Call this method to establish connection to server. Below is an example of how to use the method.

dolphinConnect.connect();

Disconnect()

Call this method to disconnect from the server. Below is an example of how to use the method.

dolphinConnect.disconnect();

Connectedmethod

This method will be triggered when 'DolphinConnect.isConnected' status switched (true -> false or vice versa). Below is an example of how to implement the method.

connectedMethod = (connected, error) => {
    if (connected) {
        dolphinConnect.isConnected === true // TRUE
    } else {
        dolphinConnect.isConnected === false // TRUE
        console.log('Connection is broken', error);
    }
}
dolphinConnect.setConnectedMethod(connectedMethod);

Connectingmethod

This method will be triggered when DolphinConnect is establishing the connection, whether when the first time we called connect() method or reconnecting process. Below is an example of how to implement the method.

connectingMethod = () => {
    dolphinConnect.isConnecting === true // TRUE
    console.log('Estabilishing connection...');
}
dolphinConnect.setConnectingMethod(connectingMethod);

onReceivedMethod()

This method will be triggered when DolphinConnect detects an incoming message. Below is an example of how to implement the method (Not : the “message” payload shown below is an array of object).

onReceiveMessage = message => {
     console.log(message);
}
dolphinConnect.setOnReceiveMethod(onReceiveMessage);

Pure text message

This kind of message always has 'text' property. This is how the message will look like.

createdAt : Thu Oct 24 2018 13:58:40 GMT+0700 (Western Indonesia Time) {}
document : null
documentName : null
origin : "Incoming"
text : "Pagi kak Albert, senang bisa menyapa kakak pagi ini."
user :
   avatar : "http://www.example.co.id/assets/images/logo/example.png"
   name : "Sri Virtual Assistant"
   _id : "agent/bot"
   __proto__ : Object
  _id : "0xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
   __proto__ : Object
length : 1
__proto__ : Array(0)

Quick Reply / Suggestion Message

This kind of message always has 'options' property. This is how the message will look like.

createdAt : Thu Oct 24 2018 13:58:40 GMT+0700 (Western Indonesia Time) {}
options : Array(3)
  0 : "Satu@===@1"
  1 : "Sepuluh@===@10"
  2 : "Seratus@===@100"
length : 3
__proto__ : Array (0)
origin : "Incoming"
user : {_id: "agent/bot", name: "Sri Virtual Assistant", avatar: "http://www.example.co.id/assistant"
 _id: "9xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
__proto__ : Object

The 'options' property has two properties which are separated by the @===@ symbol. The first property is a label that is displayed in the chat message, while the second one is a value/payload which is sent to the backend/server. Below is an example of how to implement it.

const albelAndValue = option.split('@===@');
dolphinConnect.onSend({
    text : labelAndValue[0],
    value : labelAndValue[1],
})

Button Card Message

This kind of message always has 'buttons' property. this is how the message will look like.

0:
  buttons: Array(2)
    0:
      buttonValues: Array(2)
      0: {name: "INFO", value: "info Social CRM"
      1: {name: "DETAIL", value: "https://www.example.co.id"}
        length: 2
      __proto__ : Array(0)
      group: "3Dolphin"
      id: "0xxxxxxxxxxxxxxxxxxxxxxxx"
      pictureLink: "http://chat.example.com:xxxxx/webchat/out/button/Axxxxxxxxxxxxxxxxxx"
      subTitle: "omniChannel Social CRM"
      title: "Social CRM"
      __proto__: Object
    1: {id: "1xxxxxxxxxxxxxxxxxxxxxxxxxx", pictureLink: "http://chat.example.com:xxxxx"
    length:2
    __proto__ : Array(0)
  createdAt : Thu Oct 24 2018 13:58:40 GMT+0700 (Western Indonesia Time) {}
  origin: "Incoming"
  user :{_id: "agent/bot", name: Sri Virtual Assistant, avatar: "http://www.example.co.id/assets/images/logo"}
   _id : "4xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
   __proto__ : Object

Image message

This kind of message always has 'image' property. this is how the message will look like.

0:
createdAt : Thu Oct 24 2018 13:58:40 GMT+0700 (Western Indonesia Time) {}
image: "http://example/1xxxxxxxxxxxxxxxxxxxxxxxxxxxx/webchat/out/image/"
origin: "Incoming"
text: null
user :{_id: "agent/bot", name: Sri Virtual Assistant, avatar: "http://www.example.co.id/assets/images/logo"}
   _id : "axxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
   __proto__ : Object

onCustomerTyping()

Call this method when you want to send customer/user typing event to the server. Below is an example of how to use the method.

dolphinConnect.onCustomerTyping();

onSend()

Call this method to send message, message must be an object or array of object. Below is an example of how to send

Text Message

dolphinConnect.onSend({ text: 'Hai selamat pagi!'});
dolphinConnect.onSend([{ text: 'Hai selamat pagi!' }, { text: 'Ada yang bisa saya bantu?' }])

Image Message

dolphinConnect.onSend({ image: 'content://media/external/images/media/xxxxxx'});
dolphinConnect.onSend([{ image: 'content://media/external/images/media/xxxxxx' }, { image: 'content://media/external/images/media/xxxxxx' }])

This method also returns an array of object with previous text message plus additional information like created date and id.

const messageArrObj = DolphinConnect.instance.onSend([{ text: 'Hai Selamat Pagi!' }, { text: 'Ada yang bisa saya bantu?' }]);
console.log(messageArrObj);

This is how the array of object looks like.

createdAt : Thu Oct 24 2018 13:58:40 GMT+0700 (Western Indonesia Time) {}
origin : "Outgoing"
text : "Hai Selamat Pagi!"
user :{_id: "user", name: undefined, avatar: undefined}
_id : "2xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
__proto__ : Object
1: {text: "Ada yang bisa saya bantu?", _id: "2xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx", create
length : 2 
__proto__ : Array(0)

messageSentMethod

This method will be triggered after the onSend method is called, whether the message is sent successfully or not. Below is an example of how to implement the method.

messageSentMethod = (message, success, error) => {
   if (success) {
      console.log('This message is sent successfully!')
   } else {
      console.log('This message sent failed!', error)
   }
 
   console.log('MESSAGE :', message);
}

onAgentTypingMethod

This method will be triggered when the agent is typing. Below is an example of how to implement the method.

onAgentTypingMethod = () => {
     console.log('Agent is typing...')
}
dolphinConnect.setOnAgentTypingMethod(onAgentTypingMethod);

getChatHistory

Retrieve conversation history from the back-end. The retrieved format is the same as previous message examples (an array of object). Below is an example of how to use it.

dolphinConnect.getChatHistory(getChatHistorySuccess, getChatHistoryFailed);
 
getChatHistorySuccess = chatHistory => {
     //Do Something with the retrieved chat history
}
 
getChatHistoryFailed = error => {
       console.log('Chat History retrieval failed', error);
}

checkChannelStatus

Check whether the specified channel is online or not. Before using this method make sure you have set the service endpoint (please refer back to point 1.2).

dolphinConnect.setDetectorEndpoint('http://example:xxxxx/isonline/14xxxxxxxxxxxxxxxxxxxxxxxx');

Below is an example of how to use it.

channelOnlineMethod = () => {
       console.log('CHANNEL IS ONLINE')
}
 
channelOfflineMethod = message => {
       console.log('CHANNEL IS OFFLINE', message);
}
 
dolphinConnect.checkChannelStatus(this.channelOnlineMethod, this.channelOfflineMethod);

additionalRestHeaders

Add additional REST headers to accommodate the BTPN-ApiKey header. Below is an example of how to add multiple headers.

dolphinConnect.setAdditionalRestHeaders({
       'BTPN-ApiKey' : 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx',
       'other-header': 'other-value'
})

Trigger Menus

For the application of trigger menus or knowledge. Can be done after init chat, add the dolphinConnect.onSend (triggerMenu) method. So, when the user initiates an initial chat, the apps also directly send the message method to 3dolphin. In accordance with the keywords that have been set since the beginning.

/**
* prepare your customer profile here\
*/
 
let profile = new DolphinProfile();
profile.username = "your name";
profile.email = "your email";
profile.phone = "your phone number";
 
/**
* Get singleton instance of Dolphin Messenger Connector
* Setup your avatar, Client Id, and client secret 
*/
 
let dolphinConnect = DolphinConnect.getInstance(Profile);
dolphinConnect.setAvatar('Sri Virtual Assistant', 'http://www.inmotion.inmotion.co.id/assets/images/logo/xxxx.png');
 
        dolphinConnect.configure(
        "https://xxxxxxxx.ngrok.io",    //url
        "ddxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",    /fclient_id
        "13xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"     //client_secret
);
 
dolphinConnect.set0nReceiveMethod(this.onReceiveMessage);
dolphinConnect.setMessageSentMethod(thisrmessageSentMethod);
dolphinConnect.setConnectedMethod(this.connectedMethod);
dolphinConnect.setConnectingMethod(this.connectingMethod);
dolphinConnect.setOnAgentTypingMethod(this.onAgentTypingMethod);
 
dolphinConnect.connect(
dolphinConnect.onCustomerTyping();
dolphinConnect.onSend({text:'Hai  Selamat  Pagi!'}); dolphinConnect.disconnect();