这篇文章将帮助您解决将个性化和独特的功能整合到 Zendesk 帮助中心的挑战。通过指导您完成将 自定义页面 添加到 Guide Enterprise 服务模式的过程，它说明了如何使用 React.js 和 Node.js 等技术开发、捆绑和嵌入自定义页面。例如，您可以创建自定义 VIP Support 注册页面，使其与您现有的帮助中心设计无缝衔接，从而提供一致且量身定制的用户体验。
此单页面应用示例使用 React 配合 TypeScript 作为前端，使用 Node.js 作为后端。对于成功注册的新用户，TailWin CSS 会为应用设置样式，而 Nodemailer 会 处理电邮确认。
由于这是一个 React 应用，示例中涵盖了将其编译为单个文件的 Weback 步骤。将该文件嵌入并上传帮助中心主题。对于每组步骤，请按照以下部分进行操作：
开发：使用 React 结合 TypeScript 和 Node.js 创建自定义页面。
自定义页面使您可使用任何首选的网络技术堆栈进行开发。许多人更喜欢结合使用 React.js 和 Node.js 进行后端开发。每种技术都有其自己的细微差别和规格。以下是一些技术注意事项：
React
使用 Create React App 创建 自定义页面，因为它是一个单页面应用程序框架。上述 VIP 支持注册页面会发出两个请求。生成一个安全密钥用于后端身份验证。另一个提交实际数据。
示例自定义页面更改了 Zendesk 中的用户个人资料和组织。如果您的专页发出了类似请求，请在发出请求之前验证来自前端的数据。后端验证至关重要，但前端验证可确保数据干净，尤其是来自用户输入的数据。
请记住，自定义页面只是帮助中心的一部分。确保任何功能、品牌打造或样式与帮助中心保持一致。
考虑这些设计方面：
-
身份验证：确定谁可以访问此页面：专员、所有已通过身份验证的用户，或每个用户
-
导航：
-
请勿在您的自定义页面上开发标头或导航。这些设置由您帐户的 Guide 团队负责。自定义页面将继承当前主题的页首和导航。
-
将此页面放置在帮助中心适当位置。与 功能一样，自定义页面也存在于默认的帮助中心架构之外。用户可通过任何帮助中心模板或预定义页面（如主页）中的链接访问这些页面。自定义页面 URL 遵循以下格式：
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
页面样式：选择与帮助中心主题一致的样式库。确保您的字体和调色板匹配现有的主题。
-
图像处理：由于您将手动配置和捆绑自定义页面，因此无法在本地存储图像或资产。请在嵌入前将其上传到您的帮助中心主题。有关分步指南，请参阅文章：将自己的主题资产用于帮助中心。
Node.js
自定义页面提供了一个空白的画布，以便为访问者打造个性化的体验。使用 Node.js 和Express 等工具，您可以直接连接到现有的系统和数据库。您还可以使用首选技术堆栈创建新服务，将其与帮助中心整合，以获得无缝的用户体验。
示例应用使用以下函数。
-
一个已开发的 Express API，用于接收前端表格提交的用户和组织信息。
-
发送 API 请求到 Zendesk Support，以便使用 Node-Fetch 创建和更新相关用户和组织。
-
使用 Nodemailer成功提交表格后，向用户发送 确认电邮通知 。
在构建服务器端自定义页面服务时，请注意安全，并保护您的 API 路由。使用 JWT 等工具建立请求身份验证，保护您的应用程序。有关 JWT 的更多详情，请参阅 JWT 网站文章：JSON 网络密钥简介。
此示例应用使用以下身份验证。
-
供前端请求 JWT 密钥来授权对表格提交 API 的请求 的 身份验证端点。
-
身份验证模块 ，使用 jsonwebtoken生成并验证 JWT 密钥。
根据您构建的应用程序，考虑您的 CORS（跨域资源共享）政策。确保从客户端接收请求的路由已启用 CORS。如果您知道发送请求的域名，请明确指定这些域名。否则，使用通配符 *更新。有关 CORS 的更多信息，请参阅 Mozilla 网站文章：跨域资源共享 (CORS)。
捆绑服务：配置 Weback 以捆绑自定义页面
完成自定义页面的开发后，使用 Weback 捆绑您的 React 应用。由于所有自定义页面都需要嵌入您的主题中，因此请将自定义页面整理到一个 HTML 文件中。Create React App 有其自己的捆绑和优化功能。但是，由于目标是返回单个 index.html 文件中定义的，该示例有其自己的 web工单配置 以简化此过程。
嵌入：将项目整合到您的主题中，并将其发布到帮助中心
构建应用程序后，将其嵌入帮助中心。导航到新创建的生成目录。在这里您可找到一些创建新的自定义页面所需的文件。
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
的 index.html 文件是要放入自定义页面的代码。访问为项目创建的 JavaScript 和 CSS。首先，将 JavaScript 和 CSS 文件作为 资产 上传到您的帮助中心。然后，从您的 index.html 文件进入自定义页面，调整资产的文件路径。
下面是代码编辑器中的显示方式示例。
完成后，发布您的自定义页面。有关在帮助中心管理内容的更多资源，请参阅文章：Guide 资源。
翻译免责声明：本文章使用自动翻译软件翻译，以便您了解基本内容。 我们已采取合理措施提供准确翻译，但不保证翻译准确性
如对翻译准确性有任何疑问，请以文章的英语版本为准。