Dialogflow CX Messenger HTML 自訂設定

您可以對即時通訊對話方塊套用多項 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 選用 開啟即時通訊對話方塊時,叫用的自訂事件。如果即時通訊一開始就開啟 (例如 df-messenger-chat 或 expanded/minimized df-messenger-chat-bubble),則會在載入網頁時觸發。您可以使用事件處理常式,在系統呼叫這個事件時,產生第一個代理訊息。
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 自訂項目

Dialogflow CX Messenger 側欄

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 自訂項目

Dialogflow CX Messenger 聊天泡泡

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 相同的邏輯。如已指定,這項屬性的優先順序會高於 expanded。這也會在載入時觸發初始 intent。