` 上に宛先情報を含んでいるため、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`を渡しても他人のチャットを開くことはできません。また、別のデバイスやブラウザを使用しているユーザーは、そこで新しい会話を開始します。デバイス間で会話を引き継ぐには、次に説明するように`id`に署名してください。
- これはオプションです。一般的な公開ページのウィジェットではこれらは不要であり、これまで通り動作します。
#### どのデバイスでも同じ会話を再開する（サインイン済み訪問者ID）
顧客がアカウントを持っている場合、チャットを追跡させることができます。スマートフォンでサインインし、ノートパソコンで継続しても、受信トレイには同じ連絡先との同じ会話として表示され、AIもこれまでのやり取りをすべて把握しています。そのためには、
DM Champがその訪問者が本当にページで指定された人物であるという証明を必要とします。そうでないと、誰でもブラウザに顧客番号を入力してその顧客のチャットを読み取れてしまう可能性があります。この証明は、サーバー上で計算する署名です。
1. ウィジェットの **Manage** パネルで、**Channels & Embed** の下にある **Signed-in visitors** を探し、**Generate secret** をクリックします。IDシークレットをコピーしてください。これはサーバー内のみで保持し、ページ自体には決して記述しないでください。
::: master-only
Channels & Embedの下にあるSigned-in visitors行。シークレットは「表示」をクリックするまで隠されています。下のスニペットは、idとその署名をページ上のどこに配置するかを示しています。
:::
2. サーバーがサインイン済みの顧客向けにページをレンダリングする際、その顧客のIDのHMAC-SHA256をシークレットを使用して計算し、小文字の16進文字列として出力します：
{% code overflow="wrap" %}
```js
// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");
```
{% endcode %}
{% code overflow="wrap" %}
```php
// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);
```
{% endcode %}
{% code overflow="wrap" %}
```python
# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()
```
{% endcode %}
3. 設定ブロックにIDとハッシュを配置します。すでに渡している名前とメールアドレスの隣に追加してください：
{% code overflow="wrap" %}
```html
```
{% endcode %}
インライン埋め込みは`
`上の`data-visitor-hash`と同じ値を取り、`window.chatWidget.setVisitor({ visitor: { id, hash } })`はページをリロードせずにユーザーをサインインさせるアプリで機能します。
署名が確認された後の動作：
- 顧客のチャットはブラウザ単位ではなくアカウント単位で保存されるため、サインインしているすべてのデバイスとブラウザで同じ会話となり、受信トレイには1つの連絡先として表示されます。
- 新しいデバイスで以前のメッセージが読み込まれ、AIは中断したところから会話を継続します。
- 署名が正しくない場合、ウィジェットは以前と同様に通常のブラウザ単位のチャットとして静かに動作し、開発者が確認できるようにブラウザコンソールに理由を出力します。訪問者にエラーが表示されることはありません。
- IDは送信された通りに正確に比較されるため、`id`として渡す値と同じ値に署名し、同じ人物に対してはどこでも同じIDを使用してください。
知っておくべき2つのこと：
- 管理パネルの**再生成**を行うと、新しいシークレットが発行されます。古いシークレットで署名しているページは、サーバーが新しいシークレットを使用するまで、通常のブラウザ単位のチャットにフォールバックします。既存の会話は保持されます。それらはシークレットではなく、顧客のIDに紐付いているためです。
- 匿名訪問者としてサインインする前に誰かが行った会話は、別のチャットとして残ります。アカウントベースの会話は、サインイン中に送信された最初のメッセージから始まります。
### 独自のコード（API）からウィジェット設定を変更する
ウィジェットの **管理** パネルにあるすべての設定は、[REST API](../api/reference.md) を通じて変更することも可能です。これは、多数のウェブサイトを管理している場合や、クライアントのために添付ファイルボタンを自動的にオフにしたい場合に便利です。APIキーと変更したいフィールドのみを指定して、`https://api.dmchamp.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サイトの隅（デフォルトでは右下）にチャットボタンを作成します。ウィジェットはユーザーがページをスクロールしても固定位置に留まるため、常にアクセス可能です。
::: master-only
これは、訪問者がチャットを開く前にサイト上で目にするものです。Appearance 設定に従って配置されたフローティングボタンのみが表示されます。
:::
訪問者がこのボタンをクリックすると、チャットウィンドウが全画面に展開され、開始メッセージが表示されて会話を開始できます。「訪問者情報の収集」がオンになっている場合、訪問者が入力を行う前に、名前とメールアドレス（および必要に応じて電話番号）を尋ねる小さなフォームが最初に表示されます。
::: master-only
開かれたチャットパネルです。ここでは「訪問者情報の収集」がオンになっているため、会話の上に「Before we start...」フォームが表示されます。訪問者は一度入力すれば、その後は通常通りチャットできます。
:::
チャットインターフェースは画面サイズに合わせて自動的に調整されるため、デスクトップとモバイルデバイスの両方でシームレスに動作します。
### 実装のテスト
ウィジェットをサイトに追加した後、正しく動作するかテストしてください。
1. ブラウザでウェブサイトを開きます。
2. チャットボタンをクリックしてウィジェットを開きます。
3. テストメッセージを送信し、返信が届くことを確認します。
4. 別のデバイスやブラウザでも繰り返し、どこでも動作することを確認します。
::: master-only
メッセージを送信すると、スレッド内に送信済みバブルとして表示されます。AI またはチームからの返信も同じウィンドウに表示されます。
:::
チャットウィジェットがサイトに表示されない場合は、以下を確認してください。
1. `CONFIG_ID` が実際の構成識別子に置き換えられていることを確認してください。
2. スクリプトタグが閉じタグ `
