チャットウィジェット

ウェブサイトチャットウィジェット統合ガイド

ウェブサイトにユーザーフレンドリーなチャットウィジェットを追加し、訪問者がサイトのインターフェースから直接コミュニケーションできるようにします。統合プロセスは簡単で、ウェブサイトに組み込みのメッセージング機能を提供します。

チャットウィジェットの作成と設定

アクセス方法:

左サイドバーの下部付近にある Settings（設定）をクリックします。（スマートフォンの場合は、まず上隅にあるメニューアイコン ☰ をタップしてサイドバーを開きます。）
設定の左側レールにある Channels（チャネル）の下の Channels をクリックします。
Website chat widget（ウェブサイトチャットウィジェット）カードを探します。
まだウィジェットを作成していない場合は、Connect（接続）をクリックして、表示名とウェルカムメッセージを設定して作成します。
作成後は、いつでも Manage（管理）をクリックして、完全な設定パネルを開くことができます。

保存した変更はライブウィジェットに自動的に適用されます。変更後にインストールコードを再貼り付けする必要はありません。

設定のすぐ隣にはライブプレビューがあります。これは、実際のウィジェットが動作しているサンプル Web ページで、色、位置、ロゴ、ランチャーアイコン、プロアクティブポップアップが訪問者に見える通りに表示されます。編集内容はリアルタイムで反映されるため、保存しなくても色やテーマの変更を確認できます。プレビュー内のチャットボタンをクリックしてウィジェットを開き、試してみることも可能です。

カスタマイズ可能な項目

管理パネルは4つのセクションで構成されています。

外観

スタイルテーマ: ワンクリックでウィジェット全体をスタイル変更できます。6つのテーマ（Classic：オリジナルのソリッドな外観。フラットなパネル上のカラーヘッダーバー、Glass：背後のページを柔らかくぼかす半透明のすりガラスパネル。ヘッダーとメッセージボックスが丸みを帯びたカードとして浮かび上がります、Midnight：Glassのダークカラー版、Bloom：ソフトピンクで丸みを強調、Ember：温かみのあるオレンジのGlass、Mono：白黒でシャープな角）が、外観、色、角の丸み、フォントを一括で設定します。テーマはあくまで出発点であり、選択後も個別に色や設定を調整可能です。新しいウィジェットはデフォルトでGlassが適用されます。テーマの切り替えはウィジェットが埋め込まれているすべての場所で即座に反映され、サイト側のコード変更は不要です。
角の丸みとフォント: 2つの独立したスタイル設定です。角の丸みはパネル、吹き出し、ボタンの角の丸み（Round、Soft、Sharp）を設定し、フォントは訪問者に表示される書体（Default、Serif、Rounded、Mono）を選択します。フォントは訪問者のデバイスにインストールされているものが使用されるため、サイトへの追加読み込みは発生しません。
表示名: ウィジェットのヘッダーに表示されます。
ロゴ: チャット上部に表示される画像をアップロードします。会社のロゴや親しみやすい顔写真を使用してください。
ランチャーアイコン: フローティングチャットボタン自体に表示されるアイコンです。組み込みアイコン（チャット吹き出し、紙飛行機、疑問符など）から選ぶか、アップロードしたロゴを再利用するか、独自の画像をアップロードできます。訪問者に挨拶するチームメンバーの写真を設定したい場合に便利です。
色: 5つの色設定があり、それぞれウィジェットの各パーツの色を指定します。ブランドカラーはフローティングボタン、ヘッダー、訪問者自身のメッセージの色で、その上に表示されるテキストにはブランドテキストが適用されます。ボットの吹き出しはボットの返信と入力インジケーターの背景色で、その中の文字やアニメーションする入力ドットにはボットの吹き出しテキストが適用されます。チャットウィンドウはすべてのメッセージの背後にあるパネルです。ボットの吹き出しの色は、ブランドカラーとは明確に異なる色を選択してください。両者が同じ色だと、会話の両側の色が同じになり、訪問者がボットの返信と自分のメッセージを区別できなくなります。ブランドカラーの横に、暗いテキストを配置したライトグレーのボットの吹き出しを組み合わせるのが安全です。
位置: フローティングチャットボタンを右下または左下の隅に配置します。ページ上の他の要素と重なる場合は、水平および垂直のオフセット（ピクセル単位）で調整できます。
スターター質問: チャット内に表示されるクイック返信の提案（クリック可能なチップ）です。訪問者は入力する代わりにワンタップで会話を開始できます（例：「価格はいくらですか？」や「サポートはありますか？」など、最大10個まで）。
フッターライン: メッセージボックスの下に表示できるオプションの短いテキスト行です（例：「Powered by Your Agency」）。デフォルトではオフになっており、オフの状態ではメッセージボックスの下には何も表示されません。オンにしてテキスト（最大40文字）を入力し、必要に応じて https:// で始まるリンクを追加できます。訪問者がそのテキストをクリックすると、新しいタブでページが開きます。代理店がクライアントのために作成したウィジェットに自社の名前を入れる際などに活用できます。

動作

