您可以設定 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 |
選用 | normal | 標題列文字的字母間距。 |
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 |
選用 | normal | 標題列中標題文字的行高。 |
df-messenger-titlebar-title-letter-spacing |
選用 | normal | 標題列中標題文字的字母間距。 |
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 |
選用 | normal | 標題列中副標題文字的行高。 |
df-messenger-titlebar-subtitle-letter-spacing |
選用 | normal | 標題列中副標題文字的字母間距。 |
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 |
選用 | normal | 代理對話訊息的字型粗細。 |
df-messenger-message-bot-background |
選用 | #ecf3fe | 代理傳送的訊息背景。 |
df-messenger-message-bot-border |
選用 | 無 | 代理傳送的訊息邊框。 |
df-messenger-message-bot-font-color |
選用 | #1f1f1f | 代理傳送的訊息文字顏色。 |
df-messenger-message-bot-font-weight |
選用 | normal | 代理傳送訊息的字型粗細。 |
df-messenger-message-user-background |
選用 | #e1e3e1 | 使用者傳送的訊息背景。 |
df-messenger-message-user-border |
選用 | 無 | 使用者傳送訊息的邊框。 |
df-messenger-message-user-font-color |
選用 | #1f1f1f | 使用者傳送的訊息文字顏色。 |
df-messenger-message-user-font-weight |
選用 | normal | 使用者傳送訊息的字型粗細。 |
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 | 使用者訊息右下角的邊框半徑，會覆寫一般半徑。只有在設定 user-actor-image 時才會啟用。僅適用於堆疊中的最後一則訊息。 |
df-messenger-message-stack-spacing |
選用 | 10px | 兩則連續訊息之間的間距。 |
df-messenger-message-bot-stack-border-top-left-radius |
選用 | 8px | 連續代理訊息的左上角邊框半徑，會覆寫代理左上角半徑。只有在設定 bot-actor-image 時才會啟用。僅適用於堆疊中的第一則訊息。 |
df-messenger-message-bot-stack-border-top-right-radius |
選用 | 8px | 連續代理訊息的右上角邊框半徑，會覆寫代理右上角半徑。只有在設定 bot-actor-image 時才會啟用。僅適用於堆疊中的第一則訊息。 |
df-messenger-message-bot-stack-border-bottom-left-radius |
選用 | 8px | 連續代理訊息的左下角邊框半徑，會覆寫代理左下角半徑。只有在設定 bot-actor-image 時才會啟用。僅適用於堆疊中的最後一則訊息。 |
df-messenger-message-bot-stack-border-bottom-right-radius |
選用 | 8px | 連續代理訊息的右下角邊框半徑，會覆寫代理右下角半徑。只有在設定 bot-actor-image 時才會啟用。僅適用於堆疊中的最後一則訊息。 |
df-messenger-message-user-stack-border-top-left-radius |
選用 | 8px | 連續使用者訊息的左上角邊框半徑，會覆寫使用者左上角半徑。必須設定 user-actor-image 才會生效。 |
df-messenger-message-user-stack-border-top-right-radius |
選用 | 8px | 使用者連續訊息的右上角框線半徑，會覆寫使用者右上角半徑。只有在設定 user-actor-image 時才會啟用。僅適用於堆疊中的第一則訊息。 |
df-messenger-message-user-stack-border-bottom-left-radius |
選用 | 8px | 連續使用者訊息的左下角邊框半徑，會覆寫使用者左下角半徑。只有在設定 user-actor-image 時才會啟用。僅適用於堆疊中的最後一則訊息。 |
df-messenger-message-user-stack-border-bottom-right-radius |
選用 | 8px | 連續使用者訊息的右下角邊框半徑，會覆寫使用者右下角半徑。只有在設定 user-actor-image 時才會啟用。僅適用於堆疊中的最後一則訊息。 |
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 |
選用 | normal | 代理撰寫內容時，顯示文字的字型粗細。 |
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-message-bot-writing-border-radius |
選用 | 8px | 代理撰寫訊息時，顯示訊息的邊框半徑。 |
df-messenger-chat-scroll-button-align |
選用 | center | 「跳至底部」按鈕的對齊方式。允許的值包括 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 |
選用 | 999px | 「跳至底部」按鈕的邊框半徑。 |
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 則可將演員圖片放在右側，訊息放在左側。只有在設定 bot-actor-image 屬性時，才會使用這個旗標。 |
df-messenger-message-user-actor-order |
選用 | row-reverse | 演員圖片和訊息的順序。使用 row-reverse 可將演員圖片放在右側，訊息放在左側；使用 row 則可將演員圖片放在左側，訊息放在右側。只有在設定 user-actor-image 屬性時，才會使用這個旗標。 |
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 則可將演員圖片置於底部。只有在設定 bot-actor-image 或 user-actor-image 屬性時，才會使用這個旗標。 |
df-messenger-message-actor-border-radius |
選用 | 999px | 執行者圖片的邊框半徑。 |
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 |
選用 | normal | 使用者輸入內容的字型粗細。 |
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 |
選用 | normal | 使用者輸入內容中資訊訊息的字型粗細。 |
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 | 左側豐富意見回饋的偏移量。 |