EKB 챗봇을 웹사이트 및 앱에 통합

EKB의 대화형 AI 챗봇을 디지털 경험에 직접 가져오세요. 웹사이트, Next.js, React.js, Angular 또는 WordPress에 추가하려는 경우 통합 프로세스는 간단하며 기존 설정에 원활하게 맞도록 설계되었습니다. 이 가이드는 각 옵션을 안내하여 사용자가 필요한 곳에서 더 스마트한 고객 참여와 실시간 지원을 제공할 수 있도록 돕습니다.

웹사이트에 통합

채팅 창

웹사이트 어딘가에 챗봇을 추가하려면 아래 HTML 스크립트를 사용하여 챗봇을 “새 창” 형식으로 추가하세요. AI 기반 챗봇으로 웹사이트를 강화하여 방문자 문의를 원활하게 처리할 수 있습니다. 이 스크립트를 HTML 코드에 추가하세요.

Your_Project_ID_Here를 프로젝트 ID로 교체하세요.

id="odin-chatbot"></div>

<script>
    window.project_id = "Your_Project_ID_Here";
    window.frame_type = "window";
</script>
<script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="window"
    defer
></script>

채팅 버블

웹사이트 하단 오른쪽에 챗봇을 채팅 버블로 추가하려면 아래 HTML 스크립트를 사용하세요. 즉각적인 지원을 제공하여 사용자가 EKB 챗봇과 쉽게 상호작용할 수 있게 합니다. 이 스크립트를 HTML 코드에 추가하세요.

Your_Project_ID_Here를 프로젝트 ID로 교체하세요.

    window.project_id = "Your_Project_ID_Here";
    window.frame_type = "widget";
</script>
<script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="widget"
    defer
></script>

Next.js 앱에 통합

채팅 창

EKB 챗봇을 Next.js 앱에 채팅 창으로 통합하려면 다음 지침을 따르세요:

다음 스크립트를 rootLayout 또는 App 파일에 배치하세요:

Script from

export default function TalkToEKB() {
    return (
        <div className="chatbot-talk py-10 lg:pb-20 lg:pt-[70px]">
            <div className="p-3 md:p-4">
                <h4 className="mb-12 text-center text-[24px] md:text-[54px]">
                    <span className="gradient-title">Talk to EKB Now</span>
                </h4>
                <div id="odin-chatbot"></div>
                <Script>
                    {`window.project_id = "Your_Project_ID_Here";
                    window.frame_type = "window";`}
                </Script>
                <Script
                    src="https://app.getodin.ai/loader.min.js"
                    project_id="Your_Project_ID_Here"
                    frame_type="window"
                    defer
                ></Script>
            </div>
        </div>
    )
}

채팅 창이 표시되려는 컴포넌트에 다음 <div> 태그를 추가하세요. <div id="odin-chatbot"></div>

채팅 버블

EKB 챗봇을 Next.js 앱에 채팅 버블로 통합하려면 다음 지침을 따르세요:

다음 스크립트를 rootLayout 또는 App 파일에 배치하세요:

Script from

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body>{children}</body>
            <Script>
                {`window.project_id = "Your_Project_ID_Here";
                    window.frame_type = "widget";`}
            </Script>
            <Script
                src="https://app.getodin.ai/loader.min.js"
                project_id="Your_Project_ID_Here"
                frame_type="widget"
                defer
            ></Script>
        </html>
    )
}

이전에 챗봇을 채팅 창으로 추가한 경우 채팅 위젯을 사용하는 동안 다음 <div> 태그를 제거하세요. <div id="odin-chatbot"></div>

React.js 앱에 통합

채팅 창

public 폴더에 있는 index.html 파일의 <head> 태그에 다음 스크립트를 추가하세요.

        window.project_id="Your_Project_ID_Here";
        window.frame_type="window";
    </script>
    <script
        src="https://app.getodin.ai/loader.min.js"
        project_id="Your_Project_ID_Here"
        frame_type="window"
        defer
    ></script>

채팅 창이 표시되려는 페이지 또는 컴포넌트에 다음 <div> 태그를 추가하세요.

React from "react";

