> ## Documentation Index > Fetch the complete documentation index at: https://ai-kb.automationanywhere.com/llms.txt > Use this file to discover all available pages before exploring further. # EKB チャットボットをウェブサイトとアプリに統合 > 必要な場所ならどこでもシームレスに統合 EKB の会話型 AI チャットボットをデジタル エクスペリエンスに直接簡単に導入できます。 Web サイト、Next.js、React.js、Angular、WordPress のいずれに追加する場合でも、統合プロセスはシンプルで、既存の設定にシームレスに適合するように設計されています。このガイドでは、各オプションについて説明し、ユーザーが必要とする場所に、よりスマートな顧客エンゲージメントとリアルタイム サポートを提供できるように支援します。 ## ウェブサイトに統合する ウェブサイトの任意の場所にチャットボットを追加するには、以下の HTML スクリプトを使用して、チャットボットを「新しいウィンドウ」形式で追加し、AI 搭載のチャットボットでビジターの問い合わせをシームレスに処理できるようにウェブサイトを強化します。 このスクリプトを HTML コードに追加します。 必ず `Your_Project_ID_Here` をプロジェクトの ID に置き換えてください。 ```html theme={null}
``` ウェブサイトの右下にチャットボットをチャット バブルとして追加するには、以下の HTML スクリプトを使用します。これは、即座にサポートを提供し、ユーザーが EKB チャットボットと簡単に対話できるようにするのに最適です。 このスクリプトを HTML コードに追加します。 必ず `Your_Project_ID_Here` をプロジェクトの ID に置き換えてください。 ```html theme={null} ``` ## Next.js アプリに統合する EKB チャットボットを Next.js アプリにチャット ウィンドウとして統合するには、次の手順に従います。 1. 次のスクリプトを `rootLayout` または **アプリ ファイル**に配置します。 ```jsx theme={null} import Script from "next/script" export default function TalkToEKB() { return (

Talk to EKB Now

) } ``` 2. チャット ウィンドウを表示するコンポーネントに次の `
` タグを追加します。 ```html theme={null}
``` EKB チャットボットを Next.js アプリにチャット バブルとして統合するには、次の手順に従います。 1. 次のスクリプトを `rootLayout` または **アプリ ファイル**に配置します。 ```jsx theme={null} import Script from "next/script" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } ``` 2. 以前にチャットボットをチャット ウィンドウとして追加している場合は、チャット ウィジェットを使用する際に、以下の `
` タグを削除してください。 ```html theme={null}
``` ## React.js アプリに統合する 1. public フォルダ内の index.html ファイルの `` タグ内に、次のスクリプトを追加します。 ```html theme={null} ``` 2. チャット ウィンドウを表示するページまたはコンポーネントに、次の `
` タグを追加します。 ```jsx theme={null} import React from "react"; export default function Home() { return (
Card
New Season Arrivals
); }; ``` 1. public フォルダ内の index.html ファイルの `` タグ内に、次のスクリプトを追加します。 ```html theme={null} ``` 2. 以前にチャットボットをチャット ウィンドウとして追加している場合は、チャット ウィジェットを使用する際に、以下の `
` タグを削除してください。 ```html theme={null}
``` ## Angular プロジェクトに統合する 1. public フォルダ内の index.html ファイルに、次のスクリプトを追加します。 ```html theme={null} Angular ``` 2. チャット ウィンドウを表示するページまたはコンポーネントに、次の `
` タグを追加します。 ```html theme={null}

EKB Chatbot

Congratulations! Your app is running. 🎉

``` 1. public フォルダ内の index.html ファイルに、次のスクリプトを追加します。 ```html theme={null} Angular ``` 2. 以前にチャットボットをチャット ウィンドウとして追加している場合は、チャット ウィジェットを使用する際に、以下の `
` タグを削除してください。 ```html theme={null}
``` ## WordPress サイトに統合する WordPress サイトにチャットボットを追加するには、WordPress エディタの `Custom HTML` ブロックを使用して、以下の jQuery スクリプトをページに追加できます。 ```html theme={null} ``` WordPress サイトにチャットボットをチャット バブルとして追加するには、上記で説明した **チャット ウィンドウ** スクリプトを WordPress エディタの `Custom HTML` ブロックを使用してページに追加し、次に以下の CSS スクリプトを追加します。 ```css theme={null} .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 コードを追加する必要があります。