사전 작업

Kakao i Web Chatbot SDK를 사용하기 전에 필요한 작업은 다음과 같습니다.

안내
사전 작업 수행과 관련한 자세한 설명은 카카오엔터프라이즈 담당자에게 문의하시기 바랍니다.

개발 가이드

Web Chatbot을 구현하기 위한 전체 개발 프로세스는 다음과 같습니다.

Chatbot 구성하기

카카오엔터프라이즈 담당자와 협의를 통해 Web Chatbot 관련 사전 협의를 진행 후 Chatbot을 구성합니다. Chatbot 구성이 완료되면, 카카오엔터프라이즈 담당자는 고객사에게 SDK 초기화 시 필요한 서비스명(serviceName) 정보를 전달합니다.

SDK 스크립트 추가하기

다음의 HTML 스크립트 태그를 추가하여 SDK를 설치합니다. SDK Version은 SemVer 양식으로 작성됩니다.

코드예제SDK 스크립트 추가

<script type="text/javascript" src="https://objectstorage.kr-central-1.kakaoi.io/v1/735f5d2ed4d742468bcbcd6e533b26aa/kakaoi-webchatbot-sdk/{version}/kakaoi.js"></script>

SDK 초기화하기

다음 메서드를 호출하여 SDK를 초기화합니다. 이때, 카카오엔터프라이즈 담당자로부터 사전에 전달받은 serviceName(서비스명)을 입력해야 합니다.

코드예제SDK 초기화

Kakaoi.init({
	serviceName: 'string', 
})

코드예제SDK 초기화 Sample Code

Kakaoi.init({
	serviceName: 'service name', 
})

Chatbot UI 활성화하기

Web Chatbot을 사용하기 위해, createChat() 메서드를 호출하여 채팅 UI를 활성화합니다. createChat() 메서드로 생성되는 UI에는 토큰 발급, 채팅 전송 등 Chatbot을 사용하는데 필요한 기능들이 내장되어있습니다.

코드예제Chatbot UI 활성화

Kakaoi.UI.createChat({
	title: 'string', 
	subTitle: 'string',
	profileName: 'string', 
	profileImageUrl: 'string', 
	bubbleBackgroundColor: 'string', 
	bubbleTextColor: 'string', 
	activeKeyword: 'string', 
	onChatSend: (text) {
	},
	onChatReceive: (payloads) {
	},
  blockButtonClickInterceptor: (buttonInfo) { 
	},
	closeButtonClickInterceptor: (e) {
	},
	floatingButtonClickInterceptor: (e) {
	},
  onFileUpload: (inputElement) {
	}
});

Sample Code

다음은 Kakao i Web Chatbot SDK를 사용하여 구현한 Web Chatbot 화면과 이때 사용된 코드 예제입니다.

Kakaoi.UI.createChat({
	title: '챗봇', 
	subTitle: '봇과 대화중',
	profileName: 'KakaoEnterprise', 
	profileImageUrl: 'https://daum.net/some.png', 
	bubbleBackgroundColor: '#aabbcc', 
	bubbleTextColor: '#aabbcc', 
	activeKeyword: '시작', 
	blockButtonClickInterceptor: (buttonInfo) { 
	},
	onChatSend: (text) {
	},
	onChatReceive: (payloads) {
	},
	closeButtonClickInterceptor: (e) {
	},
	floatingButtonClickInterceptor: (e) {
	},
});

안내
SDK에서 제공하는 메서드를 호출하여 다양한 UI 구성 요소를 변경하는 방법은 Web Chatbot 메서드 문서를 참고하시기 바랍니다.