EKB チャットボットをウェブサイトとアプリに統合

EKB の会話型 AI チャットボットをデジタルエクスペリエンスに直接簡単に導入できます。 Web サイト、Next.js、React.js、Angular、WordPress のいずれに追加する場合でも、統合プロセスはシンプルで、既存の設定にシームレスに適合するように設計されています。このガイドでは、各オプションについて説明し、ユーザーが必要とする場所に、よりスマートな顧客エンゲージメントとリアルタイムサポートを提供できるように支援します。

ウェブサイトに統合する

チャットウィンドウ

ウェブサイトの任意の場所にチャットボットを追加するには、以下の HTML スクリプトを使用して、チャットボットを「新しいウィンドウ」形式で追加し、AI 搭載のチャットボットでビジターの問い合わせをシームレスに処理できるようにウェブサイトを強化します。このスクリプトを HTML コードに追加します。

警告

必ず Your_Project_ID_Here をプロジェクトの ID に置き換えてください。

<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>

チャットバブル

ウェブサイトの右下にチャットボットをチャットバブルとして追加するには、以下の HTML スクリプトを使用します。これは、即座にサポートを提供し、ユーザーが EKB チャットボットと簡単に対話できるようにするのに最適です。このスクリプトを HTML コードに追加します。

警告

必ず Your_Project_ID_Here をプロジェクトの ID に置き換えてください。

<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>

Next.js アプリに統合する

チャットウィンドウ

EKB チャットボットを Next.js アプリにチャットウィンドウとして統合するには、次の手順に従います。

次のスクリプトを rootLayout または アプリファイルに配置します。

import Script from "next/script"
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 または アプリファイルに配置します。

import Script from "next/script"
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> タグ内に、次のスクリプトを追加します。

<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> タグを追加します。

import 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> タグ内に、次のスクリプトを追加します。

<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 id="odin-chatbot"></div>
```

Angular プロジェクトに統合する

チャットウィンドウ

public フォルダ内の index.html ファイルに、次のスクリプトを追加します。

<!doctype 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="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 ファイルに、次のスクリプトを追加します。

<!doctype 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 スクリプトをページに追加できます。

<script>
    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 スクリプトを追加します。

.opbcb-chat-container {
    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;
}

注意

ページのフッターにチャットバブルを追加する場合は、まずフッターの Custom HTML ブロックにスクリプトと CSS コードを追加する必要があります。

ウェブサイトに統合する​

Next.js アプリに統合する​

React.js アプリに統合する​

Angular プロジェクトに統合する​

WordPress サイトに統合する​

ウェブサイトに統合する

Next.js アプリに統合する

React.js アプリに統合する

Angular プロジェクトに統合する

WordPress サイトに統合する