` はマウントポイントです。チャットパネルはこの内部でレンダリングされ、その寸法に合わせて表示されます。divのスタイルは自由に変更可能です（固定の高さを指定する、flexコンテナ内に配置する、グリッドセルに配置するなど）。チャットパネルはそれに追従します。
複数のチャットウィジェットを埋め込む場合でも、ページ上に必要な `
```
{% endcode %}
インラインスニペットは、代わりに `
` 上に宛先情報を含んでいるため、1つのページに異なる場所へつながる複数のチャットを配置できます。
{% code overflow="wrap" %}
```html
```
{% endcode %}
エージェントの場合、文言は `?agent=AGENT_ID` または `data-agent="AGENT_ID"` に変わります。
知っておくべきいくつかの点：
- IDを手入力するのではなく、コピーボタンを使用してください。IDがアカウント上のキャンペーンやエージェントと一致しない場合、チャットは機能しますが、デフォルトのルーティングにフォールバックされます。
- すでに会話中のユーザーは、後で別の宛先を指定したページに移動しても、最初に開始した相手との会話が継続されます。これにより、会話の途中で担当者が変わることを防ぎます。
- ページ固有の宛先は、アカウントのデフォルト設定やキーワードトリガーよりも優先されます。
### ウィジェットに訪問者が誰であるかを伝える（高度な設定）
メンバーエリア、顧客ポータル、またはユーザーがすでにサインインしているアプリ内にチャットウィジェットを配置する場合、サイト側ではすでにそのユーザーが誰であるかを把握しています。その情報をウィジェットに渡すことで、訪問者がすでに提供済みの詳細情報を再度入力する必要がなくなり、AIがすでに把握している情報を活用できるようになります。
ウィジェットスクリプトの**前**に、小さな設定ブロックを追加します：
{% code overflow="wrap" %}
```html
```
{% endcode %}
ページ側で、ログイン中のユーザー情報をサーバーサイドでこれらの値に埋め込む必要があります。
以下の2つのことが行われます：
- **「始める前に...」フォームがスキップされます。** 名前とメールアドレスが提供されると、訪問者はすぐに会話を開始でき、それらの詳細は訪問者が入力したかのように連絡先情報として保存されます。
- **`data` 以下のすべてがAIに渡されます。** プラン、注文番号、更新日、クレジット残高、座席数など、そこに記述した内容はすべてAIがその人物について知っている情報の一部となります。そのため、「私のプランはいつ更新されますか？」といった質問に対して、本人確認を求めることなく回答できるようになります。フィールド名は自由なものを使用してください。これらは連絡先の「カスタムフィールド」として表示されます。最大20個の値をメッセージごとに最新の状態で送信するため、会話の途中でプランが変更されても、AIは新しい情報を認識します。
インライン埋め込みの場合は、代わりに `
` に同じ情報を記述することもできます。これは1つのページに複数のチャットを配置する場合に便利です：
{% code overflow="wrap" %}
```html
```
{% endcode %}
ページ読み込み後にのみ訪問者が誰であるかが判明する場合（ページを再読み込みせずにサインインが行われるシングルページアプリケーションなど）は、詳細情報が判明した時点で以下を呼び出すと、ウィジェットが自動的に更新されます：
{% code overflow="wrap" %}
```html
```
{% endcode %}
知っておくべきいくつかの点：
- 同じコンピュータで2人の異なる人物がサインインした場合、2人目は1人目のチャットを見るのではなく、新しい会話を開始します。ウィジェットは人物の変更を検知し、自身をリセットします。
- これはコンテキスト（文脈）を提供するためのものであり、ログインを目的としたものではありません。会話はこれまで通り個別に保持されるため、`id` を渡しても他人のチャットを開くことはできません。また、別のデバイスやブラウザを使用している場合は、そこで新しい会話が開始されます。
- これはオプションです。通常の公開ページ上のウィジェットではこれらは不要であり、これまで通り動作します。
### 独自のコード（API）からウィジェット設定を変更する
ウィジェットの **管理** パネルにあるすべての設定は、[REST API](../api/reference.md) を通じて変更することも可能です。これは、多数のウェブサイトを管理している場合や、クライアントのために添付ファイルボタンを自動的にオフにしたい場合に便利です。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リファレンス](../api/reference.md) の **チャットウィジェット** セクションに記載されています。ウェブサイト側では、次回のページ読み込み時に変更が反映されます。
### インストール後の動作
Webサイトにスクリプトを追加すると、チャットウィジェットが自動的にWebサイトの隅（デフォルトでは右下）にチャットボタンを作成します。ウィジェットはユーザーがページをスクロールしても固定位置に留まるため、常にアクセス可能です。
訪問者がこのボタンをクリックすると、チャットウィンドウが全画面に展開され、開始メッセージが表示されて会話を開始できます。「訪問者情報の収集」がオンになっている場合、訪問者が入力を行う前に、名前とメールアドレス（および必要に応じて電話番号）を尋ねる小さなフォームが最初に表示されます。
チャットインターフェースは画面サイズに合わせて自動的に調整されるため、デスクトップとモバイルデバイスの両方でシームレスに動作します。
### 実装のテスト
ウィジェットをサイトに追加した後、正しく動作するかテストしてください。
1. ブラウザでウェブサイトを開きます。
2. チャットボタンをクリックしてウィジェットを開きます。
3. テストメッセージを送信し、返信が届くことを確認します。
4. 別のデバイスやブラウザでも繰り返し、どこでも動作することを確認します。
チャットウィジェットがサイトに表示されない場合は、以下を確認してください。
1. `CONFIG_ID` が実際の構成識別子に置き換えられていることを確認してください。
2. スクリプトタグが閉じタグ `