自定义页面 是 Guide Enterprise 服务模式的一个附加功能。此功能允许您向您的帮助中心添加独特的功能和个性化的网页,是 自定义主题的功能扩展。
在此功能演示中,找到一个已开发的单页应用,终端用户可用来注册成为 VIP 成员,从而获得为其组织提供的量身定制的支持。
这个单页面应用范例是使用 React 和 Typescription 开发的。尾流 CSS也与节点邮件 一起用于样式目的, 以配置流程,发送电邮确认给成功注册的用户。
因为这是一个 React 应用程序,该范例完成了将其编译为单个文件所需的 Weblack 步骤。然后,将文件嵌入您的帮助中心主题并上传。请查看以下部分,了解每组步骤:
开发
自定义页面允许您使用任何首选的网络技术堆栈开发页面。一个受欢迎的技术堆栈首选设置是使用 React.json 和节点开发来进行后台开发。与任何选定的技术一样,每个代码都有其自己需要实施的细目和规格。请查阅以下了解这些技术考虑的概要。
React
因为自定义页面是使用您自己的功能构建的,因此" 创建 React"应用 是使用单页应用程序框架的良好开发选择。
上面的 VIP Support 注册页面演示发出了两个请求。一个请求会生成一个安全密钥,用于我们的后台身份验证。另一个请求是提交实际数据请求。
自定义页面范例会在 Zendesk 内对用户个人资料和组织创建更改。如果您的自定义页面也会发出这些类型的请求,请实现一种方法,以便在发出请求之前从后台验证该数据。尽管在后台处理请求应该有数据验证,但通过从正面运行验证,特别是当数据来自用户输入如表格时,您将能够确保只有整洁且可使用的数据到达您的 Zendesk 实例。
自定义页面只是帮助中心的一部分,这一点也很重要。任何用于您的自定义页面的功能、品牌打造或样式,都应与整个帮助中心相一致。
需要考虑的一些设计方面包括以下点。
- 身份验证:哪些类型的用户可以访问此页面?专员、所有已通过身份验证的用户,还是每个用户?
- 导航:
- 无需在您的自定义页面上开发页首或导航。您帐户的 Guide 团队可设置导航和页首。因为自定义页面嵌入您的主题,当前主题的页首和导航也将应用到此页面。
- 考虑此页面将在帮助中心的哪个位置。就像从帮助中心提取功能一样,自定义页面本身也位于默认帮助中心架构之外。用户可通过嵌入任意帮助中心模板或您的帮助中心预定义的页面,如您的主页中的链接访问这些页面。您的自定义页面的 URL 将采用此格式:
https://{domain_name}/hc[/{locale}]/p/{page_name}
- 页面样式:考虑您正在使用的样式库,以及该样式是否与帮助中心主题的其余部分一致。确保您的字体和调色板选择与主题匹配。
- 图像处理:由于您需要手动配置和捆绑您的自定义页面,因此无法在本地存储图像或资产。嵌入之前,先上传它们到您的帮助中心主题。如需了解关于上传资产到您的主题的逐步指南,请查阅文章:使用您自己的主题资产用于帮助中心。
JavaScript
自定义页面为您提供空白画布,以便为您的访问者打造更加个性化的体验。与使用节点.JS 和 Free 等工具构建的后台服务器交互的功能使您可直接与您已经拥有的系统和数据库连接。您还可以使用您偏好的技术堆栈构建全新的服务,这些堆栈与您的帮助中心整合,以获得无缝衔接的用户体验。
此范例应用使用以下函数。
- 一个开发的 快捷 API,用于接收用户在终端表格中提交的用户和组织信息。
-
发送 API 请求到 Zendesk Support,以使用 节点抓取创建和更新相关用户和组织。
- 使用验证器.JS验证 表格提交数据 。
在建立服务器端自定义页面服务时,请注意安全并保护您的 API 路由。请考虑使用 JWT 等工具建立请求身份验证,以保护您的应用程序。要阅读更多关于 JWT 的信息,请从 JWT 网站查看这篇文章:JSON 网络密钥介绍。
范例应用使用以下身份验证。
- 用于请求 JWT 密钥以授权表格提交 API 请求的 身份验证端点。
- 使用jsonwebtoen 生成和验证 JWT 密钥的 身份验证模式。
根据您建立的应用程序,您的 CORS(跨来源资源共享)政策是另一个需要考虑的事项。确保从客户端接收请求的转接已启用 CORS。如果您知道哪个域名发送请求,请明确指定这些域名。否则,请使用通配符"*"。如需了解更多关于 CORS 的信息,请从 Firefox 网站查看这篇文章:跨来源资源共享(CORS)。
捆绑
当您的自定义页面开发完成后,使用 Weblack 捆绑您的 React 应用。因为所有自定义页面都需要嵌入您的主题,将自定义页面编译为单个 HTML 文件。创建 React 应用 带有其自己的捆绑和优化。然而,由于目标是返回单个 index.html
文件中,该范例有其自己的 Weblack 配置 ,可以精简这个过程。
嵌入
当您建立应用程序后,将其嵌入您的帮助中心。导航到新创建的生成目录。您将在这里找到一些创建新的自定义页面所必需的文件。
index.html
- 静态/CSS/捆绑.min.CSS
- 静态/捆绑.min.JS
的 index.html
文件是要放置到自定义页面的代码。访问为项目创建的 JavaScript 和 CSS。首先,将 JavaScript 和 CSS 文件作为 资产 上传到您的帮助中心。然后,从您的 index.html
文件到自定义页面,并调整资产的文件路径。
在下面找到一个在代码编辑器中显示的例子。
完成后,发布您的自定义页面。如需了解更多关于在帮助中心管理内容的资源,请查阅文章:Guide 资源。
翻译免责声明:本文章使用自动翻译软件翻译,以便您了解基本内容。 我们已采取合理措施提供准确翻译,但不保证翻译准确性
如对翻译准确性有任何疑问,请以文章的英语版本为准。