我的服务模式是什么？
所有 Suite： Team、Growth、Professional、Enterprise 或 Enterprise Plus
注意：本文章适用于使用消息传送 Web Widget 的帐户。如果您正在使用 Web Widget（经典），请参阅配置 Web Widget（经典）中的组件。

您可以从 Web Widget页面的样式标签为Web Widget配置许多外观相关的设置。例如，您可以设置公司的主要颜色、小组件位置，以及外观详情。这些设置适用于全局，因此每个访问者都可以看到相同的品牌打造。

然而，有时您可能想要测试不同的颜色方案，仅在某些页面上使用特殊颜色，或根据访问者类型更改颜色。对于这些场景，您可以通过 消息传送Web Widget自定义 API 使用 JavaScript 实时控制小组件的颜色。

本文章包含以下主题：
  • 了解Web Widget自定义 API
  • 自定义小组件颜色
  • 主题提示和最佳实践

 

了解Web Widget自定义 API

Web Widget API 是一个 JavaScript API。当您使用 JavaScript 更改 Web Widget 的颜色时，您的代码会向小组件发送实时指令，以更新其外观。这些更改将立即应用，但仅适用于访问运行您的自定义代码的特定页面的人员。

如果您将 JavaScript 自定义保留在页面上，则每次页面加载时，小组件都会显示您选择的颜色。如果访问者访问的页面没有您的代码，或者您移除了代码，则小组件将恢复其默认管理中心外观。

设置方式 谁可以看到更改？ 何时恢复？
管理中心品牌颜色 任何地方的每个人 当您在管理中心更新颜色时
API 自定义 仅在带有自定义代码的页面上 当代码从页面移除时
注意：API 自定义将在您的代码所在的任何地方运行，包括在测试和过渡网站上。它在管理中心预览窗口中不起作用。

自定义小组件颜色

要使用Web Widget API 自定义颜色，在小组件加载后随时从您的网页调用 zE("messenger:set", "customization")。小组件会立即应用新的颜色。

zE("messenger:set", "customization", {
  theme: {
    primary: "#FE5E41",
    onPrimary: "#FFFFFF",
    message: "#F3C178",
    onMessage: "#5F0F00",
    action: "#B0DB43",
    onAction: "#000000",
    businessMessage: "#fff",
    onBusinessMessage: "#F10404",
    background: "#DFE0E2",
    onBackground: "#F10404",
    error: "#FF1744",
    onError: "#FFFFFF",
    notify: "#FF007F",
    onNotify: "#FFFFFF"
  }
})

的 theme 对象定义了小组件界面各种属性的颜色。您无需指定每个属性。您遗漏的任何属性都将使用您管理中心的默认值。

所有颜色值都必须是标准颜色代码，如十六进制、rgb、hsl，或命名颜色。未知属性或无效颜色值将在浏览器控制台中触发错误，并且颜色不会更改。

下图显示了控制 Web Widget 外观各个方面的主题属性。

属性 描述
主要 小组件的主要颜色，用于消息传送启动器按钮、顶部栏、页脚突出显示以及其他关键 UI 元素。
onPrimary 在主要颜色的背景上显示的文本和图标的颜色，例如启动器按钮图标或主要操作按钮。
消息 来自终端用户的气泡式交谈的背景颜色。
onMessage 终端用户在线交谈气泡内的文本颜色。
businessMessage 来自专员或智能机器人的在线交谈气泡图的背景颜色——由 Zendesk 或您的团队发送的消息。
onBusinessMessage 专员或智能机器人在线交谈气泡内的文本和图标的颜色。
背景 气泡式交谈和输入字段后面的小组件窗口的主要背景颜色。
onBackground 小组件背景上显示的默认文本和图标颜色。
错误 警报元素的背景颜色，例如错误消息或上传失败。
onError 错误消息的文本和图标颜色。
通知 某些通知横幅或消息的背景颜色。它适用于特定的系统消息，可能并不总是可见。
onNotify 通知背景中某些通知横幅或消息中使用的文本和图标颜色。
操作 操作按钮的背景颜色，例如创建新对话、提交消息、表格或轮播按钮。
onAction 操作按钮背景上的文本和图标颜色。
onSecondaryAction 小组件内辅助操作按钮的文本和图标颜色，例如“取消”或“返回”。

如果不指定主题属性，则使用默认值。有关使用Web Widget API 自定义 Web Widget 颜色的更多信息，请参阅开发者文档中的 自定义Web Widget颜色 。

主题提示和最佳实践

以下是自定义消息传送Web Widget颜色的一些设计技巧：

  • 测试您的颜色方案，有意对属性使用粗体、高对比度的颜色，以便于观察小组件界面中的变化。
  • 从简单的开始，更改一些突出的颜色，例如 primary 或 action，，其在更新所有内容之前匹配您的品牌。
  • 始终在文本之间选择足够的对比度（ on* 属性）和背景以满足无障碍标准。
  • 如果任何颜色组合使文本难以阅读或看起来令人困惑，即使它与您的品牌相匹配，也请更改它以使其清晰可见。
  • 通知横幅或错误消息等小组件元素的颜色或行为可能因帐户而异。进行更改后，务必测试关键的工作流程。

翻译免责声明：本文章使用自动翻译软件翻译，以便您了解基本内容。 我们已采取合理措施提供准确翻译，但不保证翻译准确性

如对翻译准确性有任何疑问，请以文章的英语版本为准。

由 Zendesk 提供技术支持