除本文档中记录的自定义设置之外，对 Web SDK widget 界面应用的所有自定义设置均不受支持，并且可能会导致意外行为。如果您需要更高级的自定义设置，Google 建议使用无头 SDK。
为确保主题自定义设置按预期显示，Google 建议您先在测试环境中测试更改，然后再将其部署到生产环境。
启动器设计
您可以自定义启动器的图标、大小、位置和颜色。
启动器
打开图标
“关闭”图标
图标
如果默认启动器的界面与您的品牌不符，您可以使用自己的 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，您可以使用以下命令更新 widget 位置：
#ccaas-widget {
--ujet-right: 20px;
--ujet-bottom: 10px;
}
徽标
选择要在 widget 中显示的自定义 logo。
ccaas.config({
logo: 'https://example.com/logo.png'
})
隐藏代理徽标边框
如果装载点为 #ccaas-widget，您可以使用以下代码示例隐藏代理徽标边框：
#ccaas-widget {
--head-logo-shadow: none;
}
其他组件
除了强调色和位置之外，Web SDK widget 还提供了更多 CSS 变量来配置 widget 中使用的其他一些组件。
如果挂载点为 #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