開始メッセージ: 訪問者がチャットを開いたときに最初に表示されるメッセージです（例: 「何かお手伝いしましょうか？」）。
サウンド: チャットに新しいメッセージが届いたときにサウンドを再生します。
通知の許可を求める: ブラウザの通知を許可するよう訪問者に促すオプションです。これにより、タブを切り替えていても返信に気づくことができます。
プロアクティブなポップアップバブル: チャットボタンの横にポップアップ表示され、ユーザーを招待する小さなバブル（オプション）です。オンにすると、メッセージ、承諾/拒否ボタンのテキスト、表示までの待機秒数を設定できます。訪問者がクリックしない場合、バブルは20秒後に自動的に閉じます。これはチャットボタンの横に表示される唯一のテキストであり、ボタンの横に永続的なラベルを表示する設定はありません。
AIの応答速度: 低速（より人間らしく、AIが少し間を置いてから返信）から最高速度（よりロボットらしく、可能な限り速く返信）の間で調整できるスライダーです。「バランス」はその中間に位置します。返信の最初のメッセージはスライダーで設定した遅延時間後に届き、その少し前にタイピングインジケーターが表示されます。
AIの処理中に「処理中」のメモを表示する: デフォルトではオフです。返信に数秒以上かかる場合（例: エージェントが他のシステムで情報を検索している場合など）、訪問者にはタイピングのドットの横に短いメッセージが表示されます。5秒経過で「回答を作成中」、15秒経過で「情報を検索中」、それ以上かかる場合は「まだ調べています、もう少々お待ちください」と謝罪のメッセージが表示されます。迅速な返信の場合はドットのみが表示されます。このメッセージはウィジェットの言語設定に従い、AIが実際に返信を作成している間のみ表示されます。AIがそのチャットでオフになっている場合や、人間が対応を引き継いだ場合には表示されません。

言語

ウィジェットはそれ自体で多言語に対応しているため、有効にするための設定は不要です。

訪問者の言語を自動的に選択します。 まず、ページがHTML（<html lang="it">）で宣言している言語を確認し、次に訪問者のブラウザ言語をフォールバックとして使用します。どちらもサポート対象外の言語である場合、ウィジェット自体のラベルは、あなたが開始メッセージを作成した言語で表示され、開始メッセージ、ポップアップバブル、スタータークエスチョンは、あなたが作成した通りに表示されます。
挨拶と矛盾するページ言語は信頼されません。 一部のサイトビルダーは、サイトの言語に関係なく、すべてのページに lang="en" を配置します。ページが宣言する言語と、あなたが開始メッセージを作成した言語が異なる場合、ウィジェットはそのページ値をビルダーのデフォルトとして扱い、代わりに訪問者のブラウザ言語に従います。それもサポート対象外の言語であれば、あなたが作成した言語を使用します。訪問者がサイト上で言語を選択した際に lang 値を切り替えるページには、常に従います。これらに依存したくない場合は、[動作] セクションで言語を固定してください。
または、自分で選択することもできます。 [動作] セクションの ウィジェットの言語 フィールドはデフォルトで「自動」に設定されており、上記の検出が行われます。ここで言語を選択すると、ページやブラウザの設定に関わらず、ウィジェット自体のラベル（訪問者フォームの「名」、「メールアドレス」、「電話番号」フィールドとその入力例、プライバシー通知、ボタン）はその言語で固定されます。サイトビルダーが正しい言語を宣言していない場合や、すべての訪問者に対して言語を固定したい場合に使用してください。
サポートされている言語: 英語、オランダ語、ドイツ語、フランス語、スペイン語、イタリア語、ポルトガル語、ルーマニア語、ポーランド語、アラビア語、フィンランド語、フィリピン語、スロベニア語、タイ語、ベンガル語、日本語、ノルウェー語（ブークモール）、トルコ語。これはウィジェット自体のボタンとラベルのリストです。
右から左へ記述する言語は、右から左にレイアウトされます。 アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語の訪問者に対しては、チャットウィンドウ全体が反転します。ヘッダー、メッセージバブル、入力中のドット、訪問者フォーム、メッセージボックスはすべて右側から始まります。バブルボタンは選択した隅に留まります。ヘブライ語、ペルシャ語、ウルドゥー語の訪問者にはラベルが英語（または固定した言語）で表示されますが、レイアウトは言語に従います。アラビア語のチャットでの英語の返信など、異なる方向に書かれたメッセージも、正しい順序で読み取れます。
メッセージは自動的に翻訳されます。 保存するたびに、開始メッセージ、プロアクティブなポップアップバブル、スタータークエスチョンが、上記の18言語すべてに翻訳されます。メッセージは、どの言語であっても一度作成するだけで済みます。作成した言語はテキスト自体から認識され、そのバージョンはそのまま保持され、他のすべての言語はその翻訳となります。アカウントがどの言語に設定されているかは関係ありません。
言語ごとに独自のバージョンを作成できます。 [管理] パネルの [動作] のすぐ下にある [翻訳] セクションでは、自動翻訳を独自の表現に置き換えることができます。例えば、自動翻訳がカジュアルなスペイン語の場合に、フォーマルなスペイン語（「usted」）を使用するなどです。言語で言語を選択し、開始メッセージ、ポップアップメッセージ、ポップアップの 承諾テキスト と 拒否テキスト（ポップアップバブルが表示されている間に表示）、および スタータークエスチョン を入力します。各フィールドには自動翻訳がグレーで表示されます。自動翻訳から開始 をクリックすると、その内容がコピーされ、編集を開始できます。空欄のままにした項目は、自動翻訳が維持されます。自分で作成した言語はリストの先頭に表示され、独自の表現 とマークされます。（言語）の独自の表現を削除 をクリックすると、その言語の自動翻訳に戻ります。独自の表現は、元のテキストを後で編集しても保持されます。再生成されるのは自動翻訳のみです。
ポップアップボタンも翻訳されます。 プロアクティブなポップアップバブルの「承諾」および「拒否」ボタンも他のメッセージと一緒に翻訳されるため、スペイン語の訪問者に英語のボタンが表示されることはありません。
各メッセージは1つの言語のみで作成してください。 同じフィールドに2つの言語（例えば英語の行とイタリア語の行）を入力すると、全体が1つのメッセージとして扱われ、そのまま翻訳されるため、イタリア語の訪問者は同じ文章を2回見ることになります。どの言語であっても、一度だけ作成してください。
AIは訪問者の言語で返信します。 訪問者がどの言語で入力しても、ウィジェットのラベルが表示されている言語に関係なく、エージェントは同じ言語で回答します。常に特定の言語で回答させたい場合は、エージェントの指示でそのように指定してください。
埋め込みコードでページごとに言語を設定します。 英語サイトと、その翻訳版サイトで同じウィジェットを運用していますか？各ページのウィジェットのスクリプトタグに data-lang を追加してください。data-lang="es" は、ブラウザの設定に関わらず、そのページでウィジェットをスペイン語で表示します。data-lang="page" は、ページ自身の <html lang="..."> 値に従うようにします（したがって lang="es-MX" はスペイン語になります）。これは、開始メッセージが別の言語で書かれている場合でも有効です。この設定は ウィジェットの言語 フィールドよりも優先され、さらにそのフィールドは自動検出よりも優先されます。例:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>

