Getting Started

This document provides instructions on how to use the Klleon Chat SDK for JavaScript (hereafter referred to as JavaScript SDK), offered by the Klleon platform.

Platform

To call the Klleon API via the JavaScript SDK, you need to register your site domain.

Domain registration can be completed in the SDK Management section of . If you encounter difficulties during the registration process, please contact : partnership@klleon.io

SDK Installation

Include the JavaScript SDK file in your web page. Ensure the correct version is specified in the script tag.

<!doctype html>
<html lang="en">
  <head>
    <!-- Add script -->
    <script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
  </head>
</html>

SDK Initialization

Initialize the SDK using the init() method by providing the issued sdk_key and the avtar_id you wish to use.

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

InitOption

Parameter

Type

Required

Default Value

Description

sdk_key

string

Your SDK Key.

avatar_id

string

The ID of the avatar to be used.

subtitle_code

string

ko_kr

Adjusts the language of the avatar's speech text. ko_kr : Korean en_us : English ja_jp : Japanes id_id : Indonesian

voice_code

string

ko_kr

Adjusts the language of the avatar's spoken voice. ko_kr : Korean en_us : English ja_jp : Japanes id_id : Indonesian

voice_tts_speech_speed

number

1.0

Adjusts the speed of the avatar's speech. Range: (0.5 ~ 2.0)

enable_microphone

boolean

true

Connects without requiring browser microphone permission.

log_level

string

debug

user_key

string

The key value created through the endUser creation API is mapped. This key value includes the endUser key and an expiration timestamp.

Example

<!-- 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]NextEvents

Last updated 2 months ago

SDK Initialization

Initialize the SDK using the init() method by providing the issued sdk_key and the avtar_id you wish to use.

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

InitOption

Parameter

Type

Required

Default Value

Description

sdk_key

string

Your SDK Key.

avatar_id

string

The ID of the avatar to be used.

subtitle_code

string

ko_kr

Adjusts the language of the avatar's speech text. ko_kr : Korean en_us : English ja_jp : Japanes id_id : Indonesian

voice_code

string

ko_kr

Adjusts the language of the avatar's spoken voice. ko_kr : Korean en_us : English ja_jp : Japanes id_id : Indonesian

voice_tts_speech_speed

number

1.0

Adjusts the speed of the avatar's speech. Range: (0.5 ~ 2.0)

enable_microphone

boolean

true

Connects without requiring browser microphone permission.

log_level

string

debug

Set the logging level for . debug : Logs debug level or higher. info : Logs info level or higher. warn : Logs warning level or higher. error : Logs error level only. silent : Does not output logs.

user_key

string

The key value created through the endUser creation API is mapped. This key value includes the endUser key and an expiration timestamp.

Example

<!-- 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>