Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

自訂主題

如果對網頁 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，您可以使用下列程式碼範例隱藏 Agent 標誌邊框：

#ccaas-widget {
--head-logo-shadow: none;
}

其他元件

除了強調色和位置，Web 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` 變數顯示選單按鈕。系統會根據 `--dialog-primary-button` 和 `--dialog-secondary-button` 變數顯示「對話方塊按鈕」如果未指定任何選單 / 對話方塊按鈕自訂變數，系統會套用預設行為。
一般按鈕自訂設定自訂選單按鈕對話方塊按鈕自訂	系統會根據 `--menu-button` 變數顯示選單按鈕對話方塊按鈕會根據 `--dialog-primary-button` 和 `--dialog-secondary-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

顯示會後視窗的範例。

自訂主題 透過集合功能整理內容 你可以依據偏好儲存及分類內容。