Skip to content

Latest commit

 

History

History
219 lines (164 loc) · 8.95 KB

closer-webchat-sdk.md

File metadata and controls

219 lines (164 loc) · 8.95 KB
description
CLOSER 실시간 웹 채팅의 UI를 직접 개발할 수 있는 Webchat SDK에 대해 소개합니다.

CLOSER Webchat SDK 연동 가이드

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

Webchat SDK 이용이 필요하시다면 support@closer.ai로 별도 문의주세요. {% endhint %}

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