[管理] パネルの埋め込みコードはそのままにして、data-lang 属性のみを追加してください。インラインチャットパネルの場合は、<div data-chat-widget="…"> に data-lang を配置してください。

ヒント: ウェブサイトの <html> タグに lang 属性が設定されていない場合は、追加してください。これは、特に海外から閲覧している訪問者に対して適切な言語を選択するための最も強力なシグナルとなります。

リード獲得とプライバシー

訪問者情報の収集: デフォルトではオフです。オンにすると、会話を開始する前に訪問者の名前とメールアドレス（およびオプションで電話番号）の入力を求めます。これにより、チャットの途中で離脱された場合でもリード情報を取得できます。
フォームのタイトルおよびフォームのサブタイトル: フォームの上に表示される見出しと短い説明文をカスタマイズします。
電話番号の収集: オンにすると電話番号の入力も求めます。オフの場合は名前とメールアドレスのみを収集します。
姓の収集: デフォルトではオフです。オンにすると、名（First name）の直後に必須の**姓（Last name）**フィールドが追加されます。これは連絡先の姓として保存されるため、AIやAIが自身のシステムで検索する際に、最初のメッセージからフルネームを利用できます。この設定を有効にする前にフォームに入力済みの訪問者に対しては、再度入力を求めることはありません。
訪問者への未読返信メール: メールアドレスを残した訪問者が、15分経過しても返信を確認していない場合、チャットに戻るよう促すメールが送信されます。この設定は「設定」→「通知」→「チャットウィジェットの訪問者」からオフにできます。チャットウィジェットの訪問者へのメールを参照してください。

訪問者が電話番号を残してサイトから離脱してしまいました。WhatsAppで会話を続けることはできますか？ はい、可能です。チャットを開き、3点メニューから WhatsAppで続ける を選択してください（WhatsApp WebまたはWhatsApp Businessが接続されている必要があります）。Your AI Connector は、同一人物のWhatsApp会話をリンクし、名前、メールアドレス、詳細情報をコピーします。また、AIがサイト上での会話内容を引き継ぐため、同じことを繰り返す必要はありません。ウェブサイト上のチャットはそのまま残り、両方のチャットは連絡先パネルの リンクされた会話 で相互に参照されます。チャットインターフェースを参照してください。

訪問者がメールアドレスを残したまま予約に至らなかった場合、メールでフォローアップできますか？ はい、オートメーションを使用すれば可能です。連絡先の作成ステップでチャネルをメールに設定すると、訪問者が残したアドレスが接続済みのメールチャネル上のメール連絡先として登録されます。その後にメッセージの送信ステップを追加することでメールが送信され、返信はメールエージェントのチャットに届きます。予約完了後にシーケンスを停止する方法を含む完全なレシピについては、オートメーション → 例：ウェブサイトチャットリード向けのメールフォローアップをご覧ください。

AIエージェントからWhatsAppへの切り替えを提案させることはできますか？ はい、特別な機能は不要で、エージェントの指示に1行追加するだけで可能です。「こんにちは、ウェブサイトでチャットしていましたが、こちらで続きを話したいです」といった事前入力メッセージを含むWhatsApp番号用のショートリンクを作成し、エージェントに送信タイミングを指示します（例：「訪問者が離脱する必要がある場合、後で続きを話したい場合、またはWhatsAppを希望する場合は、そこで会話を続けるよう提案し、このリンクを送信してください：（ショートリンク）」）。ウィジェット内のリンクはタップ可能であるため、訪問者はあなたの番号が選択され、メッセージが事前入力された状態でWhatsAppに移動します。訪問者が最初のメッセージを送信すると、受信トレイでWhatsAppの会話が開始されます。訪問者がウィジェットフォームで（国番号付きの）電話番号を入力していた場合、Your AI Connector は自動的に2つの会話をリンクし、WhatsApp上のAIは WhatsAppで続ける と同様にウェブサイトでのチャット内容を把握します。電話番号が収集されなかった場合、2つのチャットはリンクされないため、WhatsAppのエージェントが相手の経緯を把握できるよう、事前入力メッセージを具体的にしておくことをお勧めします。

プライバシーポリシーの同意を必須にする: 訪問者がチャットを開始する前にプライバシーポリシーへの同意を求める設定や、リンク先のURLを設定できます。

ウィジェットは訪問者のブラウザに何を保存しますか？また、クッキーバナーの背後に配置する必要がありますか？ ページを読み込むだけでは何も保存されません。訪問者がチャットを開始する（最初のメッセージを送信する、訪問者情報フォームに入力する、またはプライバシーポリシーに同意する）まで、ウィジェットはクッキーやブラウザストレージへの書き込みを行いません。その時点から、訪問者が戻ってきたときにもチャットが継続できるよう、ランダムな会話IDと会話のコピーがファーストパーティストレージとして訪問者のドメインに保存されます。分析スクリプトやトラッキングスクリプトは読み込まれず、サードパーティクッキーも設定されません。訪問者がチャットを希望するまで何も書き込まれないため、これは訪問者が要求したサービスに厳密に必要なストレージとみなされ、同意バナーの背後に配置することなく読み込むことが可能です。もしサイトで同意管理ツールを既に使用している場合は、ウィジェットをその背後に配置しても問題ありません。その場合、訪問者が同意した時点でチャットが表示されるようになります。

チャネルと埋め込み

