我的服务模式是什么？

在 Suite Growth 及更高的服务模式中可用在所有 Guide 服务模式中可用

标准 Copenhagen 主题允许终端用户对帮助中心文章进行投票。在本配方中，您将编辑主题代码，以在用户踩文章时显示跟进消息。

被踩消息包含一个指向新请求页面的链接，该页面含有一张工单表格。用户可以填写工单表格，留下文章反馈。该表格使用自定义工单字段捕获文章 URL，提交后将在 Zendesk Support 中创建一张工单。

关于本配方

只有 Zendesk Support 管理员才能完成本配方。本配方涉及以下任务：
  • 任务 1：启用匿名投票
  • 任务 2：为文章 URL 创建自定义工单字段
  • 任务 3：添加自定义 CSS
  • 任务 4：更新文章页面模板
  • 任务 5：添加自定义 JavaScript
  • 任务 6：测试更改

本配方假定您正在编辑标准 Copenhagen 主题。要编辑其他主题或对自定义 Copenhagen 主题进行类似更改，您可能需要更改代码示例。

本配方还使用预填工单表格。预填工单表格需要使用模板化 API 版本 2 的主题。要查看主题版本，请参阅关于 Guide 模板化版本。

注意：本配方需要编辑 CSS、页面模板和 JavaScript。当您编辑标准主题时，它会另存为自定义主题。自定义主题不受 Zendesk 支持， 并不会在新功能发布时自动更新。请参阅关于帮助中心内的标准主题和自定义主题。

任务 1：启用匿名投票

如果帮助中心对匿名访问者可见，您可以启用匿名投票作为可选步骤。通过匿名投票，终端用户无需登录即可对帮助中心文章进行投票。

要启用匿名投票，请按照允许用户在不登录的情况下对知识库文章投票中的说明操作，然后返回本文章。

任务 2：为文章 URL 创建自定义工单字段

首先，创建一个自定义工单字段以捕获帮助中心文章 URL。

为文章 URL 创建自定义工单字段
  1. 在管理中心，单击侧栏中的对象和规则图标 ()，然后选择工单 > 字段。
  2. 单击添加字段。
  3. 选择文本字段类型。

  4. 输入帮助文章 URL 作为显示名称。
  5. 在权限下，选择客户可编辑。
  6. 在客户下，输入帮助文章 URL 作为向客户显示的标题。

  7. 单击保存。

    如果您的帐户只使用一张工单表格，新字段将自动显示在该工单表格中。如果您使用多张工单表格，则必须手动将新字段添加到所有要包含它的工单表格中。

  8. 在字段页面上，复制帮助文章 URL 字段的字段 ID。该 ID 会在本配方的后面部分用到。

任务 3：添加自定义 CSS

接下来，将被踩消息的自定义 CSS 添加到主题中。

将自定义 CSS 添加到主题中
  1. 在 Guide 中，打开主题的代码编辑器。有关说明，请参阅编辑帮助中心主题。
  2. 单击 style.css。
  3. 将以下代码粘贴到文件底部：
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    该代码可添加 .downvote-message 类的 CSS 规则。您将使用该类隐藏被踩消息，直到用户踩文章为止。当该消息显示时，该类还会设置消息样式。

  4. 要更新帮助中心的当前主题，请单击发布。反之，请单击保存。

任务 4：更新文章页面模板

接下来，将被踩消息的 HTML 添加到主题的文章页面模板中。

更新文章页面模板
  1. 在 Guide 中，打开主题的代码编辑器。
  2. 单击 article_page.hbs。
  3. 在
    的结尾标签前添加以下 HTML 代码段：
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}">Please tell us
      why.</a></p>