export default function Home() {
    return (
        <div>
            <div className="card bg-dark text-white border-0 mx-3">
                <img
                    className="card-img img-fluid"
                    src="./assets/main.png.jpg"
                    alt="Card"
                    height={500}
                />
                <div className="card d-flex align-items-center">
                    <div className="container">
                        <h5 className="card-title">New Season Arrivals</h5>
                    </div>
                </div>
            </div>
            <div id="odin-chatbot"></div>
        </div>
    );
};

채팅 버블

public 폴더에 있는 index.html 파일의 <head> 태그에 다음 스크립트를 추가하세요.

    window.project_id="Your_Project_ID_Here";
    window.frame_type="window";
</script>
<script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="window"
    defer
></script>

이전에 챗봇을 채팅 창으로 추가한 경우 채팅 위젯을 사용하는 동안 다음 <div> 태그를 제거하세요. <div id="odin-chatbot"></div>

Angular 프로젝트에 통합

채팅 창

public 폴더에 있는 index.html 파일에 다음 스크립트를 추가하세요.

html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
    <script>
    window.project_id="Your_Project_ID_Here";
    window.frame_type="window";
    </script>
    <script
    src="https://app.getodin.ai/loader.min.js"
    project_id="Your_Project_ID_Here"
    frame_type="window"
    defer
    ></script>
</body>

채팅 창이 표시되려는 페이지 또는 컴포넌트에 다음 <div> 태그를 추가하세요.

class="contents">

    <div class="side">
        <img src="assets/logo.svg" width="200" height="200" />
        <h1>EKB Chatbot</h1>
        <p>Congratulations! Your app is running. 🎉</p>
    </div>
    <div id="odin-chatbot" style="width: 380px"></div>
</div>

채팅 버블

public 폴더에 있는 index.html 파일에 다음 스크립트를 추가하세요.

html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Angular</title><base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>
    <script>
        window.project_id="Your_Project_ID_Here";
        window.frame_type="widget";
    </script>
    <script
        src="https://app.getodin.ai/loader.min.js"
        project_id="Your_Project_ID_Here"
        frame_type="widget"
        defer>
    </script>
</body>

이전에 챗봇을 채팅 창으로 추가한 경우 채팅 위젯을 사용하는 동안 다음 <div> 태그를 제거하세요. <div id="odin-chatbot"></div>

WordPress 사이트에 통합

채팅 창

WordPress 사이트에 챗봇을 추가하려면 WordPress 편집기의 Custom HTML 블록을 사용하여 페이지에 다음 jQuery 스크립트를 추가할 수 있습니다:

    setTimeout(function() {
        var scriptContent = jQuery('#opbcb-odin-chatbot-root');

        if (scriptContent.length) {
            jQuery('#odin-chatbot').append(scriptContent);
        } else {
            console.log('Element not found: #opbcb-odin-chatbot-root');
        }
    }, 
    1000);
</script>

채팅 버블

WordPress 사이트에 챗봇을 채팅 버블로 추가하려면 WordPress 편집기의 Custom HTML 블록을 사용하여 위의 채팅 창 스크립트를 페이지에 추가한 다음 다음 CSS 스크립트를 추가하세요:

    border-radius: 20px;
    bottom: 90px;
    height: 88% !important;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    max-height: 750px;
    max-width: 450px;
    position: fixed;
    right: 5px;
    transition: all .3s ease;
    width: 100%;
    z-index: 999;
    top: 30px !important;
}

페이지의 푸터에 채팅 버블을 추가하려면 CSS 코드와 함께 푸터의 Custom HTML 블록에 먼저 스크립트를 추가해야 합니다.

Get Started!

Offerings

Chat

Agents

Knowledge Base

Workflows

Public Chatbot

Project Settings

My Account

Platform Admin

SDK

General Information

웹사이트에 통합

Next.js 앱에 통합

React.js 앱에 통합

Angular 프로젝트에 통합

WordPress 사이트에 통합

​웹사이트에 통합

​Next.js 앱에 통합

​React.js 앱에 통합

​Angular 프로젝트에 통합

​WordPress 사이트에 통합

웹사이트에 통합

Next.js 앱에 통합

React.js 앱에 통합

Angular 프로젝트에 통합

WordPress 사이트에 통합