添付ボタン: 訪問者がチャットで画像やファイルを送信できるようにします。
絵文字ピッカー: メッセージボックスの横に絵文字ピッカーを追加します。
チャネルリンク: WhatsApp、Instagram、またはMessengerのリンクを任意で含めることで、訪問者が好みのプラットフォームで会話を継続できるようにします。これは、WhatsApp番号（WhatsApp BusinessまたはWhatsApp Web）、Instagram、またはMessengerを接続した後にのみ表示されます。WhatsAppリンクをオンにすると、接続済みの番号が自動入力されます。リンクは編集可能なため、番号を変更した後に新しい番号を入力できます。
アクションボタン: チャットの上部に表示されるショートカットの列で、会話を開始するのではなく、訪問者を別の場所へ誘導します。以下のアクションボタンを参照してください。
ドメインホワイトリスト: ウィジェットの埋め込みを許可するWebサイトを制限します。インストール先のドメイン（例: example.com や *.example.com）を追加してください。空欄にすると、すべてのドメインが許可されます。
ブロックされた国: サービスを提供していない国の訪問者に対してウィジェットを表示しないようにします。選択した国のネットワークからアクセスしている訪問者にはウィジェットが表示されず、チャットを開始しようとしても拒否されます。空欄にすると、すべての国が許可されます。以下のボットやクレジット消費を防ぐを参照してください。
チャットのルーティング先: コピーするコードから発生するチャットを担当するエージェントを選択します。通常のチャットウィジェットのルーティングを使用する場合は、アカウントのデフォルトのままにしてください。以下のページごとに異なるエージェントに割り当てるを参照してください。
埋め込みスニペット: フローティングバブルまたはインラインを選択し、インストールコードをコピーします（下記参照）。
クライアントデモリンク: Webサイトのアドレスを貼り付けてリンクを作成をクリックすると、相手側で何もインストールすることなく、ウィジェットが動作している状態でそのサイトを開く共有可能なリンクを取得できます。作成したリンクはすべて一覧表示され、それぞれ個別に無効化できます。以下の他人のWebサイトでウィジェットを表示するを参照してください。
共有リンク: Webサイトを必要とせず、フルスクリーンで専用ページとしてアシスタントを開くための準備済みリンクです。コピーしてどこにでも送信できます。以下のチャットへの直接リンクを共有するを参照してください。

パネルの下部にある Delete chat widget（チャットウィジェットを削除） アクションを実行すると、ウェブサイトからウィジェットが即座に削除されます。これは元に戻すことができず、訪問者はチャットバブルを見ることができなくなります。

アクションボタン

チャットをしたくない訪問者もいます。電話番号、住所、メールアドレスをワンタップで知りたいというニーズに応えるのが、チャットパネル上部に配置されるショートカットの列「アクションボタン」です。

最大6つまで追加できます。それぞれにラベル（ボタン上のテキスト）と宛先があり、宛先は選択したアクションによって異なります。

アクション	訪問者の動作	入力内容
電話	電話アプリが開き、番号が入力された状態になります	電話番号（例: `+1 555 123 4567`）
SMS	メッセージアプリが開き、新規テキスト作成画面になります	電話番号
WhatsApp	WhatsAppが開き、チャットが開始されます	WhatsApp番号、または既にお持ちの `wa.me` リンク
メール	メールアプリが開き、新規メール作成画面になります	メールアドレス
道順	Googleマップが開き、指定した場所が表示されます	住所、または既にお持ちのマップリンク
リンク	新しいタブでページが開きます	`https://` で始まる完全なウェブアドレス

これらのボタンの使用にクレジットは消費されません。 ボタンをタップしてもメッセージは送信されず、会話も開始されません。単に訪問者を指定の場所へ誘導するだけです。クレジットが消費されるのは、これまで通りAIエージェントとの実際の会話のみです。

知っておくべきいくつかの点：

ボタンは訪問者がチャットしている間も表示され続けます。 質問を2つした後でも、ページを再読み込みすることなく「道順」をタップできます。
ラベルは入力した通りに表示されます。 開始メッセージやスタータークエスチョンとは異なり、ボタンのラベルは自動翻訳されません。そのため、複数の言語で訪問者に対応する場合は、ラベルを短く分かりやすくするか、メインの言語で記述してください。
正しく入力しないと保存されません。 電話番号、メールアドレス、リンクが無効な場合、パネルにその旨が表示され、サイト上で機能しないボタンが公開されないよう「変更を保存」がブロックされます。
FAQの回答ではありません。 アクションボタンは訪問者を別の場所へ誘導するだけで、定型文で返信するものではありません。質問への回答はAIエージェントの役割であり、ナレッジベースに基づいて回答します。質問を促したい場合は、「外観」設定にあるスタータークエスチョンを使用してください。

カスタマイズできないこと

「管理」パネルにあるオプションがすべてです。特に以下の点はカスタマイズできません。

カスタムCSSやスタイルシートは使用できません。 スタイル設定は、テーマ、コーナー、フォント、カラーピッカーで提供されるものに限られます。ウィジェットに独自のCSSを挿入することはできず、ページ上のルールもウィジェット内部には適用されません。
メッセージボックス内のカスタムプレースホルダーテキストは使用できません。
チャット内での動画の埋め込みはできません。

これらが導入の妨げとなる場合は、インライン埋め込みを使用することで最大限の制御が可能になります。ウィジェットは自身のページ内のコンテナに配置され、サイズや位置を自分で調整できます。

ボットやクレジットの浪費を防ぐ

AIの返信にはすべてクレジットが消費されるため、スクリプト（または暇な人物）がウェブサイト上で次々とチャットを開始することは、公開ウィジェットが防御しなければならない唯一の脅威です。ウィジェットはこれのほとんどを自動的に処理しますが、管理パネルにある2つの設定により、サイトに合わせて制限を強化できます。

