您可以對對話方塊套用許多 HTML 自訂項目。
HTML 即時通訊元素選項
df-messenger 元素的子項可以是下列任一元素：
df-messenger-chat：服務專員對話方塊一律開啟df-messenger-chat-bubble：可使用開啟或關閉泡泡按鈕開啟或關閉代理程式對話方塊
df-messenger 的 HTML 自訂項目
df-messenger HTML 元素具有下列屬性：
| 屬性 | 輸入政策 | 值 |
|---|---|---|
agent-id |
必填 | 與 Dialogflow CX 代理程式相關聯的代理程式 ID。 |
allow-feedback |
選用 | 設為 all，允許使用者對代理程式的回覆提供意見回饋。 |
language-code |
必填 | 預設語言代碼。 |
project-id |
必填 | 代理程式的專案 ID。 |
location |
選用 | 代理程式的區域。預設值為 global。 |
intent |
選用 | 開啟即時通訊對話方塊時，系統會叫用自訂事件。您可以針對這個事件使用事件處理常式，系統會呼叫該常式並產生第一則代理程式訊息。 |
oauth-client-id |
選用 | OAuth 驗證需要這項設定。預設值為空值。如未提供值，且已啟用 Dialogflow CX Messenger 未經驗證的存取權，未經驗證的使用者就能與代理程式互動。如果提供值，系統會在代理程式對話方塊上疊加「要求驗證」訊息 (文字可控管，請參閱 request-auth-text 通知)，要求使用者先登入，才能使用代理程式。 |
storage-option |
選用 | 指定對話訊息的本機儲存空間。如果不想儲存訊息，請使用 none。使用 none 會在頁面重新整理或重新載入時清除所有訊息。預設為 sessionStorage。 |
session-ttl |
選用 | 設定工作階段的維持時間 (以秒為單位)，必須嚴格低於 86400 (1 天)，預設為 1800 (30 分鐘)。 |
url-allowlist |
選用 | 啟用從以半形逗號分隔的網址前置字串清單載入圖片。HTML 或 Markdown 回覆中使用的圖片網址開頭必須是所列前置字元之一。使用 * 允許所有網址。 |
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 |
選用 | 輸入欄位空白時要顯示的文字。預設值為「問些什麼…」。 |
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 |
選用 | 定義即時通訊對話方塊相對於開啟或關閉泡泡的位置。值為兩個方向字詞 (top、bottom、left、right)，並以 - 分隔。預設值為 top-left。第一個方向定義錨點，第二個方向則定義泡泡的主要擴展方向。舉例來說，top-left 會放在泡泡頂端，並向左和向上展開 (遠離泡泡)。 |
chat-width |
選用 | 定義即時通訊視窗的寬度。數值 (以像素為單位)。預設值為 320 像素。 |
chat-height |
選用 | 定義即時通訊視窗的高度。數值 (以像素為單位)。預設值為 480 像素。 |
allow-fullscreen |
選用 | 定義聊天室視窗是否可以全螢幕開啟。如果設為 always，則會以全螢幕模式開啟，適用於所有螢幕大小。如果設為 small，螢幕尺寸小於 500 像素時會開啟全螢幕，否則會開啟一般視窗。如已設定，可能會覆寫 chat-width、chat-height 和 anchor。 |
minimized |
選用 | 判斷聊天室是否一開始就以最小化形式開啟。使用與 anchor 相同的邏輯。如果指定，系統會在載入時執行初始 intent。 |