### Install Klleon Chat SDK via HTML Script Tag
Source: https://docs.klleon.io/en/docs/setup/getting-started
This snippet shows how to include the Klleon Chat SDK in your HTML file by adding a script tag. Replace '{VERSION}' with the specific SDK version you want to use. This method makes the SDK available globally via `window.KlleonChat`.
```html
Klleon Chat SDK Getting Started
```
--------------------------------
### Complete Vanilla JS Example for Klleon Chat SDK
Source: https://docs.klleon.io/en/docs/examples/vanilla-js
This HTML file serves as a complete example for integrating the Klleon Chat SDK using vanilla JavaScript. It includes the necessary HTML structure, CSS for styling the chat interface, and JavaScript to initialize the SDK, render the avatar and chat components, and handle user interactions like sending messages and triggering avatar speech. Ensure you replace `{VERSION}`, `YOUR_SDK_KEY`, and `YOUR_AVATAR_ID` with your actual values.
```html
Klleon Chat SDK - Minimal Vanilla JS Example
Klleon Chat SDK - Method Test
```
--------------------------------
### Initialize Klleon Chat SDK with Options
Source: https://docs.klleon.io/en/docs/setup/getting-started
Initializes the Klleon Chat SDK with essential configuration parameters. Requires an SDK key and avatar ID. Optional parameters include subtitle and voice language codes, speech speed, microphone enablement, log level, custom ID, and user key for session management.
```javascript
await KlleonChat.init({
sdk_key: "YOUR_SDK_KEY",
avatar_id: "YOUR_AVATAR_ID",
subtitle_code: "en_us",
voice_code: "en_us",
voice_tts_speech_speed: 1.0,
enable_microphone: true,
log_level: "debug",
custom_id: "user123",
user_key: "USER_SESSION_KEY"
});
```
--------------------------------
### CSS Styles for Klleon Chat SDK React Example
Source: https://docs.klleon.io/en/docs/examples/react
Provides CSS styles for the React example using the Klleon Chat SDK. It defines styles for the main page layout, header, loading text, start chat button, and various components within the SDK container, including avatar and chat elements.
```css
.base-react-example-page { width: 100%; height: 100%; .header { margin-bottom: 30px; }
.loading-text { position: absolute;
font-size: 1.5em;
color: #555;
padding: 50px;
}
.start-chat-button { width: 150px;
height: 50px;
background-color: #3579CC;
color: #fff;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
}
.sdk-container { display: flex;
width: 100%;
height: 720px;
gap: 0px 24px;
.avatar-container { flex: 1;
}
.chat-control-container { display: flex;
flex-direction: column;
flex: 1;
gap: 24px 0px;
.chat-container { flex: 1;
border-radius: 24px;
}
.chat-echo-container { display: flex;
flex-direction: column;
.echo-input { width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
font-size: 16px;
margin-bottom: 10px;
}
.echo-button { width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
background-color: #3579CC;
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
&:disabled { background-color: #ccc;
color: #fff;
cursor: not-allowed;
}
}
}
}
}
}
```
--------------------------------
### Initialize Klleon Chat SDK in React
Source: https://docs.klleon.io/en/docs/setup/getting-started
This React component demonstrates how to initialize the Klleon Chat SDK using `window.KlleonChat.init()`. It includes registering event listeners for status and chat events before initialization. Ensure you replace 'YOUR_SDK_KEY' and 'YOUR_AVATAR_ID' with your actual credentials.
```javascript
import { useEffect } from "react";
function App() {
useEffect(() => {
const { KlleonChat } = window;
const init = async () => {
// 1. Register status event listener
KlleonChat.onStatusEvent((status) => {
// See 'Usage > Event Handling' for detailed Status values and meanings.
if (status === "VIDEO_CAN_PLAY") {
console.log("Avatar video ready!");
}
});
// 2. Register chat event listener
KlleonChat.onChatEvent((chatData) => {
// See 'Usage > Event Handling' for ChatData structure and chat_type details.
console.log("SDK Chat Event:", chatData);
});
// 3. Initialize SDK
await KlleonChat.init({
sdk_key: "YOUR_SDK_KEY",
avatar_id: "YOUR_AVATAR_ID",
// custom_id: "YOUR_CUSTOM_ID",
// user_key: "YOUR_USER_KEY",
// voice_code: "en_us",
// subtitle_code: "en_us",
// voice_tts_speech_speed: 1,
// enable_microphone: true,
// log_level: "debug",
});
};
init();
}, []);
return <>;
}
export default App;
```
--------------------------------
### HTML Structure for Klleon Chat SDK Integration
Source: https://docs.klleon.io/en/docs/setup/getting-started
Basic HTML structure for integrating the Klleon Chat SDK. It includes a script tag to load the SDK from a CDN and a div with the ID 'root' where the React application will be mounted. This setup is standard for web applications using external JavaScript libraries.
```html
Vite + React
```
--------------------------------
### React Example with Klleon Chat SDK Initialization (TypeScript)
Source: https://docs.klleon.io/en/docs/examples/react
Demonstrates how to initialize and use the Klleon Chat SDK within a React application using TypeScript. It includes setting up refs for custom elements, handling SDK status and chat events, and initializing the SDK with provided keys. Dependencies include React hooks and the Klleon Chat SDK.
```typescript
import { ChatData, Status } from "@site/src/types/global";
import { useEffect, useRef, useState, CSSProperties } from "react";
// TODO: Replace with your actual SDK key and Avatar ID
const SDK_KEY = "YOUR_SDK_KEY";
const AVATAR_ID = "YOUR_AVATAR_ID";
interface AvatarProps {
videoStyle?: CSSProperties;
volume?: number;
}
interface ChatProps {
delay?: number;
type?: "voice" | "text";
isShowCount?: boolean;
}
function App() {
const [echoText, setEchoText] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [isChatStarted, setIsChatStarted] = useState(false);
const avatarContainerRef = useRef(null);
const chatContainerRef = useRef(null);
useEffect(() => {
if (avatarContainerRef.current) {
avatarContainerRef.current.videoStyle = {
borderRadius: "24px",
objectFit: "cover",
};
avatarContainerRef.current.volume = 100;
}
if (chatContainerRef.current) {
chatContainerRef.current.delay = 10;
chatContainerRef.current.type = "text";
chatContainerRef.current.isShowCount = true;
console.log("chat-container props set via ref.");
}
}, []);
const startChat = async () => {
setIsChatStarted(true);
const KlleonChat = window.KlleonChat;
console.log("SDK detected. Attempting initialization...");
KlleonChat.onStatusEvent((status: Status) => {
console.log(`SDK Status Event: ${status}`);
setIsLoading(status !== "VIDEO_CAN_PLAY");
});
KlleonChat.onChatEvent((chatData: ChatData) => {
console.log("SDK Chat Event:", chatData);
});
try {
await KlleonChat.init({
sdk_key: SDK_KEY,
avatar_id: AVATAR_ID,
log_level: "debug",
});
console.log("SDK initialized successfully!");
} catch (error) {
console.error(
`SDK initialization failed: ${(error as Error).message || error}`
);
setIsLoading(false);
} finally {
setIsLoading(false);
}
};
const handleEcho = () => {
window.KlleonChat.echo(echoText);
setEchoText("");
};
return (
);
}
export default App;
```
--------------------------------
### SDK Initialization and Event Listener Setup (JavaScript)
Source: https://context7_llms
This JavaScript code snippet handles the initialization of the Klleon Chat SDK and sets up event listeners for various user interactions. It includes a try-catch block to manage potential errors during SDK initialization or event listener setup. Additionally, it registers a `beforeunload` event listener to ensure SDK resources are cleaned up when the page is closed.
```javascript
} 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();
}
});
```
--------------------------------
### Configure Avatar and Chat Components
Source: https://docs.klleon.io/en/docs/setup/getting-started
Configures properties for the avatar and chat components after SDK initialization. This includes setting video styles and volume for the avatar, and delay, type, and display count for the chat interface. These settings allow for UI customization.
```javascript
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;
}
```
--------------------------------
### CSS Styles for Klleon React Example
Source: https://context7_llms
This CSS defines the styling for the Klleon SDK integration in a React application. It includes styles for the main page layout, header, loading text, start chat button, and the SDK container which holds the avatar and chat components. Specific styles are applied to avatar and chat elements, as well as input and button elements for the echo functionality.
```css
.base-react-example-page {
width: 100%;
height: 100%;
.header {
margin-bottom: 30px;
}
.loading-text {
position: absolute;
font-size: 1.5em;
color: #555;
padding: 50px;
}
.start-chat-button {
width: 150px;
height: 50px;
background-color: #3579CC;
color: #fff;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
}
.sdk-container {
display: flex;
width: 100%;
height: 720px;
gap: 0px 24px;
.avatar-container {
flex: 1;
}
.chat-control-container {
display: flex;
flex-direction: column;
flex: 1;
gap: 24px 0px;
.chat-container {
flex: 1;
border-radius: 24px;
}
.chat-echo-container {
display: flex;
flex-direction: column;
.echo-input {
width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
font-size: 16px;
margin-bottom: 10px;
}
.echo-button {
width: 100%;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
background-color: #3579CC;
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
&:disabled {
background-color: #ccc;
color: #fff;
cursor: not-allowed;
}
}
}
}
}
}
```
--------------------------------
### Initialize and Use Klleon Chat SDK with Vanilla JS
Source: https://docs.klleon.io/en/docs/examples/vanilla-js
This snippet shows the complete process of initializing the Klleon Chat SDK, setting up event listeners for status and chat events, sending text messages, echoing text, and cleaning up resources on page unload. It requires the Klleon Chat SDK to be loaded via a script tag and assumes the presence of specific HTML elements for user interaction.
```javascript
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();
}
});
```
--------------------------------
### Start and End Speech-to-Text (JavaScript)
Source: https://docs.klleon.io/en/docs/usage/sdk-method
Implements voice input functionality by converting user speech to text and sending it to the avatar. It uses startStt() to begin recording and endStt() to stop, convert, and send the audio. Microphone permission is required and handled by the SDK's init() method.
```javascript
import { useRef } from "react";
const App = () => {
const recordButtonRef = useRef(null);
const isRecording = useRef(false);
const handleRecord = () => {
if (!isRecording.current && window.KlleonChat) {
window.KlleonChat.startStt();
isRecording.current = true;
// Update button text or UI to indicate recording
} else if (isRecording.current && window.KlleonChat) {
window.KlleonChat.endStt();
isRecording.current = false;
// Update button text or UI to indicate stopped recording
}
};
return (
);
};
export default App;
```
--------------------------------
### Register Klleon Chat SDK Event Listeners
Source: https://docs.klleon.io/en/docs/setup/getting-started
Sets up event listeners for Klleon Chat SDK status and chat events. The `onStatusEvent` callback provides information about the avatar's video playback readiness, while `onChatEvent` receives detailed chat data. These listeners are crucial for real-time interaction feedback.
```javascript
KlleonChat.onStatusEvent((status) => {
// See 'Usage > Event Handling' for detailed Status values and meanings.
if (status === "VIDEO_CAN_PLAY") {
console.log("Avatar video ready!");
}
});
KlleonChat.onChatEvent((chatData) => {
// See 'Usage > Event Handling' for ChatData structure and chat_type details.
console.log("SDK Chat Event:", chatData);
});
```
--------------------------------
### Set Chat Container Props in JavaScript
Source: https://context7_llms
Demonstrates how to dynamically set properties for the `` web component using plain JavaScript. This includes examples for styling and controlling the visibility of the character count.
```javascript
const element = document.querySelector('chat-container');
element.videoStyle = { borderRadius: "12px" };
element.isShowCount = true;
// To set to false:
element.isShowCount = false;
```
--------------------------------
### Handle Voice Input (STT) with Klleon Chat SDK
Source: https://docs.klleon.io/en/docs/examples/custom-react
Manages the start, end, and cancellation of Speech-to-Text (STT) functionality using the Klleon Chat SDK. It provides feedback on the status of these operations.
```javascript
const { KlleonChat } = window;
// ... inside sdkHandler object ...
startStt: () => {
KlleonChat.startStt();
setGuideText("Recording started. Please speak.");
},
endStt: () => {
KlleonChat.endStt();
setGuideText("Recording stopped.");
},
cancelStt: () => {
KlleonChat.cancelStt();
setGuideText("Recording canceled.");
}
```
--------------------------------
### KlleonChat.startStt / KlleonChat.endStt
Source: https://context7_llms
Manages voice input by starting and ending speech-to-text conversion. Requires microphone permission.
```APIDOC
## Voice Input (STT)
### `KlleonChat.startStt()`
#### Description
Begins collecting voice data through the microphone for speech-to-text conversion.
#### Method
POST
#### Endpoint
/klleonchat/startStt
### `KlleonChat.endStt()`
#### Description
Stops the ongoing voice data collection, converts the collected audio to text, and sends it as a message to the avatar.
#### Method
POST
#### Endpoint
/klleonchat/endStt
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
// To start recording:
window.KlleonChat.startStt();
// To stop recording and send:
window.KlleonChat.endStt();
```
### Response
#### Success Response (200)
(No specific success response details provided in the source text)
#### Response Example
(No specific response example provided in the source text)
```
--------------------------------
### Set Chat Container Props in HTML
Source: https://context7_llms
Illustrates how to set properties for the `` web component directly within HTML markup. It shows examples for boolean attributes like `is-show-count` and object-valued attributes like `video-style`.
```html
```
--------------------------------
### Apply Video Styles to Avatar Container (Multiple Frameworks)
Source: https://context7_llms
This snippet illustrates how to apply CSS styles to the internal video element of the avatar container using the `videoStyle` prop. Examples are provided for HTML, React, Vue, and Vanilla JavaScript, showing the different syntaxes for setting the `videoStyle` object to customize properties like `borderRadius` and `objectFit`.
```html
```
```typescript
ref.current.videoStyle = { borderRadius: '12px', objectFit: 'cover' }
```
```javascript
ref.value.videoStyle = { borderRadius: '12px', objectFit: 'cover' }
```
```javascript
element.videoStyle = { borderRadius: '12px', objectFit: 'cover' }
```
--------------------------------
### Add Klleon Chat SDK Script to React App
Source: https://docs.klleon.io/en/docs/examples/react
This snippet shows how to add the Klleon Chat SDK script to the `` section of your React application's `public/index.html` file. Ensure you replace `{VERSION}` with the actual SDK version. This is a prerequisite for using the SDK in your React project.
```html
{/* ... other meta tags and links ... */}
React + Klleon Chat SDK
{/* TODO: Replace {VERSION} with the actual SDK version (e.g., 1.2.0) */}
```
--------------------------------
### Initialize Docusaurus Theme from URL Parameters (JavaScript)
Source: https://docs.klleon.io/en/docs/changelog
This JavaScript code snippet initializes the Docusaurus theme based on URL search parameters. It iterates through URL entries, checks for parameters starting with 'docusaurus-data-', and sets corresponding data attributes on the document element. This allows for dynamic theme selection via URL.
```javascript
document.documentElement.setAttribute("data-theme","light"),document.documentElement.setAttribute("data-theme-choice","light"),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()
```
--------------------------------
### React Component for Klleon SDK Integration
Source: https://context7_llms
The `App.tsx` component sets up the Klleon SDK, handling initialization, status updates, and chat events. It uses `useState` and `useRef` hooks for managing component state and DOM element references. The component renders an avatar and a chat interface, with a button to start the chat and an input/button for sending echo messages.
```typescript
import { ChatData, Status } from "@site/src/types/global";
import { useEffect, useRef, useState, CSSProperties } from "react";
// TODO: Replace with your actual SDK key and Avatar ID
const SDK_KEY = "YOUR_SDK_KEY";
const AVATAR_ID = "YOUR_AVATAR_ID";
interface AvatarProps {
videoStyle?: CSSProperties;
volume?: number;
}
interface ChatProps {
delay?: number;
type?: "voice" | "text";
isShowCount?: boolean;
}
function App() {
const [echoText, setEchoText] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [isChatStarted, setIsChatStarted] = useState(false);
const avatarContainerRef = useRef(null);
const chatContainerRef = useRef(null);
useEffect(() => {
if (avatarContainerRef.current) {
avatarContainerRef.current.videoStyle = {
borderRadius: "24px",
objectFit: "cover",
};
avatarContainerRef.current.volume = 100;
}
if (chatContainerRef.current) {
chatContainerRef.current.delay = 10;
chatContainerRef.current.type = "text";
chatContainerRef.current.isShowCount = true;
console.log("chat-container props set via ref.");
}
}, []);
const startChat = async () => {
setIsChatStarted(true);
const KlleonChat = window.KlleonChat;
console.log("SDK detected. Attempting initialization...");
KlleonChat.onStatusEvent((status: Status) => {
console.log(`SDK Status Event: ${status}`);
setIsLoading(status !== "VIDEO_CAN_PLAY");
});
KlleonChat.onChatEvent((chatData: ChatData) => {
console.log("SDK Chat Event:", chatData);
});
try {
await KlleonChat.init({
sdk_key: SDK_KEY,
avatar_id: AVATAR_ID,
log_level: "debug",
});
console.log("SDK initialized successfully!");
} catch (error) {
console.error(
`SDK initialization failed: ${(error as Error).message || error}`
);
setIsLoading(false);
} finally {
setIsLoading(false);
}
};
const handleEcho = () => {
window.KlleonChat.echo(echoText);
setEchoText("");
};
return (
);
}
```
--------------------------------
### KlleonChat.init(options)
Source: https://context7_llms
Initializes the SDK and prepares the connection to the server. This method should be called once when the application loads.
```APIDOC
## KlleonChat.init(options)
### Description
Initializes the SDK and prepares the connection to the server. This method should be called once when the application loads.
### Method
`init`
### Parameters
#### Initialization Options (`options`)
- **sdk_key** (string) - Optional - SDK key issued by Klleon Studio
- **avatar_id** (string) - Optional - Unique ID of the avatar to be used
- **subtitle_code** (string) - Optional - Avatar speech subtitle language setting. Supported codes: `ko_kr` (Korean), `en_us` (English), `ja_jp` (Japanese), `id_id` (Indonesian), etc. (Default: `ko_kr`)
- **voice_code** (string) - Optional - Avatar speech voice language setting. (Default: `ko_kr`)
### Request Example
```json
{
"sdk_key": "YOUR_SDK_KEY",
"avatar_id": "YOUR_AVATAR_ID",
"subtitle_code": "en_us",
"voice_code": "en_us"
}
```
### Response
This method does not return a value, but it initializes the SDK for subsequent operations.
```
--------------------------------
### Destroy Klleon Chat SDK Instance
Source: https://docs.klleon.io/en/docs/setup/getting-started
Cleans up and destroys the Klleon Chat SDK instance when the component unmounts. This is essential for releasing resources and preventing memory leaks in single-page applications.
```javascript
return () => {
KlleonChat.destroy();
};
```
--------------------------------
### Initialize and Use Klleon Chat SDK in Vanilla JS
Source: https://context7_llms
This snippet demonstrates how to initialize the Klleon Chat SDK within a Vanilla JavaScript environment. It includes setting up event listeners for SDK status and chat events, initializing the SDK with provided keys, and handling user input for sending messages. Ensure the SDK script is correctly loaded and placeholder values are replaced.
```html
Klleon Chat SDK - Minimal Vanilla JS Example
Klleon Chat SDK - Method Test
```
--------------------------------
### KlleonChat.init() - SDK Initialization
Source: https://docs.klleon.io/en/docs/usage/sdk-method
Initializes the Klleon Chat SDK, establishing a connection to the server and configuring avatar and language settings. This method should be called once upon application load.
```APIDOC
## POST /klleonchat/init
### Description
Initializes the Klleon Chat SDK and prepares the connection to the server. This method should be called once when the application loads.
### Method
POST
### Endpoint
/klleonchat/init
### Parameters
#### Request Body
- **sdk_key** (string) - Required - SDK key issued by Klleon Studio
- **avatar_id** (string) - Optional - Unique ID of the avatar to be used
- **subtitle_code** (string) - Optional - Avatar speech subtitle language setting. Default: `ko_kr`. Supported codes: `ko_kr` (Korean), `en_us` (English), `ja_jp` (Japanese), `id_id` (Indonesian), etc.
- **voice_code** (string) - Optional - Avatar speech voice language setting.
- **voice_tts_speech_speed** (number) - Optional - Avatar speech speed control feature. Range: 0.5 ~ 2.0. Default: `1.0`.
- **enable_microphone** (boolean) - Optional - When set to `true`, attempts voice input without requesting microphone permission. Default: `true`.
- **log_level** (string) - Optional - Sets the detail level of SDK internal logs. Options: `debug`, `info`, `warn`, `error`, `silent`. Default: `debug`. Recommended for production: `silent`.
- **custom_id** (string) - Optional - Sets a custom device identifier or other user-defined identifier.
- **user_key** (string) - Optional - User session management key issued through Klleon Studio's End-User creation API.
### Request Example
```json
{
"sdk_key": "YOUR_SDK_KEY",
"avatar_id": "AVATAR_001",
"subtitle_code": "en_us",
"voice_code": "en_us",
"enable_microphone": true,
"log_level": "info"
}
```
### Response
#### Success Response (200)
- **status** (string) - Initialization status message.
- **message** (string) - Confirmation message.
#### Response Example
```json
{
"status": "success",
"message": "Klleon Chat SDK initialized successfully."
}
```
```
--------------------------------
### Initialize ChannelIO Plugin in JavaScript
Source: https://www.studio.klleon.io/
This JavaScript snippet demonstrates how to load and initialize the ChannelIO web plugin. It checks for duplicate script inclusions, creates a ChannelIO object, and dynamically inserts the plugin script into the DOM. The initialization occurs upon DOMContentLoaded or window load events.
```javascript
(function () {
var w = window;
if (w.ChannelIO) {
return w.console.error("ChannelIO script included twice.");
}
var ch = function () { ch.c(arguments); };
ch.q = [];
ch.c = function (args) {
ch.q.push(args);
};
w.ChannelIO = ch;
function l() {
if (w.ChannelIOInitialized) {
return;
}
w.ChannelIOInitialized = true;
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://cdn.channel.io/plugin/ch-plugin-web.js";
var x = document.getElementsByTagName("script")[0];
if (x.parentNode) {
x.parentNode.insertBefore(s, x);
}
}
if (document.readyState === "complete") {
l();
} else {
w.addEventListener("DOMContentLoaded", l);
w.addEventListener("load", l);
}
})();
ChannelIO("boot", {
pluginKey: "014e87b4-2f48-44b3-a139-9856726fff12",
});
```