除了此处记录的自定义项之外，对 Web SDK 微件界面应用的所有自定义项均不受支持，并且可能会导致意外行为。如果您需要更高级的 自定义项，Google 建议您使用 Headless SDK。
为确保主题自定义项按预期显示，Google 建议您先在测试环境中测试更改，然后再将其部署到生产环境。
启动器设计
您可以自定义启动器的图标、大小、位置和颜色。
启动器
打开图标
关闭图标
Icons
如果默认启动器的界面与您的品牌不符，您可以使用自己的 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 隐藏或停用启动器的界面：
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;
}
其他组件
除了强调色和位置之外，Web SDK 微件还提供了更多 CSS 变量来配置微件中使用的一些其他组件。
如果装载点是 #ccaas-widget，您可以使用以下代码示例自定义它们：
#ccaas-widget {
--variable-name: value;
}
常规 CSS 变量
--text-font: 默认文本字体系列。
--text-color: 默认文本颜色。
--end-color: 结束按钮（结束聊天、退出聊天、结束共同浏览）的默认颜色
确认图标
您可以自定义在整个 SDK 的各个页面上显示的确认图标。您可以将默认图标替换为自定义图标，并控制其大小和颜色。
--confirmation-icon-size
--confirmation-icon-color
按钮
您可以精细地控制不同按钮类型的自定义。下表介绍了组合自定义不同类型的按钮时的预期行为。
| 应用的按钮自定义项 | 结果 |
| 无 | 默认行为（所有按钮样式均按照主主题显示）。 |
| 常规按钮自定义项 | 所有按钮 （对话框/Chat 界面除外）均按照客户设置的自定义项显示。这包括菜单按钮。
如果未 指定任何常规按钮自定义变量，则应用默认行为。 |
| 菜单按钮自定义项
对话框按钮自定义项 |
菜单按钮 按照 --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
Chat 气泡自定义
消息
--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