</div>
    在该代码段中：
    • 将 CUSTOM_FIELD_ID 替换为您在为文章 URL 创建自定义工单字段中创建的帮助文章 URL 字段的字段 ID
    • 将 HTTPS://SUBDOMAIN.ZENDESK.COM 替换为帮助中心的基本 URL
    该 HTML 会在每篇文章的投票按钮下方添加一条被踩消息。消息的父级 div 使用您在为文章 URL 创建自定义工单字段中添加的类 downvote-message。该类的 CSS 将对所有用户隐藏消息。在本配方的后面部分，您将添加自定义 JavaScript，以在用户投反对票时显示消息。

    该消息包含一个指向新请求页面的链接，该页面含有一张工单表格。该链接通过 URL 参数使用当前文章 URL 预填充该表格的帮助文章 URL 字段。要了解更多关于预填工单表格的信息，请参阅创建预填工单表格。

  4. 如果您的帐户只使用一张工单表格，请跳到下一步。如果您的帐户有多张工单表格，请将 URL 参数 &ticket_form_id=FORM_ID 添加到 HTML 代码段的 href 值末尾。在该参数中，将 FORM_ID 替换为工单表格 ID。例如：
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_12345=https://example.zendesk.com{{url}}&ticket_form_id=67890">Please tell us
      why.</a></p>
</div>

    工单表格必须对终端用户可见。要检查或更改工单表格的可见度，请参阅创建多张工单表格以支持不同的请求类型。

  5. 审阅模板的元素
    。它应如下所示：
    <div class="article-votes">
  <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
  <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
    {{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}}
    {{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}}
  </div>
  <small class="article-votes-count">
    {{vote 'label' class='article-vote-label'}}
  </small>
  <div class="downvote-message">
    <p>We're sorry to hear that.</p>
    <p><a href="{{page_path 'new_request'}}?tf_67890=https://example.zendesk.com{{url}}">Please tell us
        why.</a></p>
  </div>
</div>
  6. 要更新帮助中心的当前主题，请单击发布。反之，请单击保存。

任务 5：添加自定义 JavaScript

添加一些 JavaScript 以在用户踩文章时显示被踩消息。

将自定义 JavaScript 添加到主题中
  1. 在 Guide 中，打开主题的代码编辑器。
  2. 单击 script.js。
  3. 将以下代码粘贴到文件底部：
    // Display message for article downvotes
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".article-votes-controls")) {
    const voteButtons = document.querySelectorAll(".article-vote");
    const voteMessage = document.querySelector(".downvote-message");

    voteButtons.forEach((button) => {
      button.addEventListener("click", () => {
        let isDownButton = button.matches(".article-vote-down");
        let isPressed = button.matches(".button-primary");

        if (isDownButton && !isPressed) {
          voteMessage.style.display = "block";
        } else {
          voteMessage.style.display = "none";
        }
      });
    });
  }
});

    如果用户单击否投票按钮，JavaScript 将显示您在更新文章页面模板中添加的被踩消息。如果用户重置投票或将投票更改为是，JavaScript 将重新隐藏该消息。

  4. 要更新帮助中心的当前主题，请单击发布。反之，请单击保存。

任务 6：测试更改

测试新投票功能，确保其如期工作。

测试更改
  1. 在 Guide 中，打开主题的代码编辑器。
  2. 单击预览。
  3. 在“预览”窗口中，选择终端用户的预览用户角色和文章页面的模板。
  4. 导航到帮助中心中的一篇文章。在该文章底部，单击这篇文章有帮助吗？下的否投票按钮。

    随即显示一条包含请告诉我们原因链接的简短消息。

  5. 单击请告诉我们原因链接。

    随即打开一个包含工单表格的新请求页面。工单表格的帮助文章 URL 字段应包含相关帮助中心文章的 URL。

    如果需要，您可以提交表格以创建测试工单。

  6. 导航到帮助中心的另一篇文章，然后单击否投票按钮。
  7. 显示被踩消息后，单击是投票按钮。被踩消息随即消失。
  8. 如果您未更改并已准备推出帮助中心的当前主题，可以将自定义主题设置为当前主题。请参阅更改帮助中心的当前主题。
由 Zendesk 提供技术支持