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

自訂主題

如果對網頁 SDK 小工具使用者介面進行任何自訂，但未列於本文，則不支援，且可能導致非預期的行為。如需更進階的自訂功能，建議使用 Headless SDK。

為確保主題自訂設定能正常顯示，Google 建議您先在測試環境中測試變更，再部署至正式環境。

啟動器設計

您可以自訂啟動器的圖示、大小、位置和顏色。

啟動器設計小工具。

啟動器
「開啟」圖示
關閉圖示

圖示

如果預設啟動器的 UI 與品牌形象不符，您可以使用自己的 SVG 檔案自訂啟動器的圖示。您無法在 SVG 檔案中加入網址，必須是 SVG 檔案本身。

ccaas.config({
  launcherOpenIcon: '<svg ....>',
  launcherCloseIcon: '<svg ....>',
})

圖示自訂範例。

大小

啟動器的預設寬度和高度為 80px。您可以變更為其他大小：

#ccaas-widget {
  --launcher-size: 60px;
}

互動狀態

啟動器的邊框、背景和前景顏色會依互動狀態 (預設、懸停、聚焦和啟用) 設定。每個狀態都有專屬的 CSS 變數，且都採用相同的命名模式：--launcher-{state}-{property}。

自訂啟動器邊框

您可以自訂啟動器邊框的下列選項：

邊框 (顏色、寬度和樣式，使用 CSS 邊框簡寫設定，每個互動狀態)。
投射陰影 (增加或減少)。

啟動器邊框會使用 CSS 邊框簡寫，根據每個互動狀態進行設定。沒有單獨的變數可用於框線顏色或框線寬度。

--launcher-default-border
--launcher-hover-border
--launcher-focus-border
--launcher-active-border
--launcher-shadow

啟動器顏色

根據預設，啟動器會使用強調色。

#ccaas-widget {
  --launcher-default-border: 6px solid var(--accent-9);
  --launcher-default-background: var(--accent-9);
  --launcher-default-color: var(--accent-contrast);
}

懸停、焦點和啟用狀態也適用相同模式 (每個狀態都有自己的 *-border、*-background 和 *-color 變數)。「啟動器邊框自訂」一節列出了四個 *-border 變數。其餘八個背景和前景狀態變數如下：

--launcher-default-background
--launcher-default-color
--launcher-hover-background
--launcher-hover-color
--launcher-focus-background
--launcher-focus-color
--launcher-active-background
--launcher-active-color

您可以自訂啟動器，使用其他顏色。例如：

#ccaas-widget {
  --launcher-default-border: 6px solid var(--green-10);
  --launcher-default-background: var(--blue-10);
  --launcher-default-color: white;
}

如要設定啟動器的懸停、聚焦和啟用狀態樣式，請使用相符的狀態前置字元重複上述模式：

#ccaas-widget {
  --launcher-hover-background: var(--blue-11);
  --launcher-focus-background: var(--blue-11);
  --launcher-active-background: var(--blue-11);
}

停用啟動器

基於美觀考量，您可能想隱藏網頁 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',
})

預先定義的顏色包括 default、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);
}

12 個強調色階會遵循 Radix UI 色彩階層模型。預先定義的強調色 (default、blue、green、purple、orange、yellow、gold、red) 來自這個色階，可透過 accent 設定使用。如果是 Radix Colors 網站上的其他具名色階 (mint、crimson、cyan)，請將其 12 階調色盤複製到 --accent-1 到 --accent-12 值。

位置

如果掛接點是 #ccaas-widget，您可以使用下列指令更新小工具位置：

#ccaas-widget {
  --ujet-right: 20px;
  --ujet-bottom: 10px;
}

標誌

選擇要在小工具中顯示的自訂logo。

ccaas.config({
  logo: 'https://example.com/logo.png'
})

您可以自訂下列小工具邊框選項：

框線顏色
框線寬度
投射陰影 (增加或減少)

--widget-border-color
--widget-border-width
--widget-shadow

隱藏代理標誌框線

如果掛接點是 #ccaas-widget，您可以使用下列程式碼範例隱藏服務專員標誌邊框：

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

其他元件

除了強調色和位置之外，Web SDK 小工具還提供更多 CSS 變數，可用於設定小工具中使用的其他部分元件。

如果掛接點是 #ccaas-widget，您可以使用下列程式碼範例自訂：

#ccaas-widget {
  --variable-name: value;
}

下一節會列出各元件可用的 CSS 變數。

一般 CSS 變數

--text-font: 預設文字字型系列。

--text-color: 預設文字顏色。

--end-color: 結束按鈕 (結束對話、退出對話、結束共同瀏覽) 的預設顏色

確認圖示

您可以自訂 SDK 各頁面顯示的確認圖示。您可以使用自訂圖示取代預設圖示，並控制大小和顏色。

--confirmation-icon-size

--confirmation-icon-color

按鈕

您可以精細控制不同按鈕類型的自訂設定。下表說明自訂不同類型按鈕組合時的預期行為。

