Skip to main content

Complete Vanilla JS Example

Save the code below as index.html, replace {VERSION}, YOUR_SDK_KEY, and YOUR_AVATAR_ID with actual values, and open it in your browser. You can observe SDK state changes and events via the browser’s developer console.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Klleon Chat SDK - Minimal Vanilla JS Example</title>
    <!-- Replace {VERSION} with the actual SDK version (e.g., 1.2.0) -->
    <script src="https://web.sdk.klleon.io/{VERSION}/klleon-chat.umd.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .container {
        display: flex;
        width: 900px;
        max-width: 100%;
        height: 600px;
        gap: 20px;
        margin-top: 20px;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
      }
      .avatar-section {
        flex: 2;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
      }
      .chat-controls-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      avatar-container {
        width: 100%;
        height: 100%;
        background-color: #e0e0e0;
      }
      chat-container {
        height: 400px;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow-y: auto;
        padding: 10px;
        background-color: #fff;
      }
      .input-group {
        display: flex;
        margin-bottom: 10px;
      }
      .input-group label {
        margin-right: 5px;
        align-self: center;
        width: 40px;
      }
      .input-group input[type="text"] {
        flex-grow: 1;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px 0 0 4px;
        outline: none;
      }
      .input-group button {
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-left: none;
        background-color: #007bff;
        color: white;
        cursor: pointer;
        border-radius: 0 4px 4px 0;
      }
      .input-group button:hover {
        background-color: #0056b3;
      }
      h1 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Klleon Chat SDK - Method Test</h1>

    <div class="container">
      <div class="avatar-section">
        <avatar-container
          volume="100"
          videoStyle='{"borderRadius": "24px"}'
        ></avatar-container>
      </div>
      <div class="chat-controls-section">
        <chat-container
          delay="30"
          type="text"
          isShowCount="true"
        ></chat-container>
        <div class="input-group">
          <label for="messageInput">text:</label>
          <input
            type="text"
            id="messageInput"
            placeholder="Enter message to send..."
          />
          <button id="sendMessageBtn">Send</button>
        </div>
        <div class="input-group">
          <label for="echoInput">echo:</label>
          <input
            type="text"
            id="echoInput"
            placeholder="Text for avatar to speak..."
          />
          <button id="echoBtn">Speak</button>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", async () => {
        const sdkKey = "YOUR_SDK_KEY";
        const avatarId = "YOUR_AVATAR_ID";

        const messageInput = document.getElementById("messageInput");
        const sendMessageBtn = document.getElementById("sendMessageBtn");
        const echoInput = document.getElementById("echoInput");
        const echoBtn = document.getElementById("echoBtn");

        if (!window.KlleonChat) {
          console.error(
            "Klleon Chat SDK not loaded. Please check the script tag."
          );
          return;
        }

        console.log("SDK loaded. Attempting initialization...");

        try {
          window.KlleonChat.onStatusEvent((status) => {
            console.log(`SDK Status Event: ${status}`);
            if (status === "VIDEO_CAN_PLAY") {
              console.log("Avatar video ready! SDK methods available.");
            }
          });

          window.KlleonChat.onChatEvent((chatData) => {
            console.log(`SDK Chat Event: ${JSON.stringify(chatData)}`);
          });

          await window.KlleonChat.init({
            sdk_key: sdkKey,
            avatar_id: avatarId,
            log_level: "info",
          });
          console.log("SDK initialized successfully!");

          sendMessageBtn.addEventListener("click", () => {
            const message = messageInput.value.trim();
            if (message) {
              try {
                window.KlleonChat.sendTextMessage(message);
                console.log(`sendTextMessage called: \"${message}\"`);
                messageInput.value = "";
              } catch (error) {
                console.error(
                  `sendTextMessage error: ${error.message || error}`
                );
              }
            }
          });

          echoBtn.addEventListener("click", () => {
            const textToEcho = echoInput.value.trim();
            if (textToEcho) {
              try {
                window.KlleonChat.echo(textToEcho);
                console.log(`echo called: \"${textToEcho}\"`);
                echoInput.value = "";
              } catch (error) {
                console.error(`echo error: ${error.message || error}`);
              }
            }
          });
        } catch (error) {
          console.error(
            `SDK initialization or event listener setup failed: ${
              error.message || error
            }`
          );
        }

        window.addEventListener("beforeunload", () => {
          if (
            window.KlleonChat &&
            typeof window.KlleonChat.destroy === "function"
          ) {
            console.log("Cleaning up SDK resources before page unload.");
            window.KlleonChat.destroy();
          }
        });
      });
    </script>
  </body>
</html>