시작하기

이 문서는 클레온 플랫폼에서 제공하는 Klleon Chat SDK for JavaScript(이하 JavaScript SDK) 사용 방법을 안내합니다.

PreviousNew Javascript SDK [1.2.0]Next이벤트

Last updated 2 months ago

시작하기

이 문서는 클레온 플랫폼에서 제공하는 Klleon Chat SDK for JavaScript(이하 JavaScript SDK) 사용 방법을 안내합니다.

플랫폼

JavaScript SDK를 통해 클레온 API를 호출하려면 사이트 도메인을 등록해야 합니다.

사이트 도메인 등록은 의 SDK 관리에서 등록 가능합니다. 등록하는 과정에서 어려움이 있다면 partnership@klleon.io으로 문의 부탁 드립니다

SDK 설치

JavaScript SDK 파일을 웹 페이지에 포함 시킵니다. script 태그 내부에 버전을 정확히 기입해야 합니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- 스크립트 추가 -->
    <script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
  </head>
</html>

SDK 초기화

발급받은 sdk_key, 사용할 avtar_id값을 넣어서 init() 메서드로 SDK를 초기화합니다.

window.KlleonChat.init({
  sdk_key: "your sdk key",
  avatar_id: "your avatar id",
});

InitOption

파라미터

타입

필수여부

기본값

설명

sdk_key

string

avatar_id

string

subtitle_code

string

ko_kr

아바타가 발화한 텍스트의 언어를 조절합니다 ko_kr: 한국어

en_us: 영어

ja_jp: 일본어

id_id: 인도네시아어

voice_code

string

ko_kr

아바타가 발화하는 음성의 언어를 조절합니다. ko_kr: 한국어

en_us: 영어

ja_jp: 일본어

id_id: 인도네시아어

voice_tts_speech_speed

number

1.0

아바타가 발화하는 속도를 조절합니다.

range: (0.5 ~ 2.0)

enable_microphone

boolean

true

브라우저 마이크 permission없이 연결

log_level

string

debug

info : info 레벨 이상의 로그를 출력합니다.

warn: warn 레벨 이상의 로그를 출력합니다.

error: error 레벨 로그를 출력합니다.

silent: 로그를 출력하지 않습니다.

user_key

string

endUser 생성 API를 통해 만들어진 키값을 맵핑합니다.

해당 key값은 endUser 키와 만료 타임스탬프가 포함됩니다.

예제

<!-- index.html -->
<!doctype html>
<html>
  <head>
    ...
    <script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
  </head>
  <body>
    <script>
      window.KlleonChat.init({
        sdk_key: "your sdk key",
        avatar_id: "a5fe629d-0090-11ef-8ee1-0abbf354c5cc",
      });
    </script>
    <div style="display: flex; flex-direction: column; gap: 24px 0px">
      <div style="display: flex; width: 650px; height: 650px; gap: 0px 24px">
        <div style="display: flex; flex: 1">
          <avatar-container
            style="width: 100%; height: 100%"
          ></avatar-container>
        </div>
        <chat-container
          style="display: flex; flex: 1; border-radius: 24px"
        ></chat-container>
      </div>
    </div>
  </body>
</html>

PreviousNew Javascript SDK [1.2.0]Next이벤트

Last updated 2 months ago

플랫폼

JavaScript SDK를 통해 클레온 API를 호출하려면 사이트 도메인을 등록해야 합니다.

사이트 도메인 등록은 의 SDK 관리에서 등록 가능합니다. 등록하는 과정에서 어려움이 있다면 partnership@klleon.io으로 문의 부탁 드립니다

SDK 설치

JavaScript SDK 파일을 웹 페이지에 포함 시킵니다. script 태그 내부에 버전을 정확히 기입해야 합니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- 스크립트 추가 -->
    <script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
  </head>
</html>

SDK 초기화

발급받은 sdk_key, 사용할 avtar_id값을 넣어서 init() 메서드로 SDK를 초기화합니다.

window.KlleonChat.init({
  sdk_key: "your sdk key",
  avatar_id: "your avatar id",
});

InitOption

파라미터

타입

필수여부

기본값

설명

sdk_key

string

avatar_id

string

subtitle_code

string

ko_kr

아바타가 발화한 텍스트의 언어를 조절합니다 ko_kr: 한국어

en_us: 영어

ja_jp: 일본어

id_id: 인도네시아어

voice_code

string

ko_kr

아바타가 발화하는 음성의 언어를 조절합니다. ko_kr: 한국어

en_us: 영어

ja_jp: 일본어

id_id: 인도네시아어

voice_tts_speech_speed

number

1.0

아바타가 발화하는 속도를 조절합니다.

range: (0.5 ~ 2.0)

enable_microphone

boolean

true

브라우저 마이크 permission없이 연결

log_level

string

debug

sdk의 를 출력하는 레벨을 설정합니다. debug: debug 레벨 이상의 로그를 출력합니다.

info : info 레벨 이상의 로그를 출력합니다.

warn: warn 레벨 이상의 로그를 출력합니다.

error: error 레벨 로그를 출력합니다.

silent: 로그를 출력하지 않습니다.

user_key

string

endUser 생성 API를 통해 만들어진 키값을 맵핑합니다.

해당 key값은 endUser 키와 만료 타임스탬프가 포함됩니다.

예제

<!-- index.html -->
<!doctype html>
<html>
  <head>
    ...
    <script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
  </head>
  <body>
    <script>
      window.KlleonChat.init({
        sdk_key: "your sdk key",
        avatar_id: "a5fe629d-0090-11ef-8ee1-0abbf354c5cc",
      });
    </script>
    <div style="display: flex; flex-direction: column; gap: 24px 0px">
      <div style="display: flex; width: 650px; height: 650px; gap: 0px 24px">
        <div style="display: flex; flex: 1">
          <avatar-container
            style="width: 100%; height: 100%"
          ></avatar-container>
        </div>
        <chat-container
          style="display: flex; flex: 1; border-radius: 24px"
        ></chat-container>
      </div>
    </div>
  </body>
</html>