配置 Guide 界面

Guide 使用您定义的默认品牌和渠道按钮来确定 Guide 小部件在网站上的外观。

最佳做法

  • 与市场营销部门合作，选择与网站相匹配的渠道按钮图像和品牌颜色。

  • 在整个网站上使用一致的渠道按钮和品牌。

  • 如果您有多个网站，请确定是否需要为每个网站定义独特品牌。

  • 要使用默认品牌颜色，则在定义按钮或模板时不要设置 Theme color。

  • 要覆盖默认的品牌颜色，可以在特定的按钮或模板中设置不同的颜色。 请注意以下事项：

    • 如果您为模板设置 Theme color，则该颜色将覆盖品牌颜色设置。

    • 如果您为模板设置 Theme color，并为按钮设置 Theme color ，则按钮颜色将覆盖模板和品牌颜色设置。

  • 对于高级自定义样式，您可以使用 Guide API 或使用 客户代表 创建自定义外观。

创建品牌

品牌化设置默认用于模板、按钮和主动优惠的颜色。 Guide 提供了 Default 品牌化，您可以根据需要进行自定义。 如果需要，您可以创建多个品牌。 例如，如果您计划在不同网站上提供 Guide 模板，则可以对每个网站使用独特品牌。 在定义显示模板或主动优惠的规则时，请使用 Set Guide Branding 操作来确定要使用的品牌。

  1. 单击应用程序选择器 应用程序选择器的图标 并选择Guide.

  2. 单击 Branding。

  3. 单击 New Branding。

  4. 为 Branding Title 输入唯一的品牌名称。

  5. 将 Theme Color 设置为用于 Guide 小部件的主颜色。 通过输入十六进制值或单击颜色滴管选择某种颜色来设置颜色。

    Theme Color 用于：

    • 标题背景颜色。

    • 最小化按钮。
    • 渠道按钮背景。

    除非出现以下情况，否则使用它：

    • 渠道按钮设置覆盖品牌颜色的主题颜色。

    • 模板设置覆盖品牌颜色的主题颜色。

    • 您可以在主要设置之外设置更多品牌首选项。 例如，如果您为主动优惠设置按钮颜色。

  6. 将 Font Color 设置为显示 Guide 小部件的文本使用的颜色。 标题中的文本以及最小化和返回按钮中出现的箭头所使用的颜色。

    为了帮助视障人士，请在 Theme Color 与 Font Color 之间保持 4.5:1 的对比度。 在线工具可用于检查对比度。

  7. （可选）使用 General、Guide Template、Knowledge Base 和 Proactive Offer 选项卡进一步微调品牌。

    General选项卡
    字段 详细信息
    Width (EM)

    Guide 小部件的宽度，单位为 ems。 默认宽度为 23.125 em。

    Height (EM)

    Guide 小部件的高度，单位为 ems。 默认高度为 40 em。
    Close Button Icon Color 用于小部件关闭图标的颜色。
    Close Button Background Color 用于小部件关闭图标的背景颜色。
    Guide Template选项卡
    字段 详细信息
    Background Color 用于客户门户模板的背景颜色。

    Font and Icon Color

    用于客户门户模板的字体和图标颜色。
    Heading Font Size (EM)

    用于客户门户模板的标题大小（单位为em）。

    为了获得最佳结果，请选择要预览的客户门户模板，然后根据需要调整标题字体大小。
    Subheading Font Size (EM)

    用于客户门户模板的副标题字体大小（单位为 ems）。

    为了获得最佳结果，请选择要预览的客户门户模板，然后根据需要调整副标题字体大小。
    Knowledge Base选项卡
    字段 详细信息
    Background Color 查看知识库文章时使用的背景颜色。

    Font and Icon Color

    查看知识库文章时使用的字体和图标颜色。
    Proactive Offer选项卡
    字段 详细信息
    Heading Font Size (EM)

    用于主动优惠标题的字体大小（单位为 ems）。

    为了获得最佳结果，请查看主动优惠预览图像，然后根据需要调整标题字体大小。

    Body Text Font Size (EM)

    用于主动优惠中的正文的字体大小（单位为ems）。

    为了获得最佳结果，请查看主动优惠预览图像，然后根据需要调整正文字体大小。
    Header Color 用于主动优惠标题区域的颜色。
    Background Color 用于主动优惠背景的颜色。
    Font Color 用于主动优惠的字体颜色。 其包括标题文本和正文。
    Primary Button Background and Font Color 主动优惠中主要行动号召按钮的背景和字体颜色。
    Secondary Button Background and Font Color 主动优惠中次要按钮的背景和字体颜色。
    Position on Mobile 主动优惠是否应显示在移动设备屏幕的 Top 或 Bottom 处。
  8. 通过从页面右侧的下拉列表中选择模板来预览品牌设置。 或者，要预览主动优惠的品牌，请单击 Proactive Offer 选项卡。 如果您自定义这些设置，则右侧会显示预览。

  9. 单击 Default 可使其成为默认品牌。 将品牌设置为默认值后，它将应用于所有现有模板和新的模板。

  10. 单击 Save。

