構成と処理の流れ
ブラウザーのローダー、コア、モジュール、チャットサーバー、アカウント、サーバーAPI、Webhook、顧客データがどのように連携するか、ページの表示から回答までの処理順序を説明します。
各構成要素
訪問者のブラウザー内：
- loader.js – 数キロバイトの小さな読み込み用の部分です。設定の読み取り、同意の確認、最終的な位置への仮のチャットボタンの描画（レイアウトのずれなし）、コマンドキュー付きの
window.ReactiveChatの作成を行います。それ以外の処理はしません。 - コア（
core.<hash>.js） – チャットウィンドウ、接続、個人データのマスク、ルールを処理します。ブラウザーがアイドル状態になる、マウスや指がチャットボタンに触れる、APIコマンドが呼ばれる、MousePlayerから不満のシグナルが届く、といういずれかのトリガーが発生するまで読み込みません。大半の訪問者はチャットを開かないため、コアもすぐには読み込みません。 - 必要時に読み込むモジュール – 製品ツアー、プライバシーのテキスト、ショップ機能などは、それぞれ必要になったときだけ読み込みます。
- 隔離 – すべてを閉じたshadow DOM内に配置します。スタイルにはconstructable stylesheetsを使い、インラインスクリプト、
eval、Cookieは使いません。
reactive.chat側：
- 配信：
https://cdn.reactive.chat/– ローダー、コア、モジュールを配信します。 - チャットサーバー：
wss://ws.reactive.chat/rc_wss/– プロトコルrc.v1のWebSocketです。同じアドレスのhttps://形式を、HTTPフォールバック、オフラインフォーム、アップロード、プライバシーのテキスト、Smart Answerに使用します。 - アカウント：
https://reactive.chat/app– プロジェクト設定、デザイン、ナレッジベース、チームのオペレーター画面です。 - サーバーAPI：
https://reactive.chat/v1/– バックエンド用のRESTとMCPです。
運営側（任意）：
- バックエンドは、ログイン済みユーザーの本人情報に署名し、顧客データのリクエストへの応答、Webhookの受信、サーバーAPIの呼び出しを行います。
- プロキシは、独自のサブドメインを通してすべてを配信します（独自ドメイン）。
ページ表示時の流れ
- ブラウザーが
loader.jsを非同期で読み込みます。他の処理をブロックしません。 - ローダーが
data-rc-*、ReactiveChatSettings、キューに入ったboot呼び出しを読み取り、サイトキーと同意を確認して仮のボタンを描画します。 - トリガーが発生すると、ローダーが同じディレクトリからコアを読み込みます。
- コアが仮のボタンとキューを引き継ぎ、キューのコマンドを順番に処理します。
- 接続を開き、サイトキー、ID、言語、同意、署名付きの本人情報（ある場合）、ページの状況情報を含む
initを送信します。 - サーバーがオリジン、プロジェクト、本人情報を確認し、
init_okで応答します。アカウントのデザインとテキスト、ルール、機能、上限、これまでの会話履歴が含まれます。 - ウィジェットの準備が完了します（
readyイベント）。シングルページアプリのページ変更は自動で通知します。
質問時の流れ
- 訪問者が入力すると、ブラウザー内で個人データをマスクし、メッセージに一意のIDを付けます。
- サーバーがメッセージを保存し（IDで重複を識別）、再度マスクして、エコーで受信を確認します。
- AIアシスタントがナレッジベースを検索し、確認済みユーザーの注文に関する質問では顧客データエンドポイントも検索して、回答をストリーミングします。チームに引き継ぐ条件は、アカウントで設定します（マニュアル）。
- 並行して、イベントをキュー経由でWebhookや連携先に送信します。チャットがこれらを待つことはありません。
バージョンと配信
- loader.jsの名前にはバージョン番号がなく、更新時に置き換わります。そのため、コピーではなく
cdn.reactive.chatから、またはプロキシ経由で埋め込んでください。 - コアの名前は
core.<hash>.jsです。ハッシュは内容に基づき、各ローダーは対応するコアを正確に把握しています。そのためローダーとコアは常に一致し、コアを長期間キャッシュできます。 - 設定（デザイン、テキスト、ルール、ツアー）は接続のたびにサーバーから取得します。アカウントの変更に新しいスニペットは不要です。短時間で反映されます（設定により最大1分）。
- プロトコルのバージョンは
1です。新しいフィールドは追加され、不明なフィールドは無視されます。 ReactiveChat.versionは、読み込み後のコアのバージョンを返します。
設定する場所
- アカウント： 外観、テキスト、ホーム画面、ルール、ツアー、A/Bテスト、AIのペルソナ（カスタマイズ）、チーム、ナレッジベース、チャネル（マニュアル）。
- scriptタグ： ページごとに適用する内容（scriptタグのリファレンス）。
- ページのスクリプト： 本人情報、状況情報、独自の要素からの起動（JavaScript API）。
- サーバー： 署名、顧客データ、Webhook、API（本人確認、顧客データ、Webhook、サーバーAPI）。
次：クイックスタート
最終更新: