Klleon Chat SDK
English
English
  • ✨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
  • Install
  • Initialize
  • Start Avatar Streaming
  • Example
  1. JavaScript SDK [v0.x.x] (Planned for Deprecation)

Quick Start

This document guides you through how to use the Klleon Chat SDK for JavaScript (hereinafter referred to as JavaScript SDK) provided by the Klleon platform.

PreviousJavaScript SDK [v0.x.x] (Planned for Deprecation)NextInitialize

Last updated 5 months ago

Platform

To call the Klleon API via the JavaScript SDK, you need to register a site domain. You can register your site domain in SDK Management in . If you have any difficulties during the registration process, please contact .


Install

Include the JavaScript SDK file in your web page. Be sure to include the correct version inside the script tag.

<script src="https://sdk.klleon.io/klleon-chat/0.12.1/klleon_chat_sdk.js"></script>

Initialize

After embedding the JavaScript SDK into your web page, call the JavaScript SDK initialization function below.

async function init() {
    const option = {
        // Issued sdk key
        sdk_key: 'sdk_key'
    }
    await KlleonChat.init(option);
}

Start Avatar Streaming

Call the Start Avatar Streaming method to output the streaming screen.

function showStreaming() {
    const option = {
        // Avatar ID to use
        avatar_id: 'a5fe629d-0090-11ef-8ee1-0abbf354c5cc'
    }
    KlleonChat.showStreaming(option);
}

Example

<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klleon Chat SDK</title>
    <script src="https://sdk.klleon.io/klleon-chat/0.12.1/klleon_chat_sdk.js"></script>
</head>
<body>
<script>
    async function initializeApp() {
        await KlleonChat.init({sdk_key: 'sdk_key'});
        KlleonChat.showStreaming({avatar_id: 'a5fe629d-0090-11ef-8ee1-0abbf354c5cc'});
    }
    initializeApp();
</script>
<div id="klleon_chat" style="width: 1000px; height: 100vh"></div>
</body>
</html>

Below is an example of calling an initialization function and then starting a conversation with the avatar. Please refer to for more samples.

Klleon Studio
partnership@klleon.io
Github