開始するには

このドキュメントは、Klleon プラットフォームが提供する Klleon Chat SDK for JavaScript（以下、JavaScript SDK）の使用方法を説明します。

PreviousNew Javascript SDK [1.2.0]Nextイベント

Last updated 2 months ago

開始するには

このドキュメントは、Klleon プラットフォームが提供する Klleon Chat SDK for JavaScript（以下、JavaScript SDK）の使用方法を説明します。

プラットフォーム

JavaScript SDK を使用して Klleon API を呼び出すには、サイトドメインを登録する必要があります。

ドメイン登録はの SDK 管理セクションで行えます。登録プロセスで問題が発生した場合は、partnership@klleon.io までお問い合わせください。

SDK のインストール

JavaScript SDK ファイルをウェブページに含めます。スクリプトタグ内に正しいバージョンを指定してください。

<!doctype html>
<html lang="ja">
  <head>
    <!-- スクリプトを追加 -->
    <script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
  </head>
</html>

SDK の初期化

発行された sdk_key と使用する avatar_id を入力し、init() メソッドを使用して SDK を初期化します。

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

初期化オプション

パラメータ

型

必須

デフォルト値

説明

sdk_key

string

SDK キーを指定します。

avatar_id

string

使用するアバター ID を指定します。

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

アバターの発話速度を調整します。範囲: (0.5 ~ 2.0)

enable_microphone

boolean

true

ブラウザのマイク許可なしで接続します。

log_level

string

debug

SDK ログのレベルを設定します。 debug: debug レベル以上のログを出力。 info: info レベル以上のログを出力。 warn: 警告レベル以上のログを出力。 error: エラーレベルのみ出力。 silent: ログを出力しません。

user_key

string

endUser作成APIを通じて生成されたキー値をマッピングします。このキー値には、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 を使用して Klleon API を呼び出すには、サイトドメインを登録する必要があります。

ドメイン登録はの SDK 管理セクションで行えます。登録プロセスで問題が発生した場合は、partnership@klleon.io までお問い合わせください。

SDK のインストール

JavaScript SDK ファイルをウェブページに含めます。スクリプトタグ内に正しいバージョンを指定してください。

<!doctype html>
<html lang="ja">
  <head>
    <!-- スクリプトを追加 -->
    <script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
  </head>
</html>

SDK の初期化

発行された sdk_key と使用する avatar_id を入力し、init() メソッドを使用して SDK を初期化します。

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

初期化オプション

パラメータ

型

必須

デフォルト値

説明

sdk_key

string

SDK キーを指定します。

avatar_id

string

使用するアバター ID を指定します。

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

アバターの発話速度を調整します。範囲: (0.5 ~ 2.0)

enable_microphone

boolean

true

ブラウザのマイク許可なしで接続します。

log_level

string

debug

user_key

string

endUser作成APIを通じて生成されたキー値をマッピングします。このキー値には、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>