ドメインホワイトリスト。 リストに登録したウェブサイトでのみウィジェットを表示できます。埋め込みコードを別のサイトにコピーしても、何も表示されません。
ブロックされた国。 ブロックした国のネットワークからアクセスしている訪問者にはウィジェットは表示されず、チャットを開始しようとしても拒否されます。場所は訪問者の接続元から判断されます。VPNを使用している場合はVPNの国として認識され、場所を特定できない訪問者はブロックされずに許可されます。アプリ内のプレビュー機能は、あなたが現在いる国をブロックしていても引き続き動作します。
接続ごとの新規会話数。 1つの接続（実際には1つの家庭やオフィスのIPアドレス）につき、ウィジェットで1日20件まで新規会話を開始できます。既存のチャットを継続するリピーターはカウントされず、完全に新しい会話のみが対象となるため、AIの回答を不正に取得しようとするスクリプトは20件で停止しますが、実際の訪問者が影響を受けることはありません。サイトで多くの人が1つの接続を共有している場合（キャンパスやコールセンターなど）、REST APIを使用して max_new_chats_per_ip_daily で数値を引き上げてください。0 を指定するとチェックが無効になります。
人間によるチェック（オプション）。 訪問者が最初のメッセージを送信する前に、Cloudflare Turnstileによる簡単なチェックが行われるため、スクリプトによるチャット開始を完全に防ぐことができます。ほとんどのユーザーは何もクリックする必要はありません。Cloudflareは確信が持てない場合にのみチェックボックスを表示します。これにはお客様自身の無料のTurnstileキーを使用します。以下の人間によるチェックを追加するを参照してください。
組み込みの制限。 さらに、各ブラウザセッションには1分間および1日あたりのメッセージ送信数に上限が設けられています。また、チャットに応答するエージェントは、応答制限で設定されたチャットあたりの最大AIメッセージ数に達すると、訪問者への返信を停止します。

これらはデバイスや個人を特定するものではありません。ウィジェットは、訪問者がチャットを選択するまでブラウザに何も保存せず（上記参照）、フィンガープリントも行いません。

人間によるチェックを追加する（Cloudflare Turnstile）

ボットがウェブサイトでチャットを開始し続け、上記の設定では不十分な場合にこれを有効にしてください。このチェックは、訪問者が最初のメッセージを送信する直前に1回だけ実行されます。チェックを通過した訪問者は、その後24時間は再度表示されることなくチャットを継続でき、以前の会話に戻ったユーザーもチェックの前に会話を読むことができます。

Cloudflareアカウントにサインインし（無料アカウントで十分です）、Turnstileを開きます。
Add widgetをクリックし、名前を付け、チャットウィジェットを実行するすべてのドメインを追加します（例: yourshop.com）。ウィジェットモードは Managed のままにします。
Cloudflareが表示する Site key と Secret key をコピーします。
アプリ内でチャットウィジェットの Manage パネルを開き、Human check before chatting をオンにして、両方のキーを貼り付けて保存します。

期待される動作:

両方のキーが入力されるまでチェックはオフのままなので、キーなしでオンにしても訪問者が締め出されることはありません。
訪問者がチェックに失敗した場合、または未解決のままにした場合、メッセージは送信されず、再試行ボタンが表示されます。
チェックはCloudflareに追加したドメインでのみ表示されます。他のドメインではCloudflareが拒否するため、そのサイト上の誰もメッセージを送信できなくなります。そのため、オンにする前にすべてのドメインを追加してください。
ウェブサイトでコンテンツセキュリティポリシー（CSP）を使用している場合は、スクリプトとフレームに対して https://challenges.cloudflare.com を許可してください。許可しないとチェックが読み込まれません。
キーはお客様自身のCloudflareアカウントのものであり、シークレットキーが訪問者のブラウザに送信されることはありません。

インストール手順

チャットウィジェットをウェブサイトに追加するには、サイトのHTMLに1行のコードを追加します。

テキストエディタでウェブサイトのHTMLファイルを開きます。
閉じタグ </body> を探します。通常はファイルの最後の方にあります。
ページの他の要素が先に読み込まれるよう、このコード行を </body> タグの直前に貼り付けます。

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

CONFIG_ID を、管理パネルの Channels & Embed セクションに表示されている固有の設定識別子に置き換えます。この識別子はアカウント固有のもので、ウィジェットとメッセージングシステムを接続します。

このスニペットがサイトの速度を低下させることはありません。非常に小さなローダーであり、ウィジェット自体はページをブロックすることなくバックグラウンドでダウンロードされます。それでもページが完全に読み込まれるまでウィジェットの読み込みを待機させたい場合は、代わりに同じURLを次のようにラップすることができます。

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

ウィジェットの読み込みではなく、小さな招待バブルの表示を遅らせたい場合は、上記の「動作」セクションにあるプロアクティブなポップアップバブルの遅延設定を使用してください。コードは不要です。

Shopifyへのインストール

Shopifyの管理画面で、オンラインストア > テーマに移動します。
現在（公開中）のテーマとしてマークされているテーマの … ボタンをクリックし、コードを編集を選択します。ドラフトやテーマのコピーを編集しても、公開中のストアには何も影響しません。
layout/theme.liquid を開き、下部近くにある終了タグ </body> までスクロールします。
インストール行を </body> のすぐ上に貼り付け、保存をクリックします：

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

インストール行に defer が含まれる前にウィジェットをインストールした場合、Shopifyのコードエディタでその部分に赤い下線が表示されます。この下線は、defer や async がないスクリプト行に対するShopifyのコードチェッカーからの警告であり、エラーではありません。テーマは問題なく保存され、ウィジェットも正常に動作します。上記のように defer を追加すると下線は消えますが、ウィジェットの動作には何の変化もないため、他のサイトで再インストールする必要はありません。

チャットウィジェットを実装したHTMLファイルがどのようになるかの完全な例を以下に示します：

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
</body>
</html>

ページへのインライン埋め込み（高度な設定）

チャットを隅に浮かぶバブルとしてではなく、ページの一部（「お問い合わせ」セクション、ヘルプタブ、サイドバーなど）として表示したい場合は、管理パネルで Embed snippet を Inline に切り替え、インラインスニペットをコピーしてください。

