前端实现

本页将介绍如何在您的前端网站上安装前端 Javascript 的最基本要求。
按照以下步骤开始实现前端库

步骤1：添加 Javascript

这是您需要在页面上尽可能高的位置添加的 Javascript，最好是在头部。
在下面的脚本中有 三个需要替换的内容：
  1. 将 window.fasttrackbrand 替换为您的集成管理员提供的品牌名称。这将是一个硬编码的值，在您的品牌的测试环境和生产环境中都是相同的。
  2. 用当前登录用户的 sid 动态替换 window.sid 变量。这个 sid（会话 id）将成为 Operator API 认证端点的载荷。
  3. 在下面脚本的底部有一个名为 fastTrackCrmScript.src 的属性。这个属性有两个不同的值供您使用；一个用于测试环境，一个用于生产环境。确保根据当前环境使用正确的值。
使用站内通知和使用站内通知 + 富收件箱之间的唯一区别是主配置对象。
站内通知和富收件箱
站内通知（不含富收件箱）

步骤2：添加 HTML

必需： 用于容纳站内通知和富收件箱的 HTML / Markdown 的主要 div 元素是：
将此元素尽可能高地放置在您的 HTML 文档中，最好是直接在打开 <body> 标签后。无论您只使用站内通知和/或富收件箱，您都需要这个 div。

✅ 站内通知完成！

您现在已经实现了在前端使用站内通知的最低要求。如果您想同时实现对富收件箱的支持，请继续阅读 ⬇️

实现富收件箱支持

正如您可能已经看到的，上面的代码示例有两个选项卡；一个显示仅启用站内通知的示例，另一个示例显示同时启用站内通知和富收件箱。它们都在同一个库中，但要启用富收件箱，您需要执行一些额外的步骤：
  1. 在主配置对象中启用富收件箱功能（查看上面的代码示例）
  2. 向您的前端代码添加两个更多的 HTML 元素。您添加到页面中的 id 为 fasttrack-crm 的 div 具有显示收件箱本身的能力，但在大多数情况下，您会希望在页面上有某种指示器，显示用户在其收件箱中有多少未读消息。可能您还想要一个按钮来打开/关闭收件箱。
这里我们看到一个按钮的示例，它有一个子 span 元素来保存未读消息的计数。如果未读计数为零，Javascript 库将隐藏用于未读计数的 span 元素。
当点击按钮时，将调用函数 window.FasttrackCrm.toggleInbox()。如果富收件箱是关闭的，此函数将打开它。

✅ 富收件箱完成

如果您已经进行到这一步，您已经实现了站内通知和富收件箱。

步骤3：应用您自己的设计

如果您想覆盖收件箱中的样式，所有样式都应该包装在 CSS id #fasttrack-crm 内。这样可以保护您的网站 CSS，并允许您轻松地定位收件箱中的 CSS 类。在调用集成脚本之前放置一个 CSS 块。

示例

如果您愿意，您可以根据是站内通知还是富收件箱消息来为通知设置不同的样式。您还可以为整个收件箱消息/突出显示视图设置样式，或者根据收件箱消息是已读还是未读来为收件箱消息列表设置样式。以下是一些 CSS 示例：
请继续阅读下一页以验证集成，然后执行测试发送。