CLOSER Webchat SDK 연동 가이드

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

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

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

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 전송만 지원합니다.

MESSAGE.DATA

MESSAGE.META

MESSAGE.DATA.MEDIA

MESSAGE.DATA.BUTTON

MESSAGE.DATA.CARD

MESSAGE.DATA.LOCATION

MESSAGE.META.SENDER

KEYBOARD

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

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

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

KEYBOARD의 사용자 입력 전송 방식

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

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

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

KEYBOARD.BUTTON

CONTEXT

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

CONTEXT.NAVIGATION

CONTEXT.NAVIGATION.NODE

AGENT

AGENT.PROFILE

Last updated