以下のようになります：

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

<div> はマウントポイントです。チャットパネルはこの内部でレンダリングされ、その寸法に合わせて表示されます。divのスタイルは自由に変更可能です（固定の高さを指定する、flexコンテナ内に配置する、グリッドセルに配置するなど）。チャットパネルはそれに追従します。

複数のチャットウィジェットを埋め込む場合でも、ページ上に必要な <script> タグは 1つだけです。スクリプトがページ内のすべての <div data-chat-widget="…"> をスキャンし、それぞれにチャットパネルをマウントします。

インライン埋め込みとフローティングの使い分け：

フローティングバブル は、サイト全体で常に利用可能な「ヘルプが必要ですか？」ボタンに適しています。
インライン埋め込み は、サポートページ、ナレッジベースのサイドバー、アプリ内のヘルプタブなど、チャットを特定の場所に配置し、そのページの一部として自然に表示させたい場合に適しています。

インライン埋め込みは、フローティングバブルと同じ設定（ロゴ、開始メッセージ、リード獲得、スターター質問など）を再利用するため、二重に設定する必要はありません。

他人のWebサイトでウィジェットを表示する

管理権限のないWebサイト上でも、コードやサイトへのアクセス権なしでチャットウィジェットを表示できます。見込み客に、彼ら自身のページでアシスタントがどのように見えるかを提示する最も迅速な方法です。

[管理] パネルを開き、チャネルと埋め込みまでスクロールします。
クライアントデモリンクに、Webサイトのアドレスを入力します（例: www.theircompany.com）。
オプション: フィールドの下で、このデモで対応するエージェントを選択します。例えば、見込み客自身のWebサイトから構築したエージェントを選択すれば、そのサービス、価格、FAQについて回答させることができます。通常のチャットウィジェットのルーティングを使用する場合は、アカウントのデフォルトのままにします。
リンクを作成をクリックします。リンクがコピーされ、フィールドの下のリストに表示されます。リストにはコピーボタンと開くボタン、および使用されているエージェントが表示されます。
リンクを共有したい相手に送信します。

リンクを開くと、そのWebサイトが読み込まれ、チャットウィジェットが上に浮かんだ状態で表示されます。インストールした場合と全く同じ見た目になります。リンクを知っている人なら誰でも開くことができ、ログインは不要です。

知っておくべきいくつかの点：

デモからのチャットは本物です。 訪問者がデモで送信したメッセージは受信トレイに届き、エージェントが回答します。また、他の会話と同様にクレジットを消費します。
ページはノーブランドです。 相手のWebサイトとあなたのウィジェットのみが表示され、それ以外の要素は表示されません。
フレーム化できないWebサイトもあります。 一部のサイト（銀行、大手小売店、厳格なセキュリティ設定が施されたサイトなど）は、他のページでの表示をブロックしています。その場合でもリンクは機能します。実際のサイトの代わりに中立的なモックブラウザウィンドウが表示され、その上にウィジェットがライブで表示されるため、デモとしての役割は果たせます。
相手のWebサイトは変更されません。 何もインストールされず、何も変更されません。デモはそのリンク内でのみ存在します。
デモ終了後はリンクを無効にしてください。 リスト内のリンクの横にある「無効にする」をクリックして確定します。それ以降、そのリンクを開いた人にはリンクが無効になった旨が表示されます。あなたのウィジェットや他のデモリンクは引き続き機能します。一度無効にしたリンクを再度有効にすることはできません。新しいリンクを作成してください。
2026年9月25日より前にコピーされたリンクについて。 リストが存在する前に作成されたデモリンクはリストに含まれません。これらはリストの下にある「それらを無効にする」をクリックするまで機能し続けます（クリックするとすべて一括で無効になり、「それらを有効にする」で元に戻せます）。

エージェントを指定せずに作成されたデモリンクは、チャットのルーティング先の設定に関係なく、アカウントのデフォルトルーティングを使用します。エージェントを選択すると、そのリンクからのすべてのチャットがそのエージェントに割り当てられ、そのエージェントによって回答されます。ウィジェットは独自の見た目、名前、開始メッセージを保持します。リンクには&agent=AGENT_IDとして含まれます。古いリンクに手動で追加することも可能です（リンクにはすでに?が含まれているため、?ではなく&を使用してください）。

デモリンクで使用しているエージェントを後から削除しても、そのリンクは引き続き機能します。その場合、チャットはアカウントのデフォルトルーティングに送信され、リストにはその横に「削除されたエージェント、デフォルトを使用」と表示されます。チャットウィジェットのデフォルトに設定されているエージェントを削除しても、他のエージェントに固定されたリンクには影響しません。

チャットへの直接リンクを共有する

ウィジェットを設置するWebサイトがない場合でも、リンクを渡すだけで相手がすぐにアシスタントと会話できるようにしたいことがあります。すべてのチャットウィジェットには、専用のリンクが用意されています。

管理パネルを開き、チャネルと埋め込みまでスクロールします。
共有リンクを見つけます（クライアントデモリンクのすぐ下にあります）。
コピーをクリックしてリンクを取得するか、開くをクリックして自分で試してみてください。

リンクを開くと、背後にWebサイトはなく、クリックすべきバブルもなく、インストールも不要で、アシスタントが画面全体に表示されます。Instagramのプロフィール、チラシのQRコード、メールの署名、または見込み客へのWhatsAppメッセージなどに活用してください。

共有リンクは、チャットウィジェットのデフォルトのルーティングに従います。特定のエージェントで開くには、リンクの末尾に?agent=AGENT_IDを追加してください。そのリンクからのすべてのチャットがそのエージェントに割り当てられ、そのエージェントによって回答されます。その際、ページはウィジェットの名前と開始メッセージを保持します。

知っておくべきいくつかの点：

