Live Chat SDK for React Native
Configuration
Sebelum menggunakan DolphinConnect API, harap instal modul npm dolphin-livechat-connector versi terbaru. Pada saat penulisan ini, versinya adalah 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()
Panggil metode ini untuk membuat koneksi ke server. Di bawah ini adalah contoh bagaimana menggunakan metode tersebut.
dolphinConnect.connect();
Disconnect()
Panggil metode ini untuk memutuskan koneksi dengan server. Di bawah ini adalah contoh bagaimana menggunakan metode tersebut.
dolphinConnect.disconnect();
Connectedmethod
Metode ini akan di-trigger ketika status 'DolphinConnect.isConnected' diaktifkan (true -> false atau sebaliknya). Di bawah ini adalah contoh bagaimana menerapkan metode tersebut.
connectedMethod = (connected, error) => {
if (connected) {
dolphinConnect.isConnected === true // TRUE
} else {
dolphinConnect.isConnected === false // TRUE
console.log('Connection is broken', error);
}
}
dolphinConnect.setConnectedMethod(connectedMethod);
Connectingmethod
Metode ini akan ditrigger ketika DolphinConnect membuat koneksi, baik ketika pertama kali kita memanggil metode connect() atau proses menghubungkan kembali. Di bawah ini adalah contoh bagaimana menerapkan metode tersebut.
connectingMethod = () => {
dolphinConnect.isConnecting === true // TRUE
console.log('Estabilishing connection...');
}
dolphinConnect.setConnectingMethod(connectingMethod);
onReceivedMethod()
Metode ini akan di-trigger saat DolphinConnect mendeteksi pesan masuk. Di bawah ini adalah contoh bagaimana mengimplementasikan metode (Catatan: 'message' payload yang ditunjukkan di bawah ini adalah array object).
onReceiveMessage = message => {
console.log(message);
}
dolphinConnect.setOnReceiveMethod(onReceiveMessage);
Pure text message
Jenis pesan ini selalu memiliki properti 'text'. Seperti inilah tampilan pesannya.
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
Jenis pesan ini selalu memiliki properti 'options'. Seperti inilah tampilan pesannya.
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
Properti 'options' memiliki dua properti yang dipisahkan oleh simbol @ === @. Properti pertama adalah label yang ditampilkan dalam pesan chat, sedangkan properti kedua adalah nilai / payload yang dikirimkan ke backend / server. Di bawah ini adalah contoh bagaimana menerapkannya.
const albelAndValue = option.split('@===@');
dolphinConnect.onSend({
text : labelAndValue[0],
value : labelAndValue[1],
})
Button Card Message
Pesan seperti ini selalu memiliki properti 'buttons'. seperti inilah tampilan pesannya.
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
Pesan seperti ini selalu memiliki properti 'image'. seperti inilah tampilan pesannya.
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()
Panggil metode ini ketika Anda ingin mengirimkan typing event pelanggan/user ke server. Di bawah ini adalah contoh bagaimana menggunakan metode tersebut.
dolphinConnect.onCustomerTyping();
onSend()
Panggil metode ini untuk mengirim pesan, pesan harus berupa object atau array object. Di bawah ini adalah contoh cara mengirimkannya.
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' }])
Metode ini juga untuk me-return object array dengan pesan teks sebelumnya ditambah dengan informasi tambahan seperti created date dan id.
const messageArrObj = DolphinConnect.instance.onSend([{ text: 'Hai Selamat Pagi!' }, { text: 'Ada yang bisa saya bantu?' }]);
console.log(messageArrObj);
Seperti inilah tampilan untuk array object-nya.
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
Metode ini akan di-trigger setelah metode onSend dipanggil, apakah pesan berhasil dikirim atau tidak. Di bawah ini adalah contoh bagaimana menerapkan metode tersebut.
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
Metode ini akan di-trigger saat Agen sedang mengetik. Di bawah ini adalah contoh bagaimana menerapkan metode tersebut.
onAgentTypingMethod = () => {
console.log('Agent is typing...')
}
dolphinConnect.setOnAgentTypingMethod(onAgentTypingMethod);
getChatHistory
Mengambil conversation history dari backend. Format yang diambil sama dengan contoh pesan sebelumnya (array object). Di bawah ini adalah contoh cara menggunakannya.
dolphinConnect.getChatHistory(getChatHistorySuccess, getChatHistoryFailed);
getChatHistorySuccess = chatHistory => {
//Do Something with the retrieved chat history
}
getChatHistoryFailed = error => {
console.log('Chat History retrieval failed', error);
}
checkChannelStatus
Memeriksa apakah channel yang ditentukan sedang online atau tidak. Sebelum menggunakan metode ini, pastikan Anda telah menyetel endpoint.
dolphinConnect.setDetectorEndpoint('http://example:xxxxx/isonline/14xxxxxxxxxxxxxxxxxxxxxxxx');
Di bawah ini adalah contoh cara menggunakannya.
channelOnlineMethod = () => {
console.log('CHANNEL IS ONLINE')
}
channelOfflineMethod = message => {
console.log('CHANNEL IS OFFLINE', message);
}
dolphinConnect.checkChannelStatus(this.channelOnlineMethod, this.channelOfflineMethod);
additionalRestHeaders
Tambahkan header REST tambahan untuk mengakomodasi header BTPN-ApiKey. Di bawah ini adalah contoh cara menambahkan beberapa header.
dolphinConnect.setAdditionalRestHeaders({
'BTPN-ApiKey' : 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx',
'other-header': 'other-value'
})
Trigger Menus
Untuk mengaplikasikan trigger menu atau knowledge. Dapat dilakukan setelah chat init, tambahkan metode dolphinConnect.onSend (triggerMenu). Jadi ketika user memulai percakapa awal, aplikasi juga langsung mengirimkan metode pesan ke 3dolphins. Sesuai dengan kata kunci yang sudah di atur sejak awal.
/**
* 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();
Last updated
Was this helpful?