Skip to main content

Using UI Components

Klleon Chat SDK provides two custom web components: <avatar-container /> and <chat-container /> for displaying avatar videos and chat interfaces. These components are used as regular HTML tags and can be controlled via properties (props) and styled with CSS.

<avatar-container />​

This container displays the real-time avatar video stream.

Basic Usage and Key Props:

<avatar-container />
interface AvatarProps {
  videoStyle?: CSSProperties;
  volume?: number;
}
const avatarRef = useRef<HTMLElement & AvatarProps>(null);

useEffect(() => {
  avatarRef.current.videoStyle = {
    borderRadius: "30px",
    objectFit: "cover",
  };
  avatarRef.current.volume = 100;
}, [])

<avatar-container ref={avatarRef} class="your-class" />;
  • class: Adds a class to the component. className is not supported.
  • See the table below for more available props.

Props:

Property NameTypeDefaultDescription
volume number 100 Controls the avatar voice volume. (Value between 0 and 100)
videoStyle StyleObject | null null CSS style object to be applied to the internal video element.

HTML:
<avatar-container video-style='{"borderRadius": "12px", "objectFit": "cover"}'></avatar-container>

React:
ref.current.videoStyle = { borderRadius: '12px', objectFit: 'cover' }

Vue:
ref.value.videoStyle = { borderRadius: '12px', objectFit: 'cover' }

Vanilla JS:
element.videoStyle = { borderRadius: '12px', objectFit: 'cover' }
How videoStyle Works

videoStyle is applied directly to the internal video stream element by the SDK. It is separate from the external style attribute and gives you control over the video display itself.

<chat-container />​

This container displays chat messages and allows user input for interaction with the avatar.

Basic Usage and Key Props:

<chat-container />
interface ChatProps {
  delay?: number;
  type?: "voice" | "text";
  isShowCount?: boolean;
}

const chatRef = useRef<HTMLElement & ChatProps>(null);

useEffect(() => {
  chatRef.current.delay = 50;
  chatRef.current.type = "text";
  chatRef.current.isShowCount = true;
}, [])

<chat-container ref={chatRef} class="your-class" />;
  • class: Adds a class to the component. className is not supported.
  • See the table below for more available props.

Props:

Property NameTypeDefaultDescription
type 'text' | 'voice' 'text' Sets the initial mode of the chat input field.
'text': Text input mode
'voice': Voice input mode
delay number 30 Delay time per character (milliseconds, ms) for the avatar message typing effect. Higher values result in slower typing speed.
isShowCount boolean true When in text input mode, sets whether to display the current character count and maximum character count counter.
How to Use Web Component Props

In HTML:

  • video-style='{"borderRadius": "12px"}'
  • is-show-count (true)
  • is-show-count="false" (false)

In JavaScript:

  • element.videoStyle = { borderRadius: "12px" }
  • element.isShowCount = true

In React:

  • ref.current.videoStyle = { borderRadius: "12px" }
  • ref.current.isShowCount = true

Web components use kebab-case in HTML and camelCase in JavaScript.

UI Component Integration Example​

The following example shows how to layout <avatar-container /> and <chat-container /> together like a typical chat application:

styles.ts
styles.ts
import type { CSSProperties } from "react";

export const wrapperStyle: CSSProperties = {
  display: "flex",
  gap: "20px",
  padding: "20px",
  backgroundColor: "white",
  borderRadius: "12px",
  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
  justifyContent: "center",
  alignItems: "center",
  height: "100vh",
};

export const avatarStyle: CSSProperties = {
  width: "350px",
  height: "550px",
  borderRadius: "8px",
  backgroundColor: "#e0e0e0",
};

export const chatStyle: CSSProperties = {
  width: "350px",
  height: "550px",
  border: "1px solid #ccc",
  borderRadius: "8px",
};
index.html (klleon-sdk installation)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Klleon Chat SDK</title>
    <script src="https://web.sdk.klleon.io/{VERSION}/klleon-chat.umd.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
App.tsx (UI Component Layout Example)
import { useEffect, useRef, type CSSProperties } from "react";
import { wrapperStyle, avatarStyle, chatStyle } from "./styles";

interface AvatarProps {
  videoStyle?: CSSProperties;
  volume?: number;
}

interface ChatProps {
  delay?: number;
  type?: "voice" | "text";
  isShowCount?: boolean;
}

function App() {
  const avatarRef = useRef<HTMLElement & AvatarProps>(null);
  const chatRef = useRef<HTMLElement & ChatProps>(null);

  useEffect(() => {
    const { KlleonChat } = window;
    const init = async () => {
      await KlleonChat.init({
        sdk_key: "YOUR_SDK_KEY",
        avatar_id: "YOUR_AVATAR_ID",
      });
    };
    init();

    if (avatarRef.current) {
      avatarRef.current.videoStyle = {
        borderRadius: "30px",
        objectFit: "cover",
      };
      avatarRef.current.volume = 100;
    }

    if (chatRef.current) {
      chatRef.current.delay = 30;
      chatRef.current.type = "text";
      chatRef.current.isShowCount = true;
    }

    return () => {
      KlleonChat.destroy();
    };
  }, []);

  return (
    <div style={wrapperStyle}>
      <avatar-container ref={avatarRef} style={avatarStyle} />
      <chat-container ref={chatRef} style={chatStyle} />
    </div>
  );
}

export default App;
SDK Initialization Info

Make sure to replace {VERSION}, YOUR_SDK_KEY, and YOUR_AVATAR_ID with actual valid values. For full setup instructions, refer to Getting Started.

class attribute in React

These web components use the standard HTML class attribute, not React's className.

Correct:

<avatar-container class="my-avatar" />
<chat-container class="my-chat" />

Incorrect:

<avatar-container className="my-avatar" /> // ❌ Will not work

If you're using TypeScript, the type definitions allow only class, not className.