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

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

웹사이트에 통합

채팅 창

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

경고

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

<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 파일에 배치하세요:

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 파일에 배치하세요:

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> 태그를 추가하세요.

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 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> 태그를 추가하세요.

    <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 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 블록에 먼저 스크립트를 추가해야 합니다.

웹사이트에 통합​

Next.js 앱에 통합​

React.js 앱에 통합​

Angular 프로젝트에 통합​

WordPress 사이트에 통합​

웹사이트에 통합

Next.js 앱에 통합

React.js 앱에 통합

Angular 프로젝트에 통합

WordPress 사이트에 통합