CLOSER Webchat SDK 연동 가이드

CLOSER 실시간 웹 채팅의 UI를 직접 개발할 수 있는 Webchat SDK에 대해 소개합니다.

웹사이트 연동 방법을 알아보러 오셨나요? 그렇다면 아래 페이지를 참고해 주세요.

• 웹사이트 연동 방법 알아보기

Webchat SDK 이용이 필요하시다면 [e-mail]로 별도 문의주세요.

WebChat SDK 초기화

• apiKey : 필수, CLOSER에서 제공하는 API 접근 키

var webchatSDK = new CloserSDK.WebChat({
  apiKey: '{closer-api-token}'
});

WebChatClient 생성

• userKey : 선택, 기본값으로 browser fingerprint 사용, 최종사용자의 고유 ID로 String 타입

• botId : 필수, CLOSER에서 생성한 Bot의 ID

• params : 선택, 초기 파라미터 주입

var wsClient = webchatSDK.open({
  userKey: '{closer-enduser-key}',
  botId: '{botId}',
  params: {}
});

Event Listener 목록

var onOpen = function() {};
var onClose = function() {};
var onError = function(error) {};
var onMessage = function(data) {};

// Add Listener
wsClient.addListener('message', onMessage);
wsClient.addListener('open', onOpen);
wsClient.addListener('error', onError);
wsClient.addListener('close', onClose);

// Remove Listener
wsClient.removeListener('message', onMessage);
wsClient.removeListener('open', onOpen);
wsClient.removeListener('error', onError);
wsClient.removeListener('close', onClose);

메시지 전송

// Text type message
wsClient.sendMessage({
  type: 'text',
  text: 'message'
});

// Media type message
wsClient.sendMessage({
  type: 'media',
  media: { contentType: 'image', uri: 'http://...' }
});

객체 스키마

MESSAGE

CLOSER 메시지 Object로 메시지 송/수신에 사용됩니다.

메시지 전송시에는 text / media / location 전송만 지원합니다.

키	타입	필수	설명
id	String	N	메시지의 ID. CLOSER에서 자동으로 생성됨
endUserId	UUID	N	최종사용자의 ID. CLOSER에서 자동으로 생성됨
conversationId	UUID	N	대화의 ID. CLOSER에서 자동으로 생성됨
data	Object(MESSAGE.DATA)	Y	메시지의 데이터. MESSAGE.DATA 참고
meta	Object(MESSAGE.META)	N	메시지의 메타데이터. MESSAGE.META 참고
isUser	Boolean	N	최종사용자인 경우 true, 그 외에는 false
timestamp	UNIX Timestamp with milliseconds	N	메시지 발행 시간

MESSAGE.DATA

키	타입	필수	설명
type	'text', 'media', 'cards', 'location'	Y	메시지의 타입. text : 텍스트 메시지, media : 이미지, 동영상, 오디오 등의 미디어, cards : 카드 타입 리스트 (Carousel로 사용), location: 위치 정보 (latitude, longitude)
text	String	C	text 타입인 경우 필수
media	Object(MESSAGE.DATA.MEDIA)	C	media 타입인 경우 필수
cards	Array(Object(MESSAGE.DATA.CARD))	C	cards 타입인 경우 필수
location	Object(MESSAGE.DATA.LOCATION)	C	location 타입인 경우 필수
button	Object(MESSAGE.DATA.BUTTON)	N	메시지에 포함된 버튼으로 KEYBOARD.BUTTON과는 형식과 동작이 다름 링크 삽입 가능

MESSAGE.META

키	타입	필수	설명
sender	Object(MESSAGE.META.SENDER)	N	메시지를 전송한 전송자의 정보

MESSAGE.DATA.MEDIA

키	타입	필수	설명
contentType	'image', 'video', 'audio', 'link'	Y	이미지, 동영상, 오디오, 링크
uri	String	Y	이미지, 동영상, 오디오, 링크의 URL

MESSAGE.DATA.BUTTON