リンク経由のチャットは本物です。 受信トレイに届き、エージェントが回答し、他の会話と同様にクレジットを消費します。
ページには当社のブランドロゴは表示されません。 アシスタントのみが表示され、検索結果には表示されないようになっています。
独自のアドレスで動作します。 プロバイダーが独自のドメインでアプリを運用している場合、リンクにもそのアドレスが使用されるため、見慣れないURLが表示されることはありません。
リンク1つにつき、ブラウザごとに1人の訪問者。 リンクを開いた人はそのブラウザ内で同一のIDを保持するため、後で戻ってきた場合も新しい訪問者としてではなく、同じ会話が継続されます。別のブラウザや別のウィジェットのリンクを使用した場合は、別の訪問者として扱われます。

ページごとに異なるエージェントに送信する

デフォルトでは、ウィジェット経由で送信されるすべてのチャットは同じエージェントによって処理されます。これをページごとに上書きすることで、価格ページにいる訪問者は営業担当エージェントと、ヘルプページにいる訪問者はサポート担当エージェントと、すべて1つのチャットウィジェットから会話できるように設定できます。

コードを取得するには2つの方法があります。

エージェントから: AIエージェントページで、該当行の </> ボタンをクリックするか、エージェントを開いてエントリーポイントタブに移動します。いずれの方法でも、そのエージェントに向けられた貼り付け可能なスニペットを取得できます。

エージェントのエントリーポイントタブには、そのエージェントが現在処理しているWebサイトチャットの数を示すWebサイトチャットウィジェットパネルもあります。埋め込みからのチャットは直接エージェントに届くため、それらに対してエントリーポイントルールを作成する必要はありません。ルールがまったくないエージェントでも、その埋め込みチャットに応答します。

</> ボタンはアクティブなエージェントにのみ表示されます。一時停止中のエージェントはチャットを受信しても返信できないため、再度オンにするまでオプションは非表示になります。エージェント用に設定するチャネルはありません。エージェントはどのチャネルからでもチャットを受け取ることができます。
ウィジェット設定から: チャットウィジェットの設定 → チャネル → 管理で、チャットのルーティング先を設定し、その下のスニペットをコピーします。ドロップダウンを変更すると、スニペットが書き換わります。

フローティングスニペットは、アドレス内に宛先情報を含んでいます。

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></script>

インラインスニペットは、代わりに <div> 上に宛先情報を含んでいるため、1つのページに異なる場所へつながる複数のチャットを配置できます。

<div data-chat-widget="CONFIG_ID" data-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

キャンペーンが廃止される前にコピーされたスニペットには、代わりに ?campaign= または data-campaign= が含まれています。これらはそのまま機能し続けるため、再貼り付けの必要はありません。

知っておくべきいくつかの点：

IDを手入力するのではなく、コピーボタンを使用してください。IDがアカウント上のエージェントと一致しない場合、チャットは機能しますが、デフォルトのルーティングにフォールバックされます。
すでに会話中のユーザーは、たとえ後で別の場所を指すページに移動したとしても、最初に開始した相手との会話が継続されます。これにより、会話の途中で担当者が変わることを防ぎます。
ページ固有の宛先は、アカウントのデフォルトやキーワードトリガーよりも優先されます。

ウィジェットに訪問者が誰であるかを伝える（高度な設定）

メンバーエリア、顧客ポータル、またはユーザーがすでにサインインしているアプリ内にチャットウィジェットを配置する場合、サイト側ではすでにそのユーザーが誰であるかを把握しています。その情報をウィジェットに渡すことで、訪問者がすでに提供済みの詳細情報を再度入力する必要がなくなり、AIがすでに把握している情報を活用できるようになります。

ウィジェットスクリプトの前に、小さな設定ブロックを追加します：

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

ページ側で、ログイン中のユーザー情報をサーバーサイドでこれらの値に埋め込む必要があります。

姓も保存するには、visitorブロック（インライン埋め込みの場合はdata-visitor-last-name）内のnameの横にlast_nameを追加します。これはオプションです。姓の収集がオンかオフかに関わらず、名前とメールアドレスがあればフォームをスキップするのに十分です。

以下の2つのことが行われます：

「始める前に…」フォームがスキップされます。 名前とメールアドレスが提供されると、訪問者はすぐに会話を開始でき、それらの詳細は訪問者が入力したかのように連絡先情報として保存されます。
data 以下のすべてがAIに渡されます。 プラン、注文番号、更新日、クレジット残高、座席数など、そこに記述した内容はすべてAIがその人物について知っている情報の一部となります。そのため、「私のプランはいつ更新されますか？」といった質問に対して、本人確認を求めることなく回答できるようになります。フィールド名は自由なものを使用してください。これらは連絡先の「カスタムフィールド」として表示されます。最大20個の値をメッセージごとに最新の状態で送信するため、会話の途中でプランが変更されても、AIは新しい情報を認識します。

インライン埋め込みの場合は、代わりに <div> に同じ情報を記述することもできます。これは1つのページに複数のチャットを配置する場合に便利です：

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

ページ読み込み後にのみ訪問者が誰であるかが判明する場合（ページを再読み込みせずにサインインが行われるシングルページアプリケーションなど）は、詳細情報が判明した時点で以下を呼び出すと、ウィジェットが自動的に更新されます：

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

知っておくべきいくつかの点：

同じコンピューターで2人の異なるユーザーがサインインした場合、2人目のユーザーは1人目のチャットを見るのではなく、新しい会話を開始します。ウィジェットはユーザーの変更を検知し、自身をリセットします。
これはあくまでコンテキストのためのものであり、サインインを目的としたものではありません。会話はこれまで通り個別に保持されるため、idを渡しても他人のチャットを開くことはできません。また、別のデバイスやブラウザを使用しているユーザーは、そこで新しい会話を開始します。デバイス間で会話を引き継ぐには、次に説明するようにidに署名してください。
これはオプションです。一般的な公開ページのウィジェットではこれらは不要であり、これまで通り動作します。

どのデバイスでも同じ会話を再開する（サインイン済み訪問者ID）

