웹챗/챗봇 SDK Javascript

자바스크립트를 통해 셀러게이트 제공 버튼 또는 원하시는 다른 버튼 이미지에 웹챗/챗봇을 사용할 수 있습니다.

셀러게이트에서 제공하는 웹챗/챗봇 스크립트를 복사 후 사용하시는 사이트의 html의 Tag안 최하단에 붙여 넣어주세요.
– 웹챗/챗봇 스크립트는 설정/관리 > 상담 버튼 설치 > 웹챗, 챗봇 에서 확인하실 수 있습니다.

brandKey와 channelType은 필수 입력 사항입니다. 나머지 값들은 필요에 따라 설정하시면 됩니다.
– brandKey는 설정/관리 > 상담 채널 연결 > 웹챗, 챗봇 에서 확인하실 수 있습니다.

<예시>

				
					<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

<div>Content</div>

<!-- TWC chatbot Scripts -->
<script src="https://public-common-sdk.s3.ap-northeast-2.amazonaws.com/sdk/seller/Twc.plugin.js"></script>

<script>
(function() {
  Twc('init', {
   brandKey: "Your_Brand_Key",
   channelType: "Chat_or_Scenario",
   appId: 'Your_App_Id',
   buttonOption: {
     showLauncher: true,
     zIndex: 10,
     bottom: 25,
     right: 25
    }
  }, function () {
      Twc.Chat.on('NewMessage', function () {
        // 메시지(NEW) 뱃지
      })
      Twc.Chat.on('EndCounsel', function () {
        // 상담종료
      })
      Twc.Chat.on('OnCounselor', function () {
        // 상담사 연결
      })
    })
})();
</script>
</body>
</html>

셀러게이트 SDK는 아래와 같은 TWC 파라미터를 제공하고 있습니다.

TWC (EventName, Option, Callback)
– EventName : String (세팅)
– Option : Object (브랜드에 대한 옵션)
– Callback : Function (브랜드 검증 성공일 때 호출)
– 해당 브랜드 섹션 키 성공 여부 또는 콜백 함수를 통해 상담 뱃지에 대한 상태를 제공합니다.

[파라미터 종류와 설명]

Name	Type	Description	Required
brandKey	string	- 발급받은 브랜드키 (웹챗/챗봇 브랜드키 상이)	O
channelType	string	- 채널 타입 (웹챗 : chat, 챗봇 : scenario)	O
appId	string	- App에서 활용 시 Native userAgent에 추가된 패키지명	App: O, Web: X
loginId	string	- 고객 구분 ID 값 고정 파라미터 - 고객 로그인 ID 정보 전송 시 해당 ID 기준의 웹챗 상담방 연결	X
ticketId	string	- 상담 내역을 해당 티켓을 트레킹	X
buttonOption	object	- 제공 버튼 옵션	X
showLauncher	boolean	- 제공 버튼 노출 여부 (true / false) - Default : true	X
zIndex	number	- 제공 버튼 노출 높이 - Default : 10	X
bottom	number	- 버튼 하단 여백 - Default : 25	X
right	number	- 버튼 오른쪽 여백 - Default : 25	X

사용자가 웹챗을 컨트롤 할 수 있는 함수를 아래와 같이 제공합니다.

				
					Twc.Chat.open() // 웹챗 열기

				
					Twc.Chat.close() // 웹챗 닫기(상담은 종료되지 않음)

				
					Twc.Chat.conclude() // 상담을 종료하고 웹챗 닫기

				
					Twc.Chat.isChatStatus() // 상담사 연결 여부

				
					Twc.Chat.on(EventName, Function) // 상담사와 연결 후 상담 상태를 뱃지를 통해 확인할 수 있도록 제공합니다.

Name	Description
NewMessage	상담사에게 메시지가 왔을때
EndCounsel	상담이 종료되었을때
OnCounselor	상담사가 연결되었을때

<예시>

				
					// TWC Callback 함수 활용

(function() {
  Twc('init', {...}, function () {

      // 메시지 이벤트
      Twc.Chat.on('NewMessage', function (data) {
        // ...
        /**
         * data = {
         *    senderType: 'AGENT', // 발신자 타입
         *    senderName: ‘홍길동’, // 발신자 이름
         *    createDate: '20220505051739', // 메시지 전송 날짜
         *    content: {text: ‘상담사 메시지입니다.’} // 메시지
         * }
         */ 
      })

      // 상담 종료 이벤트
      Twc.Chat.on('EndCounsel', function () {
        // ...
      })

      // 상담사 연결 이벤트
      Twc.Chat.on('OnCounselor', function () {
        // ...
      })

    })
})();

웹챗에서 호출하고 있는 네이티브 함수 가이드입니다.

App에서 활용 시 appId(TWC Parameter)는 필수 값이며, App Webview UserAgent에 동일한 AppId가 추가 되어야 합니다. App에서는 상담 상태에 대한 이벤트(Twc.Chat.On())는 활용하실 수 없습니다.

ex) UserAgent 호출 시 Alert 확인: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36 MyApp

웹챗을 오픈 시 webView를 통해 요청합니다.
숨김 처리가 된 경우에는 숨겨진 webView를 노출합니다.

				
					const parameters = {
    func: 'onShowWebChat',
    url: 'WebChat Url'
}

// Android
window.AppJSInterface.onShowWebChat(JSON.stringify(parameters))
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)

웹챗을 숨김 처리합니다. 상담은 종료되지 않습니다.

				
					const parameters = {
    func: 'onHideWebChat'
}
// Android
window.AppJSInterface.onHideWebChat()
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)

웹챗을 종료합니다. 상담 중인 경우 상담이 종료됩니다.

				
					const parameters = {
    func: 'onCloseWebChat'
}
// Android
window.AppJSInterface.onCloseWebChat()
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)

webView로 새창을 엽니다.

				
					const parameters = {
    func: 'onOrderPage',
    url: data.url
}
// Android
window.AppJSInterface.onOrderPage(JSON.stringify(parameters))
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters)

인앱에서 외부 브라우저를 호출하여 페이지를 엽니다.
현재 제공되는 ChatBot에서 상담 채널 연동 시 카카오 상담톡, 네이버톡톡, 페이스북 메신저 버튼은 onExternalPage을 통해 외부 브라우저로 호출합니다.

				
					const parameters = {
   func: 'onExternalPage',
   url: url
};

// Android
window.AppJSInterface.onExternalPage(JSON.stringify(parameters));
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters);

상담사에게 메시지가 왔을때 관련 데이터와 함께 요청합니다.

				
					const parameters = {
   func: 'newChatMessage',
   data: {
     senderType: 'AGENT',
     senderName: ‘홍길동’,
     createDate: '20220505051739',
     content: {text: ‘상담사 메시지입니다.’}
   }
};

// Android
window.AppJSInterface.newChatMessage(JSON.stringify(parameters));
// IOS
window.webkit.messageHandlers.AppJSInterface.postMessage(parameters);

웹챗/챗봇 SDK Javascript

THE WHITE COMMUNICATION

GET SUPPORT

FIND US