チャット ダイアログに適用できる 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 が実行されます。 |