顧客がアカウントを持っている場合、チャットを追跡させることができます。スマートフォンでサインインし、ノートパソコンで継続しても、受信トレイには同じ連絡先との同じ会話として表示され、AIもこれまでのやり取りをすべて把握しています。そのためには、Your AI Connectorがその訪問者が本当にページで指定された人物であるという証明を必要とします。そうでないと、誰でもブラウザに顧客番号を入力してその顧客のチャットを読み取れてしまう可能性があります。この証明は、サーバー上で計算する署名です。

ウィジェットの Manage パネルで、Channels & Embed の下にある Signed-in visitors を探し、Generate secret をクリックします。IDシークレットをコピーしてください。これはサーバー内のみで保持し、ページ自体には決して記述しないでください。

サーバーがサインイン済みの顧客向けにページをレンダリングする際、その顧客のIDのHMAC-SHA256をシークレットを使用して計算し、小文字の16進文字列として出力します：

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

設定ブロックにIDとハッシュを配置します。すでに渡している名前とメールアドレスの隣に追加してください：

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

インライン埋め込みは<div>上のdata-visitor-hashと同じ値を取り、window.chatWidget.setVisitor({ visitor: { id, hash } })はページをリロードせずにユーザーをサインインさせるアプリで機能します。

署名が確認された後の動作：

顧客のチャットはブラウザ単位ではなくアカウント単位で保存されるため、サインインしているすべてのデバイスとブラウザで同じ会話となり、受信トレイには1つの連絡先として表示されます。
新しいデバイスで以前のメッセージが読み込まれ、AIは中断したところから会話を継続します。
署名が正しくない場合、ウィジェットは以前と同様に通常のブラウザ単位のチャットとして静かに動作し、開発者が確認できるようにブラウザコンソールに理由を出力します。訪問者にエラーが表示されることはありません。
IDは送信された通りに正確に比較されるため、idとして渡す値と同じ値に署名し、同じ人物に対してはどこでも同じIDを使用してください。

知っておくべき2つのこと：

管理パネルの再生成を行うと、新しいシークレットが発行されます。古いシークレットで署名しているページは、サーバーが新しいシークレットを使用するまで、通常のブラウザ単位のチャットにフォールバックします。既存の会話は保持されます。それらはシークレットではなく、顧客のIDに紐付いているためです。
匿名訪問者としてサインインする前に誰かが行った会話は、別のチャットとして残ります。アカウントベースの会話は、サインイン中に送信された最初のメッセージから始まります。

独自のコード（API）からウィジェット設定を変更する

ウィジェットの管理パネルにあるすべての設定は、REST API を通じて変更することも可能です。これは、多数のウェブサイトを管理している場合や、クライアントのために添付ファイルボタンを自動的にオフにしたい場合に便利です。APIキーと変更したいフィールドのみを指定して、https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID へ PATCH を送信してください。例えば、{"show_upload_button": false} は添付ファイルボタンを非表示にし、{"show_emoji_button": false} は絵文字ピッカーを非表示にし、{"launcher_icon": "chat-dots"} はランチャーアイコンを切り替えます。CONFIG_ID は埋め込みスクリプト内の識別子と同じものです。受け入れ可能なフィールドの全リスト（名前、開始メッセージ、色、ランチャーアイコン、許可されたドメイン、訪問者情報フォーム、プライバシー通知、テーマ、コーナーおよびフォントスタイル）は、APIリファレンスの チャットウィジェット セクションに記載されています。ウェブサイト側では、次回のページ読み込み時に変更が反映されます。

インストール後の動作

Webサイトにスクリプトを追加すると、チャットウィジェットが自動的にWebサイトの隅（デフォルトでは右下）にチャットボタンを作成します。ウィジェットはユーザーがページをスクロールしても固定位置に留まるため、常にアクセス可能です。

訪問者がこのボタンをクリックすると、チャットウィンドウが全画面に展開され、開始メッセージが表示されて会話を開始できます。「訪問者情報の収集」がオンになっている場合、訪問者が入力を行う前に、名前とメールアドレス（および必要に応じて電話番号）を尋ねる小さなフォームが最初に表示されます。

チャットインターフェースは画面サイズに合わせて自動的に調整されるため、デスクトップとモバイルデバイスの両方でシームレスに動作します。

実装のテスト

ウィジェットをサイトに追加した後、正しく動作するかテストしてください。

ブラウザでウェブサイトを開きます。
チャットボタンをクリックしてウィジェットを開きます。
テストメッセージを送信し、返信が届くことを確認します。
別のデバイスやブラウザでも繰り返し、どこでも動作することを確認します。

チャットウィジェットがサイトに表示されない場合は、以下を確認してください。

CONFIG_ID が実際の構成識別子に置き換えられていることを確認してください。
スクリプトタグが終了タグ </body> の前に配置されていることを確認してください。
コードに入力ミスがないか確認してください。
Shopifyの場合、公開中のテーマを編集し、保存をクリックしたことを確認してください。ドラフトや複製されたテーマで行った編集は、公開中のストアには反映されません。

企業ファイアウォールの内側で利用する場合

一般公開されているページではウィジェットが読み込まれるのに、オフィスネットワーク内のスタッフに対しては読み込まれない場合、そのネットワークがウィジェットの読み込み元ドメインをブロックしている可能性が非常に高いです。ITチームに依頼し、ポート443での通常のHTTPS通信を許可してもらう必要があります。

埋め込みスニペット内のドメイン — 「管理」パネルからコピーした <script src="..."> 行のアドレス。
api.youraiconnector.com — ウィジェットはここにもメッセージを送信します。

これ以外に開放が必要なものはありません。追加のポートやインバウンドルールは不要です。それでもウィジェットが表示されない場合は、ブラウザの開発者コンソールを開いて報告内容をお送りください。ブロックされたリクエストには拒否されたドメイン名が表示されており、それが解決の鍵となることがほとんどです。

チャットウィジェット #

ウェブサイトチャットウィジェット統合ガイド #