사전 작업
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>
항목 | 설명 |
---|---|
script type | text/javascript 로 고정 |
src | 설치할 SDK 저장 경로 |
최신 버전을 사용하는 경우: {version}에 latest 입력- 2022년 1월 11일 기준 최신 버전은 v1.0.0 |
|
특정 버전을 사용하는 경우: {version}에 특정 버전 입력 |
SDK 초기화하기
다음 메서드를 호출하여 SDK를 초기화합니다. 이때, 카카오엔터프라이즈 담당자로부터 사전에 전달받은 serviceName(서비스명)을 입력해야 합니다.
코드예제SDK 초기화
Kakaoi.init({
serviceName: 'string',
})
항목 | 설명 |
---|---|
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) {
}
});
메서드 | 타입 | 필수 여부 | 설명 |
---|---|---|---|
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 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 메서드 문서를 참고하시기 바랍니다.