3.고객 채팅(Web Chat) Quickstart고객 채팅(Web Chat) Quickstart

LABEdit

3.1고객 채팅(Web Chat)

고객이 웹에서 채팅 상담을 할수 있게 지원하는 Javascript API 입니다.

3.1.1API연동 하기

3.1.1.1연동하기

sample Code
<script src="./nxWebApi.js"></script>

3.1.1.2콜백 등록

sample Code
<script>
    //callback function
    var setChatCallback = function(jsonString) {
           alert('callback' + jsonString);
    };
    // callback 등록
    nxWebApi.SetCallBack(setChatCallback);    
</script>

3.1.1.3채팅방 연결

sample Code
//callback function
var setChatCallback = function(jsonString) {
    var event = JSON.parse(jsonString);
    if (event) {
        
         switch(event.Type){
            case 'Connecting':
                console.log("서버 접속 시도...");
                break;
            case 'Ringing':
                console.log("서버 접속 응답중");
                break;
            case 'InCall':
                console.log("서버 접속 완료");
                break;
            case 'Clear':
                console.log("서버 접속 종료 또는 실패");
                break;
        }
    }
};


nxWebApi.SetCallBack(setChatCallback);


var result = nxWebApi.connectChat('nexuscommunity.net',
            '3001',
            '01012345678',
            'ws://10.10.30.71:6080');
if(result != 0){
    alert('connectChat failed.');
}

3.1.1.4메세지 보내기 / 받기

sample Code
// 메시지 수신/발신 callback
var setChatCallback = function(jsonString) {
    var event = JSON.parse(jsonString);
    if (event) {
        
        ... 
         
        if(event.Type == 'Message_C'){
            switch(event.Data.status){
               case 'i_customs_message_send':
                   console.log("메시지 전송 : " + event.Data.content);
                   break;
               case 'i_customs_message':
                    console.log("메시지 수신 : " + event.Data.content);
                   break;
            }
        }
         
    }
};
// text 메시지 보내기 
const messageJson = '{ "type":"text", "message": "안녕하세요!"}';
var result = nxWebApi.Message_C( messageJson);

3.1.1.5채팅방 연결종료

sample Code
// 접속 종료 callback
var setChatCallback = function(jsonString) {
    var event = JSON.parse(jsonString);
    if (event) {
         switch(event.Type){
            case 'Clear':
                console.log("서버 접속 종료 또는 실패");
                break;
        }
    }
    ...
};
    
// 채팅방 종료
nxWebApi.Clear();

3.1.2기능리스트

3.1.2.1채팅방 연결

nxWebApi.connectChat(realm, dn_number, tel_number, url);
Parameters

Name

Type

필수

Descrption

realm

string

Y

Realm 정보

ex) "nexuscommunity.net"

dn_number

string

Y

내선번호(상담원의 내선 또는 대표 DN)

ex) "3001"

tel_number

string

Y

고객 임으로 값(고객전화번호, 사용자 id) - 한글사용불가

ex) "01012345678"

url

string

Y

웹소켓 주소

ex) "ws://test.com:6080/"

Return value

구분

Type

Descrption

반환값

Int

성공 : 0

실패 : -1

Example code
var result = nxWebApi.connectChat('nexuscommunity.net',
            '3001',
            '01012345678',
            'ws://10.10.30.71:6080');
if(result != 0){
    alert('connectChat failed.');
}

3.1.2.2채팅방 종료

Function
nxWebApi.Clear();
Parameters

None.

Return value

구분

Type

Descrption

반환값

Int

성공 : 0

실패 : -1

3.1.2.3메시지 보내기

Function
nxWebApi.Message_C( message, sendtype );

* 여러개의 채팅방이 있을경우 사용 또는 sendType 기능 사용시 
nxWebApi.Message_CToSelect( cid, message, type, sendType );
Parameters

Name

Type

Descrption

cid

text

Cid 값 (Message_CToSelect 에서 사용)