已套用按鈕自訂設定	結果
無	預設行為 (所有按鈕樣式都會根據主要主題顯示)。
一般按鈕自訂	所有按鈕 (不含對話方塊/Chat 畫面) 都會根據客戶設定的自訂項目顯示。包括選單按鈕。如果「未」指定任何一般按鈕自訂變數，系統會套用預設行為。
自訂選單按鈕對話方塊按鈕自訂	選單按鈕會根據 `--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-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color

次要按鈕 (反色)

--inverse-button-default-background
--inverse-button-default-border
--inverse-button-default-outline
--inverse-button-default-color
--inverse-button-hover-background
--inverse-button-hover-border
--inverse-button-hover-outline
--inverse-button-hover-color
--inverse-button-active-background
--inverse-button-active-border
--inverse-button-active-outline
--inverse-button-active-color
  
--inverse-button-disabled-background
--inverse-button-disabled-border
--inverse-button-disabled-color
--inverse-button-focus-background
--inverse-button-focus-border
--inverse-button-focus-outline
--inverse-button-focus-color

例如選取佇列和管道。

--menu-button-default-background
--menu-button-default-border
--menu-button-default-color
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-color
--menu-button-hover-outline
--menu-button-active-background
--menu-button-active-border
--menu-button-active-color
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-color
--menu-button-focus-outline

對話方塊按鈕

例如：互動視窗或彈出式視窗。

--dialog-background
--dialog-color
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-color
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-color
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-color
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-color
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-color
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-color
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-color
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-color
--dialog-secondary-button-active-outline

範例顯示對話方塊按鈕，其中包含結束即時通訊的選項。

Chat 標頭

--options-menu-icon-default-color
--options-menu-icon-hover-color
--options-menu-icon-active-color
--options-menu-icon-default-background
--options-menu-icon-hover-background
--options-menu-icon-active-background
--options-menu-icon-focus-background

聊天視窗範例，標題經過強調。

將對話設為靜音

ccaas.config({
  enableMuteChat: true,
})

聊天泡泡

--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-color
--chat-bubble-agent-border
--chat-bubble-agent-border-radius
--chat-bubble-user-background
--chat-bubble-user-color
--chat-bubble-user-border
--chat-bubble-user-border-radius

範例：聊天室視窗，其中訊息泡泡醒目顯示。

自訂聊天泡泡

Message：

--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-family
--message-button-font-size
--message-button-default-background
--message-button-default-border
--message-button-default-color
--message-button-default-font-style
--message-button-hover-background
--message-button-hover-border
--message-button-hover-color
--message-button-hover-font-style
--message-button-focus-background
--message-button-focus-border
--message-button-focus-color
--message-button-focus-font-style
--message-button-active-background
--message-button-active-border
--message-button-active-color
--message-button-active-font-style
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style

工作階段後虛擬服務專員：

--post-session-background
--post-session-padding

顯示工作階段後視窗的範例。

自訂表單連結：

--form-card-background
--form-card-title-color
--form-card-status-color
--form-card-subtitle-color
--form-card-image-height
--form-card-title-font-size
--form-card-title-font-weight
--form-card-border-radius
--form-card-subtitle-font-weight
--form-card-subtitle-font-size

自訂表單：

--form-title-font-size
--form-title-font-weight
--form-title-color
--form-title-font-style
--form-header-font-size
--form-header-font-weight
--form-header-color
--form-header-font-style
--form-footer-font-size
--form-footer-font-weight
--form-footer-color
--form-footer-font-style
--form-field-border-radius
--form-field-cursor-color
--form-field-label-font-size
--form-field-label-font-weight
--form-field-label-color
--form-field-label-font-style
--form-field-active-border-color
--form-field-active-border-width
--form-field-inactive-border-color
--form-field-inactive-border-width
--form-field-list-selection-checkbox-color

自訂主題

啟動器設計

圖示

大小

互動狀態

自訂啟動器邊框

啟動器顏色

停用啟動器

小工具設計

字型

強調色

自訂強調色

位置

標誌

自訂小工具邊框

隱藏代理標誌框線

其他元件

一般 CSS 變數

確認圖示

按鈕

一般按鈕

主要按鈕

次要按鈕

次要按鈕 (反色)

選單按鈕

對話方塊按鈕

Chat 標頭

將對話設為靜音

聊天泡泡

自訂聊天泡泡

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

啟動器設計

圖示

大小

互動狀態

自訂啟動器邊框

啟動器顏色

停用啟動器

小工具設計

字型

強調色

自訂強調色

位置

標誌

自訂小工具邊框

隱藏代理標誌框線

其他元件

一般 CSS 變數

確認圖示

按鈕

一般按鈕

主要按鈕

次要按鈕

次要按鈕 (反色)

選單按鈕

對話方塊按鈕

Chat 標頭

將對話設為靜音

聊天泡泡

自訂聊天泡泡

自訂主題