您可以設定 CSS 變數，自訂聊天對話方塊的樣式。
一般樣式
下列 CSS 變數提供一般樣式選項：
| 屬性 | 輸入政策 | 預設值 | 說明 |
|---|---|---|---|
df-messenger-font-family |
選用 | 「Google Sans」、「Helvetica Neue」、無襯線 | 在小工具中使用的字型系列 |
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 |
選用 | 480 像素 | 即時通訊視窗的高度 |
df-messenger-chat-window-width |
選用 | 320 像素 | 即時通訊視窗的寬度 |
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」、無襯線 | 標題列中標題文字的字型系列 |
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」、無襯線 | 標題列中副標題文字的字型系列 |
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」、無襯線 | 服務專員對話訊息的字型系列 |
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 |
選用 | 無 | 定義「Jump to Bottom」按鈕的顯示方式，將其設為 flex 可啟用按鈕 |
df-messenger-chat-scroll-button-align |
選用 | 中心 | 「Jump to Bottom」按鈕的對齊方式，允許的值包括 flex-start、center、flex-end |
df-messenger-chat-scroll-button-container-padding |
選用 | 8px | 「Jump to Bottom」按鈕周圍容器的邊框間距 |
df-messenger-chat-scroll-button-text-display |
選用 | 內嵌 | 在「Jump to Bottom」按鈕中顯示圖示旁的文字，使用 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 像素 | 「Jump to Bottom」按鈕的邊框半徑 |
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」、無襯線 | 使用者輸入內容的字型系列 |
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」、無襯線 | 驗證按鈕的字型系列 |
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 | 左側的偏移 |