여러개의 채팅 사용시 사용

type

text

미사용

message

Json

메시지{

"type": "text",

"message": "안녕하세요. ",

"file_data": []

}


파일 (파일2개, 미리보기는 1개만 지원)

{

"type": "file",

"message": "",

"file_data": [

{

"name": "testImage1.jpg",

"size": "1204136",

"url": "http://118.219.54.237/call-message/testImage1.jpg",

"mime_type" = "image/jpg",

preview_url": "http://1.1.1.1./testImage1_preview.jpg" },

{

"name": "testImage2.doc",

"size": "1401208",

"url": "http://118.219.54.237/call-message/testImage2.jpg",

"mime_type" = "application/msword",

"preview_url": ""

}

]

}



아래 메시지 타입을 참고하세요

sendtype

text

기본값은 : BOTH

AGENT : 상담원만 볼수 있게 메시지 전달

CUSTOMER : 고객만 볼수 있게 메시지 전달

3.1.2.3.1메시지 타입

키

-

TYPE

필수

Descrption

type


text

Y

메시지 : text

파일 : file

message


text

Y/N

메시지 일경우 필수

file_data


json

Y/N

파일 일경우 필수

links


json

Y/N

버튼 일경우 필수

[Sample] - 메시지 전송

{
  "type": "text",
  "message": "안녕하세요. "
}
[Parameter] - file_data

키

-

타입

필수

설명

file_data

-

array

-

파일 목록


name

text(28)

Y

파일명


size

int

N

사이즈


url

text

Y

파일 URL


mime_type

text

N

파일 타입(MIME)


preview_url

text

N

이미지일경우 thumbnail URL

[Sample] - 파일전송

{
  "type": "file",
  "file_data": [
    {
      "name": "testImage1.jpg",
      "size": "1204136",
      "url": "http://118.219.54.237/call-message/testImage1.jpg",
      "mime_type"="image/jpg",
      "preview_url": "http: //1.1.1.1./testImage1_preview.jpg"
    },
    {
      "name": "testImage2.doc",
      "size": "1401208",
      "url": "http: //118.219.54.237/call-message/testImage2.jpg",
      "mime_type"="application/msword",
    }
  ]
}
[Parameter] - links

키

-

타입

필수

설명

links

-

array

-

버튼 목록


name

text

Y

버튼명


type

text

Y

text : 해당 버튼 텍스트 전송

link : 버튼 클릭 시 이동할 web url


url

text

-

버튼 클릭 시 이동할 url


extra

text(100)

N

text 버튼 발송 시 전달할 extra 정보

[Sample] - links 전송

{
  "type": "links",
  "message": "원하시는 문의를 선택해 주세요.",
  "links": [
    {
      "name": "프로모션",
      "type": "text",
      "extra": "PROMOTION-01"
    },
    {
      "name": "로그인",
      "type": "link",
      "url": "http: //118.219.54.237/login"
    }
  ]
}
Return value

구분

Type

Descrption

반환값

Int

성공 : 0

실패 : -1

3.1.2.4시나리오 봇 연동 (수신/ 발신)

시나리오 봇으로 수신된 메시지의 경우 따로 처리해야 한다. 메시지 발신 함수는 동일 하다.
nxWebApi.Message_C( message );
Parameters

Name

Type

Descrption

Message

Json

시나리오 봇 수신

{

"TYPE": "SCENARIO",

"MESSAGE": {

"KEYWORD": "HOME",

"MENU_ID": "CHAT_ROOT",

"TITLE": "WELCOME NEXUS",

"TYPE": "CONTENT",

"NAME": "시나리오 시작",

"URL": "http://nexus.co.kr",

"DESC": "환영합니다. 넥서스커뮤니티 입니다.\\n 무엇을 도와드릴까요?",

"COUNT_BUTTONS": 3,

"BUTTONS": [

{

"KEYWORD": "솔루션",

"MENU_ID": "SOLUTION",

"TITLE": "솔루션 문의",

"TEXT": "제품을 소개해 드립니다."

} {

"KEYWORD": "직원",

"MENU_ID": "EMPLOYEE",

"TITLE": "직원 문의",

"TEXT": "직원을 조회합니다."

}

],

"TAIL": [

{

"KEYWORD": "HOME",

"MENU_ID": "CHAT_ROOT"

},

{

"KEYWORD": "NEXT",

"MENU_ID": "NEXT"

}

],

"COUNT_TAIL": 3

},

"NAME": "시나리오 시작"

}



시나리오봇 응답

{

"TYPE": "SCENARIO",

"MESSAGE": {

"SCENARIO": "CHAT",

"KEYWORD": "솔루션",

"MENU_ID": "SOLUTION"

}

}

3.1.2.5CallBack Type별 정의

Callback 이 발생하지 않을경우는 실제 네트워크로 데이터가 전송이 일어 나지 않았을 경우 입니다.

네트워크가 정상적인지 먼저 체크해 주세요.

3.1.2.5.1SetCallBack

{
  "Type": "SetCallBack",
  "Data": {
    "result": "Success"
  }
}

3.1.2.6Connecting

{
  "Kind": "SIP",
  "Type": "Connecting",
  "Data": {
    "status": "connecting",
    "desc": "Call in progress...",
    "dn": "2590",
    "id": 2
  }
}

3.1.2.7Trying

{
  "Kind": "SIP",
  "Type": "Trying",
  "Data": {
    "status": " i_ao_request",
    "desc": "Trying",
    "dn": "3008",
    "id": 7
  }
}

3.1.2.8Ringing

{
  "Kind": "SIP",
  "Type": "Ringing",
  "Data": {
    "status": " i_ao_request",
    "desc": "Ringing",
    "dn": "3008",
    "id": 7
  }
}

3.1.2.9InCall

{
  "Kind": "SIP",
  "Type": "InCall",
  "Data": {
    "status": "connected",
    "desc": "In call",
    "dn": "3008",
    "id": 7
  }
}

3.1.2.10Clear

{
  "Kind": "SIP",
  "Type": "Clear",
  "Data": {
    "status": "terminated",
    "desc": "Call terminated",
    "dn": "2590",
    "id": 5
  }
}

3.1.2.11Message_C(채팅 메시지 수신/발신)

표 3-1content 상세 정보

구분

node

타입

설명

Data





status

text

i_customs_message : 메시지 수신

i_customs_message_send : 메시지 발신


content

text

채팅 메시지


desc

text

설명

{
  "Kind": "SIP",
  "Type": "Message_C",
  "Data": {
    "status": "i_customs_message",
    "desc": "Incoming Message",
    "content": {
      "type": "text",
      "message": "바보"
    },
    "dn": "customer",
    "Cid": "NX_00020009605BF4A6_161656744744efb1441f283b70",
    "virtualAgent": "3105"
  }
}

3.2고객 채팅 연결

3.2.1버튼을 통한 상담 시작 (GET 방식)

* domain : https://tagent.uconnect.co.kr/
* path : /ukakao/webchat.html
* method : GET
Parameters

Name

Type

필수

Descrption

realm

string

Y

Realm 정보

ex) "nexuscommunity.net"

dn_number

string

Y

내선번호(상담원의 내선 또는 대표 DN)

ex) "3001"

tel_number

string

Y

고객 임으로 값(고객전화번호, 사용자 id) - 한글사용불가

ex) "01012345678"

url

string

Y

웹소켓 주소

ex) "ws://test.com:6080/"

Sample
https://tagent.uconnect.co.kr/ukakao/webchat.html?realm=nexuscommunit.net&url=ws://10.10.30.71:6080&dn_number=3001&tel_number=01029115543



(위 주소는 예시이며 실제 정상적으로 동작하지는 않습니다)