如果對網頁 SDK 小工具 UI 進行本文未提及的自訂作業，系統將不支援，且可能會導致非預期的行為。如需更進階的自訂功能，Google 建議使用無頭 SDK。
為確保主題自訂項目顯示正常，Google 建議您先在測試環境中測試變更，再部署至正式環境。
啟動器設計
你可以自訂啟動器的圖示、大小、位置和顏色。
啟動器
開啟圖示
「關閉」圖示
圖示
如果預設啟動器的 UI 與您的品牌不符，您可以透過自己的 SVG 檔案自訂啟動器的圖示。你無法新增 SVG 檔案的網址， 必須是 SVG 檔案本身。
ccaas.config({ launcherOpenIcon: '<svg ....>', launcherCloseIcon: '<svg ....>',})
大小
啟動器的預設寬度和高度為 80px。你可以變更為其他大小：
#ccaas-widget {
--launcher-size: 60px;
}
自訂邊框
你可以自訂啟動器邊框的下列選項：
- 框線顏色
- 框線寬度
- 投射陰影 (增加或減少)
--launcher-border-color
--launcher-border-width
--launcher-shadow
啟動器顏色
根據預設，啟動器會使用強調色。
{
--launcher-border-color: var(--accent-10);
--launcher-background-color: var(--accent-10);
--launcher-color: var(--accent-9-contrast);
}
你可以自訂啟動器，使用不同顏色。例如：
#ccaas-widget {
--launcher-border-color: var(--green-10);
--launcher-background-color: var(--blue-10);
--launcher-color: white;
}
停用啟動器
基於美觀考量，您可能想隱藏 Web SDK 啟動器，改用主動式即時通訊觸發條件，或以程式輔助方式啟動即時通訊。您可以使用 disableLauncher 隱藏或停用啟動器的 UI：
ccaas.config({
disableLauncher: true
})
如果啟動器已停用，你可以透過下列方式開啟小工具：
ccaas.show()
小工具設計
小工具
標誌
字型
為使用者介面選取不同字型。
--font-en：Roboto、Verdana、Helvetica Neue
--font-zh：PingFang SC、Hiragino Sans GB、Droid Sans Fallback、Microsoft YaHei
--font-ja：Hiragino Sans、Meiryo
強調色
您可以透過下列設定，選取預先定義的顏色選項，自訂強調色 color：
ccaas.config({
accent: 'green',
})
預先定義的顏色包括 blue、green、purple、orange、yellow、gold、red。
自訂口音
如果預先定義的選項不符合您的業務需求，您可以使用 CSS 變數自訂樣式。
#ccaas-widget {
--accent-1: #fbfdff;
--accent-2: #f4faff;
--accent-3: #e6f4fe;
--accent-4: #d5efff;
--accent-5: #c2e5ff;
--accent-6: #acd8fc;
--accent-7: #8ec8f6;
--accent-8: #5eb1ef;
--accent-9: #0090ff;
--accent-10: #0588f0;
--accent-11: #0d74ce;
--accent-12: #113264;
--accent-contrast: white;
--chat-input-selection-color: var(--accent-11);
}
位置
如果掛接點是 #ccaas-widget，您可以使用下列指令更新小工具位置：
#ccaas-widget {
--ujet-right: 20px;
--ujet-bottom: 10px;
}
標誌
選擇要在小工具中顯示的自訂 logo。
ccaas.config({
logo: 'https://example.com/logo.png'
})
隱藏代理程式標誌框線
如果掛接點是 #ccaas-widget，您可以使用下列程式碼範例隱藏代理商標誌邊框：
#ccaas-widget {
--head-logo-shadow: none;
}
其他元件
除了強調色和位置，網頁 SDK 小工具還提供更多 CSS 變數，可設定小工具中使用的其他元件。
如果掛接點是 #ccaas-widget，您可以使用下列程式碼範例自訂這些項目：
#ccaas-widget {
--variable-name: value;
}
一般 CSS 變數
--text-font: 預設文字字型系列。
--text-color: 預設文字顏色。
--end-color: 結束按鈕的預設顏色 (結束即時通訊、結束即時通訊、結束共同瀏覽)
確認圖示
SDK 各頁面顯示的確認圖示可自訂。您可以將預設圖示換成自訂圖示，並控制大小和顏色。
--confirmation-icon-size
--confirmation-icon-color
按鈕
您可以精細控管不同按鈕類型的自訂作業。下表說明同時自訂不同類型的按鈕時，預期會發生的行為。
| 已套用按鈕自訂設定 | 結果 |
| 無 | 預設行為 (所有按鈕樣式都會根據主要主題顯示)。 |
| 一般按鈕自訂設定 | 所有按鈕 (對話方塊/即時通訊畫面除外) 都會根據客戶設定的自訂項目顯示。包括功能表按鈕。
如果未指定任何一般按鈕自訂變數，系統會套用預設行為。 |
| 自訂選單按鈕
對話方塊按鈕自訂 |
系統會根據 --menu-button 變數顯示選單按鈕。
系統會根據 如果未指定任何選單 / 對話方塊按鈕自訂變數，系統會套用預設行為。 |
| 一般按鈕自訂設定
自訂選單按鈕 對話方塊按鈕自訂 |
系統會根據 --menu-button 變數顯示選單按鈕
對話方塊按鈕會根據 不是選單按鈕或對話方塊按鈕的按鈕，會根據一般自訂項目顯示。 如果未指定任何一般 / 選單 / 對話方塊按鈕自訂變數，系統會對該按鈕套用預設行為。 |
一般按鈕
如果 SDK 中其他按鈕沒有自己的 CSS 變數，就會使用「一般按鈕」設定和自訂選項。
--general-button-default-background
--general-button-default-border
--general-button-default-color
--general-button-default-outline
--general-button-hover-background
--general-button-hover-border
--general-button-hover-color
--general-button-hover-outline
--general-button-active-background
--general-button-active-border
--general-button-active-color
--general-button-active-outline
--general-button-focus-background
--general-button-focus-border
--general-button-focus-color
--general-button-focus-outline
主要按鈕
--primary-button-default-background<
--primary-button-default-color
--primary-button-focus-background
--primary-button-focus-color
--primary-button-hover-background
--primary-button-hover-color
--primary-button-active-background
--primary-button-active-color
--primary-button-disabled-background
--primary-button-disabled-color
次要按鈕
--secondary-button-default-background
--secondary-button-default-border
--secondary-button-default-outline
--secondary-button-default-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-outline
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-outline
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-outline
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color
次要按鈕 (反向)
--secondary-button-inverse-default-background
--secondary-button-inverse-default-border
--secondary-button-inverse-default-outline
--secondary-button-inverse-default-color
--secondary-button-inverse-hover-background
--secondary-button-inverse-hover-border
--secondary-button-inverse-hover-outline
--secondary-button-inverse-hover-color
--secondary-button-inverse-active-background
--secondary-button-inverse-active-border
--secondary-button-inverse-active-outline
--secondary-button-inverse-active-color
--secondary-button-inverse-disabled-background
--secondary-button-inverse-disabled-border
--secondary-button-inverse-disabled-outline
--secondary-button-inverse-disabled-color
--secondary-button-inverse-focus-background
--secondary-button-inverse-focus-border
--secondary-button-inverse-focus-outline
--secondary-button-inverse-focus-color
選單按鈕
自訂選單按鈕。
--menu-button-default-background
--menu-button-default-border
--menu-button-default-text
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-text
--menu-button-active-background
--menu-button-active-border
--menu-button-active-text
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-text
--menu-button-focus-outline
自訂選單按鈕
對話方塊按鈕
例如模式或彈出式視窗。
--dialog-background
--dialog-text
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-text
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-text
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-text
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-text
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-text
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-text
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-text
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-text
--dialog-secondary-button-active-outline
對話標題
--options-menu-icon-color-default
--options-menu-icon-color-hover
--options-menu-icon-color-active
--options-menu-icon-color-focus
--options-menu-icon-background-default
--options-menu-icon-background-hover
--options-menu-icon-background-active
--options-menu-icon-background-focus
將即時通訊設為靜音
ccaas.config({
enableMuteChat: true,
})
即時通訊泡泡
--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-text
--chat-bubble-agent-border-top-left
--chat-bubble-agent-border-top-right
--chat-bubble-agent-border-bottom-right
--chat-bubble-agent-border-bottom-left
--chat-bubble-user-background
--chat-bubble-user-text
--chat-bubble-user-border-top-left
--chat-bubble-user-border-top-right
--chat-bubble-user-border-bottom-right
--chat-bubble-user-border-bottom-left
### 自訂即時通訊泡泡
訊息
--message-event-general-font
--message-event-general-font-size
--message-event-general-font-weight
--message-event-general-color
--message-event-error-font
--message-event-error-font-size
--message-event-error-font-weight
--message-event-error-color
--message-event-confirmation-font
--message-event-confirmation-font-size
--message-event-confirmation-font-weight
--message-event-confirmation-color
--message-progress-color
--message-button-font
--message-button-text-size
--message-button-text-color
--message-button-font-style
--message-button-default-background
--message-button-default-border
--message-button-hover-background
--message-button-focus-background
--message-button-focus-text
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style
會後虛擬服務專員
--post-session-background
--post-session-padding
