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();