与 Ems 合作

Guide 使用 ems 指定界面元素的大小。 Ems 允许在不同设备上响应式调整界面元素的大小。 Guide 中 em 的默认大小是 13 像素。 您可以使用 setFontSize API 更改此设置。

创建渠道按钮

为计划在 Guide 中提供的每个渠道关闭 联系人与坐席或机器人交互的一种方式。 通道可以是语音、电子邮件、聊天、社交媒体等。创建一个按钮。 创建按钮后，即可将其与入口点相关联。 在定义模板时，可以通过为入口点设置不同的按钮来覆盖按钮。

  1. 单击应用程序选择器 应用程序选择器的图标 并选择Guide。

  2. 单击 Buttons。 将显示“按钮”页面并列出先前创建的所有按钮。

    按钮页面。 该页面列出了创建的所有按钮，以及使用这些按钮的模板和入口点。

  3. 单击 New Button。

  4. 为该按钮输入 Title。

  5. 单击 Upload ，上传该按钮的 Icon。

    图标图像必须小于 50 KB，建议使用 SVG 文件。

  6. 设置按钮的Background 偏好

    • 选择Solid 以使用渠道按钮的背景颜色。 将Theme color 字段留空表示使用为品牌设置的默认渠道按钮背景颜色。 或者使用颜色选择器选择一种不同的颜色作为按钮的背景颜色。 通过输入十六进制值或单击颜色滴管选择某种颜色来设置颜色。

    • 选择Transparent 可使用按钮透明背景。

  7. 单击 Save。

为翻译添加语言变体

您可以创建自定义语言变体，以与 Guide 一起使用。 此外，您还可以编辑 Guide 用户界面元素的标签。

默认语言的翻译将在未来版本中提供。

添加自定义语言

  1. 单击应用程序选择器 应用程序选择器的图标 并选择Guide。

  2. 单击 Localization。

  3. 单击 New Language，添加新语言。

    字段 详细信息
    Name 输入名称来标识语言。

    Language

    从下拉列表中选择 Language 。
    Country 从下拉列表中选择 Country 。
    Fallback 选择一种Fallback 在特定标签没有翻译时要使用的语言。
  4. 单击 Save。 将出现 Guide 提供的默认标签。
  5. 对于每个 Translation Key，输入 Translation Value。 这是在 Guide 小部件中显示给访问者的字符串。 您不能更改 Guide 提供的默认标签的 Translation Key。
  6. 如果需要，可单击页面底部的添加来创建新的翻译键。 设置 Translation Key 和 Translation Value。 您可以为您创建的任何新标签更改 Translation Key。 如果添加了新的翻译键，请确保提供访问者所使用的所有语言的翻译值。

  7. 单击保存。

编辑语言标签

  1. 单击应用程序选择器 应用程序选择器的图标 并选择Guide。

  2. 单击 Localization。

  3. 单击要编辑的语言旁边的 Edit。

  4. 滚动到要编辑的标签并更新 Translation Value。 例如，您可以将开始聊天的按钮标签从 Begin Chat 更改为 Start Chat。

  5. 单击 Save。

与 Guide 小部件交互

访问者可以使用鼠标或键盘在按钮间移动，与 Guide 小部件交互。 请注意，对于使用 Mac 和 Safari 或 Firefox 浏览器的访问者来说，除非在浏览器中启用，否则键盘导航功能会受到限制。 使用 Chrome 浏览器时，默认情况下按键可正常工作。