Kakao i Web Chatbot::SDK 개발 프로세스

페이지 이동경로

사전 작업

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

안내
사전 작업 수행과 관련한 자세한 설명은 카카오엔터프라이즈 담당자에게 문의하시기 바랍니다.
Kakao i Web Chatbot SDK 사전 작업
구분 항목
① 기본 정보 생성 대표계정 생성
서비스명(serviceName) 및 앱 이름 정의
Bot 생성 및 API(Skill) 개발
- Skill은 Bot의 비즈니스 로직을 수행하는 API를 의미함
Bot Builder에서 수행 작업 채널 생성
서비스 ID 생성
Bot 만들기 권한 설정
시나리오 생성
Kakao Developers에서 수행 작업 앱 등록 및 앱 패키지 생성
앱 키 획득
- 앱 등록 후, 앱 키는 자동 생성됨(Kakao Developers > 앱설정 > 요약정보)
④ 앱 서버 등록 카카오엔터프라이즈 앱 서버에 서비스 추가

개발 가이드

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 스크립트 추가
항목 설명
script type text/javascript로 고정
src 설치할 SDK 저장 경로
최신 버전을 사용하는 경우: {version}에 latest 입력
- 2022년 1월 11일 기준 최신 버전은 v1.0.0
특정 버전을 사용하는 경우: {version}에 특정 버전 입력

SDK 초기화하기

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

코드예제SDK 초기화

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

SDK 초기화
항목 설명
serviceName 카카오엔터프라이즈 담당자로부터 전달받은 서비스명 정보

코드예제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) {
	}
});

Chat UI 활성화 메서드 목록
메서드 타입 필수 여부 설명
Method 필수 채팅방 생성
title String 선택 채팅방 타이틀 영역에 표시되는 텍스트
- 띄어쓰기 포함 15자 이내
- 이모지 및 특수기호 가능
subTitle String 선택 Chatbot의 상태를 표시하는 텍스트
- 봇과 대화 중 또는 상담사와 대화 중으로만 변경 가능
profileName String 선택 Bot의 이름
- 띄어쓰기 포함 15자 이내
- 이모지 및 특수기호 가능
profileImageUrl String 선택 프로필 이미지에 사용할 URL 또는 Base64 이미지
bubbleTextColor String 선택 사용자 말풍선 텍스트색
- Hex Code(#ffbbcc)
bubbleBackgroundColor String 선택 사용자 말풍선 배경색
- Hex Code(#ffbbcc)
activeKeyword String 선택 채팅창 활성화 시 웰컴 블록 호출로 사용할 키워드
- 카카오엔터프라이즈 담당자와 협의 필요
onChatSend() Method 선택 사용자가 발송한 텍스트를 고객사가 구독하는 리스너 함수
ex 1) 고객사의 로그 시스템에 대화 내용을 적재
ex 2) 고객사의 상담 시스템에 전송
onChatReceive() Method 선택 Bot이 발송한 응답 텍스트를 고객사가 구독하는 리스너 함수
blockButtonClickInterceptor() Method 선택 Bot 응답 구성요소 중 버튼 블록 클릭 시 수행할 동작을 커스터마이징 하는 함수
ex) 인앱 브라우저에서 부모 앱에 특정 요청을 전송하고, 웹에서는 기본 동작을 수행하는 등의 요구사항에 대해 분기 처리 가능
- 버튼 블록의 속성(label, linkUrl 등)은 buttonInfo에서 확인 가능
true: 함수 실행 종료 후 이어서 기본 동작(링크 연결 또는 채팅 자동 입력 등)을 수행
false: 기본 동작을 수행하지 않음
closeButtonClickInterceptor() Method 선택 창닫기 버튼 클릭 시 수행할 동작을 커스터마이징 가능
ex) 인앱 브라우저에서 부모 앱에 특정 요청을 전송하고, 웹에서는 기본 동작을 수행하는 등의 요구사항에 대해 분기 처리 가능
true: 기본 동작(채팅방을 닫음)을 실행시켜주는 반환값
false: 고객사가 구현한 동작을 실행
floatingButtonClickInterceptor() Method 선택 플로팅 버튼 클릭 시 수행할 동작을 커스터마이징 가능
ex) 인앱 브라우저에서 부모 앱에 특정 요청을 전송하고, 웹에서는 기본 동작을 수행하는 등의 요구사항에 대해 분기 처리 가능
true: 기본 동작(채팅창 오픈)을 실행시켜주는 반환값
false: 고객사가 구현한 동작을 실행
onFileUpload() Method 선택 파일 업로드를 구독하는 리스너 함수
- showUploadButton() 참고
onExitCounselingButtonClick() Method 선택 [상담 종료] 버튼 클릭을 구독하는 리스너 함수
- showExitCounselingButton() 참고

Sample Code

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

Chatbot 화면

그림Chatbot 화면

코드예제Chatbot UI Sample Code

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 메서드 문서를 참고하시기 바랍니다.
이 문서가 만족스러운 이유를 알려주세요.
이 문서에 아쉬운 점을 알려주세요.
평가해주셔서 감사합니다.

더 자세한 의견은 documentation@kakaoenterprise.com 으로 제보해주세요.