チャット ダイアログに適用できる HTML のカスタマイズは数多くあります。
HTML チャット要素のオプション
df-messenger 要素の子要素は次のいずれかです。
df-messenger-chat: エージェント ダイアログは常に開いているdf-messenger-chat-bubble: [開く] または [閉じる] のバブル ボタンでエージェント ダイアログを開閉可能
df-messenger の HTML のカスタマイズ
df-messenger HTML 要素には次の属性があります。
| 属性 | 入力ポリシー | 値 |
|---|---|---|
agent-id |
必須 | Dialogflow エージェントに関連付けられたエージェント ID。 |
allow-feedback |
省略可 | エンドユーザーがエージェントの回答に関するフィードバックを提供できるようにするには、all に設定します。 |
language-code |
必須 | デフォルトの言語コード。 |
project-id |
必須 | エージェントのプロジェクト ID。 |
location |
省略可 | エージェントのリージョン。 デフォルト値は global です。 |
intent |
省略可 | チャット ダイアログが開いたときに呼び出されるカスタム イベント。このイベントで呼び出され、最初のエージェント メッセージを生成するイベント ハンドラを使用できます。 |
oauth-client-id |
省略可 | OAuth 認証に必要です。デフォルト値は null です。値が指定されておらず、Dialogflow CX Messenger の未認証アクセスが有効になっている場合、未認証ユーザーはエージェントとやりとりできます。値が指定されている場合、エージェント ダイアログに 「認証をリクエスト」（テキストは制御できます。request-auth-text を参照）の通知がオーバーレイされて表示されます。これにより、ユーザーはエージェントを使用するためにログインが必要です。 |
storage-option |
省略可 | 会話メッセージのローカル ストレージを指定します。メッセージを保存しない場合は、none を使用します。none を使用すると、ページの更新または再読み込み時にすべてのメッセージが消去されます。デフォルトは sessionStorage です。 |
session-ttl |
省略可 | セッションを維持する秒単位の期間を設定します。86,400（1 日）未満にする必要があります。デフォルトは 1,800（30 分）です。 |
url-allowlist |
省略可 | URL 接頭辞のカンマ区切りリストから画像を読み込むことができます。HTML またはマークダウンのレスポンスで使用する画像 URL は、リストされた接頭辞のいずれかで始まる必要があります。すべての URL を許可するには、* を使用します。 |
max-query-length |
省略可 | テキスト クエリの最大長を定義します。値が負の場合、長さは無制限です。デフォルトは 256 です。その他のドキュメント |
df-messenger-chat の HTML のカスタマイズ
df-messenger-chat HTML 要素には次の属性があります。
| 属性 | 入力ポリシー | 値 |
|---|---|---|
chat-title |
省略可 | チャットボックスのタイトル。チャットボックスの上に表示されます。 |
chat-subtitle |
省略可 | チャットボックスのサブタイトル。チャットボックスの上、chat-title の下に表示されます |
chat-title-icon |
省略可 | チャットボックスのタイトルに表示されるアイコン。チャットボックスの上、デフォルトで chat-title の左に表示されます |
bot-writing-text |
省略可 | エージェントの書き込み中に表示されるテキスト |
bot-writing-image |
省略可 | エージェントの書き込み中に表示される画像。bot-writing-text よりも優先されます。 |
request-auth-text |
省略可 | 認証が必要な場合のボタンのテキスト。 |
placeholder-text |
省略可 | 入力フィールドが空のときに表示されるテキスト。デフォルトは「Ask something」です。 |
bot-actor-image |
省略可 | エージェントのアクター画像に使用する画像ソース。エージェント レスポンスの各グループに表示されます。 |
user-actor-image |
省略可 | ユーザーのアクター画像に使用する画像ソース。各ユーザーのメッセージに表示されます。 |
df-messenger-chat-bubble の HTML のカスタマイズ
df-messenger-chat-bubble HTML 要素には、df-messenger-chat と同じ属性と、次の追加属性があります。
| 属性 | 入力ポリシー | 値 |
|---|---|---|
expanded |
省略可 | チャットを最初から開くかどうかを決定するブール値。設定しない場合、チャットは最後の状態を記憶します。 |
chat-icon |
省略可 | チャットのふきだしのアイコン。一般公開されている URI である必要があります。 |
chat-close-icon |
省略可 | チャットのふきだしを閉じるアイコン。一般公開されている URI である必要があります。 |
chat-collapse-icon |
省略可 | タイトルバーにある閉じるボタンのアイコン。一般公開されている URI である必要があります。 |
anchor |
省略可 | 開く / 閉じるのふきだしに対するチャット ダイアログの配置場所を定義します。値は、- で区切られた 2 方向の単語（top、bottom、left、right）です。デフォルト値は top-left。 最初の方向はアンカー ポイントを定義し、2 番目の方向はバブルから離れるメインの拡張方向を定義します。たとえば、top-left はバブルの上に配置され、左と上に（バブルから離れて）展開されます。 |
chat-width |
省略可 | チャット ウィンドウの幅を定義します。数値（ピクセル単位）。デフォルトは 320px です。 |
chat-height |
省略可 | チャット ウィンドウの高さを定義します。数値（ピクセル単位）。デフォルトは 480px です。 |
allow-fullscreen |
省略可 | チャット ウィンドウを全画面表示で開くかどうかを定義します。always に設定すると、すべての画面サイズで全画面表示になります。small に設定すると、画面サイズが 500px 未満の場合は全画面表示になります。それ以外の場合は、通常のウィンドウとして開きます。設定されている場合、chat-width、chat-height、anchor をオーバーライドできます。 |
minimized |
省略可 | チャットを最初に最小化された形式で開くかどうかを決定します。anchor と同じロジックを使用します。指定されている場合、読み込み時に初期 intent を実行します。 |