키	타입	필수	설명
label	String	Y	버튼 인터페이스에 노출할 이름
uri	String	N	버튼이 링크로 동작 시 URL, 없으면 키보드 입력 동작

MESSAGE.DATA.CARD

키	타입	필수	설명
title	String	Y	카드의 제목
description	String	N	카드의 설명
media	Object(MESSAGE.DATA.MEDIA)	N	카드에 포함될 미디어
uri	String	N	카드 선택시 이동할 링크 URL
buttons	Array(Object(MESSAGE.DATA.BUTTON))	N	카드에 포함된 버튼 리스트

MESSAGE.DATA.LOCATION

키	타입	필수	설명
title	String	N	위치의 이름
latitude	Number	Y	GPS Latitude
longitude	Number	Y	GPS longitude

MESSAGE.META.SENDER

키	타입	필수	설명
userKey	String	Y	SENDER 사용 시 필수. 전송자의 ID
platform	String	Y	SENDER 사용 시 필수. 전송자의 플랫폼

KEYBOARD

• CLOSER의 입력 Object로, 사용자의 입력 타입을 표현합니다.

• text인 경우 사용자는 text를 입력할 수 있고, number인 경우 제약조건을 포함합니다.

• buttons는 사용자의 입력을 button으로 받을 수 있도록 필요한 데이터를 포함합니다.

KEYBOARD의 사용자 입력 전송 방식

• text : 사용자가 입력한 텍스트를 그대로 메시지에 전송합니다.

• buttons : 사용자가 선택한 button의 label의 텍스트를 메시지에 전송합니다.

• number : text와 동일하지만, 조건을 Front에서 검증하도록 개발할 수 있습니다.

키	타입	필수	설명
type	'text', 'number', 'buttons'	Y	텍스트, 숫자, 버튼 입력
min	Number	C	number 타입인 경우에 필수, 최소값
max	Number	C	number 타입인 경우에 필수, 최대값
parse	Boolean	N	false인 경우 숫자만 입력 가능, true인 경우 주어진 문자열에서 숫자만 읽어들임
integer	Boolean	N	false인 경우 Integer만 입력 가능
buttons	Array(Object(KEYBOARD.BUTTON))	C	buttons 타입인 경우에 필수

KEYBOARD.BUTTON

키	타입	필수	설명
label	String	Y	버튼 인터페이스에 노출할 이름
params	Object(Dictionary)	N	버튼 선택 시 저장되는 파라미터. key - value dictionary 타입

CONTEXT

CLOSER에서 대화를 진행하는데 필요한 정보입니다. SDK의 WebChatClient가 Open되면 Context를 message listener에 전송합니다.

키	타입	필수	설명
botId	String	Y	Bot의 ID
conversationId	UUID	Y	대화의 ID. CLOSER에서 자동으로 생성됨
endUserId	UUID	Y	최종사용자의 ID. CLOSER에서 자동으로 생성됨
navigation	Object(CONTEXT.NAVIGATION)	N	현재 시나리오의 위치를 표현하는 오브젝트
params	Object(Dictionary)	N	현재 시나리오에서 사용중인 파라미터
platform	'web'	Y	사용자 메시징 채널
userKey	String	Y	사용자 식별 키

CONTEXT.NAVIGATION

키	타입	필수	설명
current	Object(CONTEXT.NAVIGATION.NODE)	Y	마지막 노드의 정보
prev	Object(CONTEXT.NAVIGATION.NODE)	N	이전 노드의 정보

CONTEXT.NAVIGATION.NODE

키	타입	필수	설명
flowId	Number	Y	현재 노드의 플로우 ID
nodeId	Number	Y	현재 노드의 ID

AGENT

키	타입	필수	설명
id	String	Y	상담원의 User ID
profile	Object(AGENT.PROFILE)	N	상담원의 profile 정보

AGENT.PROFILE

키	타입	필수	설명
displayName	String	N	상담원의 DisplayName
picture	String(URL)	N	상담원의 프로필 이미지 URL