您可以設定 CSS 變數，自訂對話方塊的樣式。
一般樣式
下列 CSS 變數提供一般樣式選項：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-font-family |
選用 | "Google Sans", "Helvetica Neue", sans-serif | 要在整個小工具中使用的字型系列 |
df-messenger-font-size |
選用 | 14px | 要在整個小工具中使用的文字大小 |
df-messenger-font-color |
選用 | #1f1f1f | 要在整個小工具中使用的文字顏色 |
df-messenger-primary-color |
選用 | #0b57d0 | 小工具中各元素的顏色 (例如標題列背景、動作按鈕背景等) |
df-messenger-focus-color |
選用 | #1e88e5 | 元素周圍焦點環的顏色 |
df-messenger-focus-color-contrast |
選用 | 白色 | 元素位於有背景色的父項 (例如標題列) 內時，元素周圍焦點環的顏色 |
df-messenger-chat-border |
選用 | 無 | 對話方塊的邊框 |
df-messenger-chat-border-radius |
選用 | 0 | 對話方塊的邊框半徑 |
「df-messenger-chat-bubble」的樣式
使用 df-messenger-chat-bubble 元素時，可以提供下列 CSS 變數：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-chat-window-height |
選用 | 480px | 聊天室視窗的高度 |
df-messenger-chat-window-width |
選用 | 320px | 即時通訊視窗寬度 |
df-messenger-chat-window-offset |
選用 | 16px | 聊天泡泡和聊天視窗之間的距離 |
df-messenger-chat-window-box-shadow |
選用 | 無 | 即時通訊視窗的方塊陰影 |
df-messenger-chat-collapse-icon-size |
選用 | 取消設定 | 標題列中摺疊按鈕圖示的大小 |
df-messenger-chat-bubble-icon-size |
選用 | 36px | 即時通訊泡泡圖示的大小 |
df-messenger-chat-bubble-close-icon-size |
選用 | 24px | 即時通訊泡泡的關閉圖示大小 |
df-messenger-chat-bubble-close-icon-transform-rotate |
選用 | -90deg | 聊天泡泡的關閉圖示旋轉角度，關閉即時通訊時會旋轉至 0 度 |
df-messenger-chat-bubble-icon-color |
選用 | 白色 | 聊天泡泡的圖示和關閉圖示顏色 |
df-messenger-chat-bubble-size |
選用 | 64px | 對話泡泡大小 |
df-messenger-chat-bubble-background |
選用 | #0b57d0 | 即時通訊泡泡的背景 |
df-messenger-chat-bubble-border-radius |
選用 | 32px | 聊天泡泡的邊框半徑 |
df-messenger-chat-bubble-border |
選用 | 無 | 聊天泡泡的邊框 |
df-messenger-chat-border-minimized |
選用 | 無 | 縮到最小的對話框邊界 |
df-messenger-chat-border-radius-minimized |
選用 | 0 | 縮到最小的即時通訊邊框半徑 |
標題列樣式
您可以為標題列提供下列 CSS 變數：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-titlebar-background |
選用 | #0b57d0 | 標題列的背景 |
df-messenger-titlebar-padding |
選用 | 0 15px | 標題列的邊框間距 |
df-messenger-titlebar-border |
選用 | 無 | 標題列的邊框 |
df-messenger-titlebar-border-bottom |
選用 | 無 | 標題列的下框線 |
df-messenger-titlebar-title-align |
選用 | 開始 | 標題列中標題文字的文字對齊方式，允許的值為 start、center 或 end |
df-messenger-titlebar-font-color |
選用 | 白色 | 標題列中文字的文字顏色 |
df-messenger-titlebar-letter-spacing |
選用 | 正常 | 標題列中文字的字母間距 |
df-messenger-titlebar-title-font-size |
選用 | 18px | 標題列中標題文字的文字大小 |
df-messenger-titlebar-title-font-family |
選用 | "Google Sans", "Helvetica Neue", sans-serif | 標題列中標題文字的字型系列 |
df-messenger-titlebar-title-font-weight |
選用 | 400 | 標題列中標題文字的字型粗細 |
df-messenger-titlebar-title-line-height |
選用 | 正常 | 標題列中標題文字的行高 |
df-messenger-titlebar-title-letter-spacing |
選用 | 正常 | 標題列中標題文字的字母間距 |
df-messenger-titlebar-subtitle-font-color |
選用 | 白色 | 標題列中副標題文字的文字顏色 |
df-messenger-titlebar-subtitle-font-size |
選用 | 18px | 標題列中副標題文字的大小 |
df-messenger-titlebar-subtitle-font-family |
選用 | "Google Sans", "Helvetica Neue", sans-serif | 標題列中副標題文字的字型系列 |
df-messenger-titlebar-subtitle-font-weight |
選用 | 400 | 標題列中副標題文字的字型粗細 |
df-messenger-titlebar-subtitle-line-height |
選用 | 正常 | 標題列中副標題文字的行高 |
df-messenger-titlebar-subtitle-letter-spacing |
選用 | 正常 | 標題列中副標題文字的字母間距 |
df-messenger-titlebar-title-order |
選用 | 列 | 在標題列中排序元素，允許的值為 row 或 row-reverse。只有在指定 chat-title-icon 屬性時，這個值才會生效。 |
df-messenger-titlebar-icon-width |
選用 | 18px | 標題列中圖示的寬度。只有在指定 chat-title-icon 時，才會套用這個值。 |
df-messenger-titlebar-icon-height |
選用 | 18px | 標題列中圖示的高度。只有在指定 chat-title-icon 時，才會套用這個值。 |
df-messenger-titlebar-icon-padding |
選用 | 0 12px 0 0 | 標題列中圖示周圍的邊框間距。只有在指定 chat-title-icon 時，才會套用這個值。 |
即時通訊視窗的樣式
您可以為即時通訊視窗提供下列 CSS 變數：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-chat-background |
選用 | #fafafa | 顯示訊息的代理程式對話方塊背景 |
df-messenger-chat-padding |
選用 | 10px | 顯示訊息的代理程式對話方塊邊框間距 |
df-messenger-messagelist-border |
選用 | 無 | 郵件清單的邊框 |
df-messenger-message-border |
選用 | 無 | 服務專員對話訊息的邊框 |
df-messenger-message-font-size |
選用 | 14px | 代理程式對話訊息的文字大小 |
df-messenger-message-font-family |
選用 | "Google Sans", "Helvetica Neue", sans-serif | 代理程式對話訊息的字型系列 |
df-messenger-message-font-weight |
選用 | 正常 | 代理對話訊息的字型粗細 |
df-messenger-message-bot-background |
選用 | #ecf3fe | 背景：代理傳送的訊息 |
df-messenger-message-bot-border |
選用 | 無 | 代理傳送訊息的邊框 |
df-messenger-message-bot-font-color |
選用 | #1f1f1f | 代理傳送訊息的文字顏色 |
df-messenger-message-bot-font-weight |
選用 | 正常 | 服務專員傳送訊息的字體粗細 |
df-messenger-message-user-background |
選用 | #e1e3e1 | 使用者傳送郵件的背景 |
df-messenger-message-user-border |
選用 | 無 | 使用者傳送的訊息邊框 |
df-messenger-message-user-font-color |
選用 | #1f1f1f | 使用者傳送訊息的文字顏色 |
df-messenger-message-user-font-weight |
選用 | 正常 | 使用者傳送的訊息字體粗細 |
df-messenger-message-spacing |
選用 | 10px | 兩則訊息之間的間距 |
df-messenger-message-border-radius |
選用 | 8px | 訊息的邊框半徑，適用於所有角落 |
df-messenger-message-bot-border-top-left-radius |
選用 | 8px | 服務專員訊息的左上圓角半徑，會覆寫一般半徑 |
df-messenger-message-bot-border-top-right-radius |
選用 | 8px | 服務專員訊息的右上圓角半徑，會覆寫一般半徑 |
df-messenger-message-bot-border-bottom-left-radius |
選用 | 8px | 服務專員訊息的左下邊框圓角半徑，會覆寫一般半徑 |
df-messenger-message-bot-border-bottom-right-radius |
選用 | 8px | 服務專員訊息的右下角邊框半徑，會覆寫一般半徑 |
df-messenger-message-user-border-top-left-radius |
選用 | 8px | 使用者訊息的左上圓角，會覆寫一般圓角 |
df-messenger-message-user-border-top-right-radius |
選用 | 8px | 使用者訊息的右上圓角半徑，會覆寫一般半徑 |
df-messenger-message-user-border-bottom-left-radius |
選用 | 8px | 使用者訊息的左下角邊框半徑，會覆寫一般半徑 |
df-messenger-message-user-border-bottom-right-radius |
選用 | 8px | 使用者訊息的右下角圓角半徑，會覆寫一般半徑 |
df-messenger-message-stack-spacing |
選用 | 10px | 連續兩則訊息之間的間隔 |
df-messenger-message-bot-stack-border-top-left-radius |
選用 | 8px | 連續服務專員訊息的左上圓角，會覆寫服務專員的左上圓角 |
df-messenger-message-bot-stack-border-top-right-radius |
選用 | 8px | 連續顯示的客服人員訊息右上角圓角半徑，會覆寫客服人員右上角圓角半徑 |
df-messenger-message-bot-stack-border-bottom-left-radius |
選用 | 8px | 連續服務專員訊息的左下圓角，會覆寫服務專員左下圓角 |
df-messenger-message-bot-stack-border-bottom-right-radius |
選用 | 8px | 連續服務專員訊息的右下圓角半徑，會覆寫服務專員的右下圓角半徑 |
df-messenger-message-user-stack-border-top-left-radius |
選用 | 8px | 連續使用者訊息的左上圓角，會覆寫使用者左上圓角 |
df-messenger-message-user-stack-border-top-right-radius |
選用 | 8px | 連續使用者訊息的右上圓角半徑，會覆寫使用者右上圓角半徑 |
df-messenger-message-user-stack-border-bottom-left-radius |
選用 | 8px | 連續使用者訊息的左下邊框半徑，會覆寫使用者左下半徑 |
df-messenger-message-user-stack-border-bottom-right-radius |
選用 | 8px | 連續使用者訊息的右下圓角半徑，會覆寫使用者右下圓角半徑 |
df-messenger-message-user-writing-image-width |
選用 | 24px | 服務專員撰寫內容時顯示的圖片寬度，只有在設定 bot-writing-image 時才會啟用 |
df-messenger-message-bot-writing-image-height |
選用 | 24px | 服務專員撰寫內容時顯示的圖片高度，只有在設定 bot-writing-image 時才會啟用 |
df-messenger-message-bot-writing-font-color |
選用 | #1f1f1f | 代理程式撰寫時顯示的文字顏色 |
df-messenger-message-bot-writing-font-weight |
選用 | 正常 | 代理程式撰寫時顯示的文字字型粗細 |
df-messenger-message-bot-writing-font-size |
選用 | 14px | 代理程式撰寫內容時顯示的文字大小 |
df-messenger-message-bot-writing-border |
選用 | 無 | 代理商撰寫訊息時顯示的訊息邊框 |
df-messenger-message-bot-writing-background |
選用 | #ecf3fe | 背景：顯示代理商撰寫訊息時的狀態 |
df-messenger-message-bot-writing-padding |
選用 | 12px | 代理人撰寫訊息時顯示的訊息邊框間距 |
df-messenger-message-bot-writing-spacing |
選用 | 10px | 服務專員撰寫訊息時顯示的訊息與前一則訊息之間的間隔 |
df-messenger-chat-scroll-button-enabled-display |
選用 | 無 | 定義「跳到底部」按鈕的顯示方式，設為 flex 即可啟用按鈕 |
df-messenger-chat-scroll-button-align |
選用 | 中心 | 「跳到底部」按鈕的對齊方式，允許的值包括 flex-start、center、flex-end |
df-messenger-chat-scroll-button-container-padding |
選用 | 8px | 「跳到底部」按鈕周圍容器的邊框間距 |
df-messenger-chat-scroll-button-text-display |
選用 | 內嵌 | 在「跳到底部」按鈕中，圖示旁邊顯示的文字，使用 none 隱藏文字 |
df-messenger-chat-scroll-button-font-size |
選用 | 14px | 「跳到底部」按鈕的文字大小 |
df-messenger-chat-scroll-button-font-color |
選用 | 白色 | 「跳到底部」按鈕的文字顏色 |
df-messenger-chat-scroll-button-background |
選用 | #0b57d0 | 「跳到底部」按鈕的背景 |
df-messenger-chat-scroll-button-border-radius |
選用 | 999 像素 | 「跳到底部」按鈕的邊框半徑 |
df-messenger-chat-messagelist-scroll-shadow-background |
選用 | radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom |
當訊息清單未捲動至底部時，顯示在清單底部的陰影，設為 none 即可停用 |
演員圖片的樣式
演員圖片是指顯示在機器人或演員訊息旁的圖片。對於這些演員圖片，可以提供下列 CSS 變數：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-message-actor-spacing |
選用 | 16px | 演員圖片和訊息之間的距離 |
df-messenger-message-bot-actor-order |
選用 | 列 | 演員圖片和訊息的順序。使用 row 可將演員圖片放在左側，訊息放在右側；使用 row-reverse 可將演員圖片放在右側，訊息放在左側。 |
df-messenger-message-user-actor-order |
選用 | row-reverse | 演員圖片和訊息的順序。使用 row-reverse 可將演員圖片放在右側，訊息放在左側；使用 row 可將演員圖片放在左側，訊息放在右側。 |
df-messenger-message-actor-direction |
選用 | 欄 | 應與 df-messenger-message-bot-actor-order 和 df-messenger-message-user-actor-order 相反，如果這些項目是以 row 為基礎，請使用 column；如果以 column 為基礎，請使用 row。 |
df-messenger-message-actor-align |
選用 | flex-start | 行為人與郵件的關係。使用 flex-start 將演員圖片放在頂端、center 將演員圖片放在中間，或 flex-end 將演員圖片放在底部。 |
df-messenger-message-actor-border-radius |
選用 | 999 像素 | 執行者圖片的邊框半徑 |
df-messenger-message-actor-padding |
選用 | 8px | 演員圖片的邊框間距 |
df-messenger-message-actor-image-size |
選用 | 24px | 演員圖片大小 |
df-messenger-message-bot-actor-background |
選用 | 白色 | 服務專員演員圖片的背景 |
df-messenger-message-bot-actor-border |
選用 | 無 | 服務專員執行者圖片的邊框 |
df-messenger-message-bot-actor-offset |
選用 | 0 | 偏移量：移動服務專員的演員圖片 |
df-messenger-message-user-actor-background |
選用 | 白色 | 使用者演員圖片的背景 |
df-messenger-message-user-actor-border |
選用 | 無 | 使用者演員圖片的邊框 |
df-messenger-message-user-actor-offset |
選用 | 0 | 偏移量，用於移動使用者的演員圖像 |
使用者輸入內容的樣式
使用者輸入內容可提供下列 CSS 變數：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-send-icon-color |
選用 | #0b57d0 | 使用者輸入內容中的「傳送」圖示顏色 |
df-messenger-send-icon-color-hover |
選用 | #0b57d0 | 使用者將游標懸停在使用者輸入內容中的「傳送」圖示上時，該圖示的顏色 |
df-messenger-send-icon-color-active |
選用 | #0b57d0 | 可傳送文字時，使用者輸入內容中的「傳送」圖示顏色 |
df-messenger-send-icon-offset-x |
選用 | 0 | 使用者輸入內容中「傳送」圖示的垂直位移 |
df-messenger-send-icon-offset-y |
選用 | -4px | 使用者輸入內容中「傳送」圖示的水平偏移量 |
df-messenger-input-background |
選用 | 白色 | 使用者輸入內容的背景 |
df-messenger-input-padding |
選用 | 8px | 使用者輸入欄位 (包括傳送訊息按鈕) 與容器之間的整體邊框間距。 |
df-messenger-input-inner-padding |
選用 | 0px 48px 0px 0 | 使用者輸入欄位 (不含傳送訊息按鈕) 與容器之間的內邊框間距。 |
df-messenger-input-border |
選用 | 無 | 使用者輸入內容的邊框 |
df-messenger-input-border-top |
選用 | 1px solid #e0e0e0 | 使用者輸入內容的頂端邊界 |
df-messenger-input-border-bottom |
選用 | 無 | 使用者輸入內容文字欄位的底部邊框 |
df-messenger-input-font-family |
選用 | "Google Sans", "Helvetica Neue", sans-serif | 使用者輸入內容的字型系列 |
df-messenger-input-font-color |
選用 | #1f1f1f | 使用者輸入內容的文字顏色 |
df-messenger-input-font-size |
選用 | 14px | 使用者輸入內容的文字大小 |
df-messenger-input-font-weight |
選用 | 正常 | 使用者輸入內容的字型粗細 |
df-messenger-input-box-border |
選用 | 無 | 使用者輸入框的邊框 |
df-messenger-input-box-focus-border |
選用 | 無 | 使用者輸入框在焦點狀態下的邊框 |
df-messenger-input-box-border-radius |
選用 | 0 | 使用者輸入框的邊框半徑 |
df-messenger-input-box-padding |
選用 | 12px 0 | 使用者輸入內容框的邊框間距 |
df-messenger-input-box-focus-padding |
選用 | 12px 0 | 使用者輸入框在焦點狀態下的邊框間距 |
df-messenger-input-gutter |
選用 | 穩定版 | 使用者輸入內容的捲軸凹槽 |
df-messenger-input-info-font-size |
選用 | 14px | 使用者輸入內容中資訊訊息的文字大小 |
df-messenger-input-info-font-weight |
選用 | 正常 | 使用者輸入內容中資訊訊息的字體粗細 |
df-messenger-input-info-padding |
選用 | 14px 16px | 使用者輸入內容中資訊訊息的填補 |
df-messenger-input-info-line-height |
選用 | 20px | 使用者輸入內容中資訊訊息的行高 |
df-messenger-input-long-text-warning-display |
選用 | 無 | 如果設為 block，輸入內容超過 256 個字元時，系統會顯示警告訊息。只有在 max-query-length 屬性較高 (例如已停用) 時才會生效。其他文件。 |
df-messenger-input-warning-background |
選用 | #fef7e0 | 使用者輸入內容中警告訊息的背景 |
df-messenger-input-warning-color |
選用 | #410e0b | 使用者輸入內容中警告訊息的文字顏色 |
df-messenger-input-warning-icon-color |
選用 | #e37400 | 使用者輸入內容中警告訊息的圖示顏色 |
df-messenger-input-error-background |
選用 | #f9dedc | 使用者輸入內容中的錯誤訊息背景 |
df-messenger-input-error-color |
選用 | #410e0b | 使用者輸入內容中的錯誤訊息文字顏色 |
df-messenger-input-error-icon-color |
選用 | #b3261e | 使用者輸入內容中警告訊息的圖示顏色 |
驗證重疊畫面的樣式
使用已驗證的設定時，可為疊加層提供下列 CSS 變數：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-auth-background |
選用 | rgba(204, 204, 204, .8) | 顯示驗證時，代理程式對話方塊的背景 |
df-messenger-auth-button-background |
選用 | #0b57d0 | 驗證按鈕的背景 |
df-messenger-auth-button-font-family |
選用 | "Google Sans", "Helvetica Neue", sans-serif | 驗證按鈕的字型系列 |
df-messenger-auth-button-font-color |
選用 | 白色 | 驗證按鈕的文字顏色 |
df-messenger-auth-button-font-size |
選用 | 14px | 驗證按鈕的文字大小 |
df-messenger-auth-button-border |
選用 | 無 | 驗證按鈕的邊框 |
df-messenger-auth-button-border-radius |
選用 | 8px | 驗證按鈕的邊框半徑 |
意見回饋樣式
啟用答案回饋功能後，即可為回饋控制項提供下列 CSS 變數。
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
選用 | 8px | 「喜歡」和「不喜歡」按鈕之間的距離 |
df-messenger-message-feedback-icon-font-color |
選用 | #444746 | 「喜歡」和「不喜歡」按鈕的顏色 |
df-messenger-message-feedback-icon-font-color-active |
選用 | #444746 | 代表同意和不同意的圖示在啟用時的顏色 |
df-messenger-message-feedback-icon-border |
選用 | 無 | 「喜歡」和「不喜歡」按鈕的邊框 |
df-messenger-message-feedback-icon-border-radius |
選用 | 0 | 「喜歡」和「不喜歡」按鈕的邊框半徑 |
df-messenger-message-feedback-icon-background |
選用 | 無 | 背景：喜歡和不喜歡按鈕的背景 |
df-messenger-message-feedback-icon-background-hover |
選用 | 無 | 滑鼠懸停時「喜歡」和「不喜歡」按鈕的背景 |
df-messenger-message-feedback-icon-padding |
選用 | 0 | 「喜歡」和「不喜歡」按鈕的邊框間距 |
df-messenger-message-rich-feedback-spacing |
選用 | 10px | 豐富意見回饋中的元素間距 |
df-messenger-message-rich-feedback-padding |
選用 | 0 | 詳盡意見回饋的邊框間距 |
df-messenger-message-rich-feedback-background |
選用 | 無 | 豐富意見回饋的背景資訊 |
df-messenger-message-rich-feedback-border-radius |
選用 | 0 | 複合式意見回饋的邊框圓角半徑 |
df-messenger-message-rich-feedback-border |
選用 | 無 | 豐富意見回饋的邊框 |
df-messenger-rich-feedback-offset-left |
選用 | 0 | 左側位移 |