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.
Disconnect()
Call this method to disconnect from the server. Below is an example of how to use the method.
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.
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.
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).
Pure text message
This kind of message always has 'text' property. This is how the message will look like.
Quick Reply / Suggestion Message
This kind of message always has 'options' property. This is how the message will look like.
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.
Button Card Message
This kind of message always has 'buttons' property. this is how the message will look like.
Image message
This kind of message always has 'image' property. this is how the message will look like.
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.
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
Image Message
This method also returns an array of object with previous text message plus additional information like created date and id.
This is how the array of object looks like.
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.
onAgentTypingMethod
This method will be triggered when the agent is typing. Below is an example of how to implement the method.
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.
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).
Below is an example of how to use it.
additionalRestHeaders
Add additional REST headers to accommodate the BTPN-ApiKey header. Below is an example of how to add multiple headers.
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.
Last updated
Was this helpful?