Klleon Chat SDK
English
KoreanJapaneseEnglish
English
KoreanJapaneseEnglish
  • ✨New Javascript SDK [1.2.0]
    • Getting Started
    • Events
    • UI
    • Methods
      • Life Cycle
      • Text Chat
      • Voice Chat
      • Echo Chat
      • Audio Echo Chat
      • Other
    • TypeScript Support
    • Examples
      • VanillaJS
      • React
      • Nextjs
    • Log System
    • Updates
  • JavaScript SDK [v0.x.x] (Planned for Deprecation)
    • Quick Start
    • Initialize
    • Avatar Streaming
      • Start Streaming
      • Stop Streaming
      • Control Streaming Screen
    • Set Chat Screen
    • Text Message
    • Voice Message
    • Echo - Repeat My Message
    • Event Subscription
    • Updates
  • Service Architecture
Powered by GitBook
LogoLogo

Products

  • Pricing

Websites

  • Homepage
  • Youtube
  • Linkedin

Copyright © Klleon. All rights reserved

On this page
  • Platform
  • SDK Installation
  • SDK Initialization
  • InitOption
  • Example
  1. New Javascript SDK [1.2.0]

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.

PreviousNew Javascript SDK [1.2.0]NextEvents

Last updated 1 month ago

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

O

-

Your SDK Key.

avatar_id

string

O

-

The ID of the avatar to be used.

subtitle_code

string

X

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

X

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

X

1.0

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

enable_microphone

boolean

X

true

Connects without requiring browser microphone permission.

log_level

string

X

debug

user_key

string

X

-

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>

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.

✨
Klleon Studio
Version Info
SDK logs