이 튜토리얼은 정보를 보여주고 봇과의 인터렉션을 활성화하는 위젯을 호스팅하기 위해 Kore.ai 봇 웹 SDK의 인스턴스를 설정하고 실행하기 위한 엔드투엔드 워크스루입니다.

위젯 SDK 개요

Kore.ai 위젯 SDK를 호스팅하는 방법에는 두 가지가 있습니다.

• WebSDK와 함께 공동 호스팅 – 웹/모바일 클라이언트 및 위젯 SDK 채널을 모두 활성화하고 설정하거나,
• 독립적으로 – 위젯 SDK 채널만 활성화하고 설정합니다.

이 튜토리얼에서는, 두 가지 변형에 대한 지침을 나열합니다.

Kore.ai 위젯 SDK 설치 및 실행하기

이 섹션에서는 위젯 SDK와 로컬 호스트 서버 컴퓨터에서 실행 중인 테스트 애플리케이션을 사용한 Kore.ai 봇을 실행하는 방법을 자세히 설명합니다. 사전 요구 사항

1. 시작하려면, 테스트 애플리케이션에서 실행할 디지털 뷰가 있는 봇을 빌드해야 합니다(디지털 뷰에 대한 자세한 내용은 여기를 참조하세요).
2. 새 클라이언트 앱을 생성하거나 기존 클라이언트 앱을 사용하여 위의 봇을 위한 위젯 SDK 채널을 활성화하고 채널 설정을 정의해야 합니다. 단계에 대한 자세한 설명은 여기를 참조하세요.
3. WebSDK와 함께 패널 및 위젯을 공동 호스팅하려는 경우, 새 클라이언트 앱을 생성하거나 기존 클라이언트 앱을 사용하여 위의 봇을 위한 웹/모바일 클라이언트 채널을 활성화하고 채널 설정을 정의해야 합니다. 단계에 대한 자세한 설명은 여기를 참조하세요.
4. 봇을 게시합니다.
5. 채널 -> 설정된 채널에서 설정된 위젯 SDK 채널을 클릭하여 엽니다. 구성 탭에서 다음을 기록합니다. 나중에 위젯 SDK 설정에서 사용할 것입니다.
   • 봇 이름
   • 봇 ID
   • 클라이언트 ID
   • 클라이언트 시크릿
6. 웹/모바일 SDK와 함께 패널 및 위젯을 공동 호스팅하려면, 채널 -> 설정된 채널에서 설정된 웹/모바일 클라이언트 채널을 클릭하여 엽니다. 구성 탭에서 다음을 기록합니다. 나중에 위젯 SDK 설정에서 사용할 것입니다.
   • 봇 이름
   • 봇 ID
   • 클라이언트 ID
   • 클라이언트 시크릿

다음 단계에서는 위젯 SDK와 로컬 호스트 서버에서 봇을 로컬로 실행하는 테스트 애플리케이션에 필요한 소프트웨어 패키지를 다운로드, 압축 해제, 설치 및 설정해야 합니다. 요구 사항에 따라 아래 해당 섹션을 참조합니다.

• 패널을 개별적으로 호스팅 또는
• 웹 SDK와 함께 패널을 공동 호스팅.

개별적 패널 호스팅 설정: Kore.ai 위젯 SDK를 다운로드하려면, https://github.com/Koredotcom/web-kore-sdk로 이동한 다음, 다운로드를 클릭합니다. …/SDKApp/sdk 폴더로 모든 파일을 압축 해제합니다.

1. UI 폴더를 엽니다.
2. 다음 파일을 찾고 엽니다: kore-widgets-config.js
3. 봇 빌더에서 생성한 ‘위젯 SDK’ 채널 설정으로 botOptions를 설정합니다.
   • botOptions.botInfo
   • botOptions.clientId
   • botOptions.clientSecret
4. 브라우저에서 index_widgets.html 파일을 열고 표시되는 패널을 확인합니다. 이 <div> 요소를 패널을 호스팅하려는 웹 사이트 html 페이지에 추가할 수 있습니다.

웹/모바일 SDK와 함께 패널 공동 호스팅 설정: Kore.ai 위젯 SDK를 다운로드하려면, https://github.com/Koredotcom/web-kore-sdk로 이동한 다음, 다운로드를 클릭합니다. …/SDKApp/sdk 폴더로 모든 파일을 압축 해제합니다.

1. UI 폴더를 엽니다.
2. 다음 파일을 찾고 엽니다: kore-config.js
3. 봇 빌더에서 생성한 ‘웹/모바일 클라이언트’ 채널 설정으로 botOptions를 설정합니다
   • botOptions.botInfo
   • botOptions.clientId
   • botOptions.clientSecret
4. 다음 파일을 엽니다: kore-widgets-config.js
5. 봇 빌더에서 생성한 ‘위젯 SDK’ 채널 설정으로 botOptions를 설정합니다
   • botOptions.botInfo
   • botOptions.clientId
   • botOptions.clientSecret
6. 브라우저에서 index_widgets_chat.html 파일을 열고 위젯과 함께 대화창을 확인합니다.