Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

主题自定义

除了本文档中介绍的自定义设置之外，对 Web SDK widget 界面应用的其他任何自定义设置均不受支持，并且可能会导致意外行为。如果您需要更高级的自定义，Google 建议您使用无头 SDK。

为确保主题自定义设置按预期显示，Google 建议您先在测试环境中测试更改，然后再将其部署到生产环境。

启动器设计

您可以自定义启动器的图标、大小、位置和颜色。

启动器设计 widget。

启动器
打开图标
“关闭”图标

图标

如果默认启动器的界面与您的品牌不符，您可以使用自己的 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);
}

停用启动器

出于美观考虑，您可能希望隐藏 Web SDK 启动器，改为使用主动聊天触发器或以编程方式启动聊天。您可以使用 disableLauncher 隐藏或停用启动器的界面：

ccaas.config({
  disableLauncher: true
})

停用启动器后，您可以通过以下方式打开微件：

ccaas.show()

widget
徽标

字体

为界面选择不同的字体。

--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 Colors 色阶模型。预定义的强调色（default、blue、green、purple、orange、yellow、gold、red）来自此色阶，可使用 accent 配置直接使用。对于 Radix Colors 网站上的任何其他命名色阶（mint、crimson、cyan），请将其 12 步调色板复制到 --accent-1 到 --accent-12 值中。

位置

如果装载点为 #ccaas-widget，您可以使用以下代码更新 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 widget 还提供了更多 CSS 变量，用于配置 widget 中使用的其他一些组件。

如果装载点为 #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 气泡

--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

示例：一个聊天窗口，其中突出显示了消息气泡。

Chat 气泡自定义

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

主题自定义 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。