FastComments.com

在文档、书籍等中添加内联实时评论

FastComments Collab Chat 使用户能够突出显示并注释您网站上的任意文本内容,从而围绕特定文本选区创建关联的线程讨论。用户可以选择单词、句子或整段文本,直接在内容中启动协作对话。

此功能非常适用于编辑反馈、协作阅读环境、教育平台、文档审阅,以及任何希望将上下文讨论锚定到特定文本的场景。

请注意,这些文档是针对 Collab Chat 功能的。您可以为具有大量页面的内容(例如 Books)添加评论,使用 thread-per-page,而无需使用 collab chat。FastComments 也不会按每页或每线程收费。Collab Chat 专门用于当您 希望允许用户选择文本并对高亮部分发表评论时。

您可以在这里查看示例

示例 Internal Link

基本示例

使用 Collab Chat 的最简单方法是针对单个内容容器。此示例演示如何在文章上启用文本注释:

基本 Collab Chat 示例
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat</title>
6</head>
7<body>
8 <div id="article-content" style="min-height: 500px">
9 <h1>My Article Title</h1>
10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
12 </div>
13
14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
15 <script>
16 FastCommentsCollabChat(document.getElementById('article-content'), {
17 tenantId: 'demo'
18 });
19 </script>
20</body>
21</html>
22

使用自定义 URL ID 的示例(按书页、文章等)

默认情况下,Collab Chat 使用页面 URL 与元素路径和文本范围的组合来识别会话。您可以提供自定义的 urlId 来更好地控制对话如何分组:

带自定义 URL ID 的 Collab Chat 示例
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 FastCommentsCollabChat(document.getElementById('article-content'), {
5 tenantId: 'demo',
6 urlId: 'book-one-page-2'
7 });
8</script>
9

如果您的 URL 结构发生更改但希望保留相同的会话,或者希望在多个页面之间共享相同的会话注释,这会很有用。

深色模式示例

如果您的网站有深色背景,请启用深色模式支持以确保聊天 UI 显示正确:

带深色模式的 Collab Chat 示例
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat - Dark Mode</title>
6 <style>
7 body {
8 background-color: #1a1a1a !important;
9 color: #e0e0e0 !important;
10 font-family: system-ui, -apple-system, sans-serif;
11 padding: 20px;
12 margin: 0;
13 }
14 #article-content {
15 max-width: 800px;
16 margin: 0 auto;
17 background-color: #2d2d2d;
18 padding: 20px;
19 border-radius: 8px;
20 }
21 h1 {
22 color: #ffffff !important;
23 }
24 p {
25 color: #e0e0e0 !important;
26 line-height: 1.6;
27 }
28 .fastcomments-collab-chat-top-bar {
29 background-color: #2d2d2d !important;
30 color: #e0e0e0 !important;
31 border-bottom: 1px solid #444 !important;
32 }
33 </style>
34</head>
35<body>
36 <div id="article-content" style="min-height: 500px">
37 <h1>My Article Title</h1>
38 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
39 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
40 </div>
41
42 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
43 <script>
44 FastCommentsCollabChat(document.getElementById('article-content'), {
45 tenantId: 'demo',
46 hasDarkBackground: true
47 });
48 </script>
49</body>
50</html>
51

禁用顶部栏的示例

默认情况下,Collab Chat 会显示一个包含用户计数和讨论计数的顶部栏。您可以将其禁用:

禁用顶部栏的 Collab Chat 示例
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat - No Top Bar</title>
6</head>
7<body>
8 <div id="article-content" style="min-height: 500px">
9 <h1>My Article Title</h1>
10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
12 </div>
13
14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
15 <script>
16 FastCommentsCollabChat(document.getElementById('article-content'), {
17 tenantId: 'demo',
18 topBarTarget: null
19 });
20 </script>
21</body>
22</html>
23

带评论计数回调的示例

您可以使用 commentCountUpdated 回调跟踪评论何时被添加或更新:

带评论计数回调的 Collab Chat 示例
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 FastCommentsCollabChat(document.getElementById('article-content'), {
5 tenantId: 'demo',
6 commentCountUpdated: function(count) {
7 console.log('Total comments:', count);
8 document.getElementById('comment-badge').textContent = count;
9 }
10 });
11</script>
12

带多个部分的示例

您可以在页面的多个独立部分上初始化 Collab Chat。每个部分将拥有自己的独立注释:

在多个部分使用 Collab Chat 示例
Copy Copy
1
2<div id="intro-section">
3 <h2>Introduction</h2>
4 <p>Content for the introduction...</p>
5</div>
6
7<div id="main-section">
8 <h2>Main Content</h2>
9 <p>Content for the main article...</p>
10</div>
11
12<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
13<script>
14 // 在介绍部分初始化
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // 在主内容部分初始化
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

在在线书籍中添加实时评论 Internal Link

如果需要,您可以为每一页初始化 Collab Chat,并为每一页设置独立的线程,只需为 urlId 参数 传入像 book-one-page1 这样的值。此配置也适用于普通的评论小部件。

文本选择行为 Internal Link

How Text Selection Works

当用户在 Collab Chat 容器内选中文本时,小部件会捕获该选区并允许他们发起讨论。选区可以小到一个单词,也可以大到跨越不同元素的多段文本。

Selection Delay

在桌面设备上,用户选中文本与讨论提示出现之间有 3.5 秒的延迟。这可以防止当用户仅仅高亮文本以复制或阅读时界面闪烁。在移动设备上,由于触摸屏上的文本选择更为刻意,提示会立即出现。

Unique Conversation IDs

每个会话都会得到一个唯一的 urlId,它将页面 URL、DOM 元素路径和序列化的文本范围组合在一起。这确保每个文本选区都会创建一个可以稍后再次找到的唯一会话。

如果你在配置中提供了自定义的 urlId,它将与元素路径和文本范围组合以创建最终标识符。

Visual Highlights

当某个文本选区存在讨论时,该文本会获得视觉高亮。高亮通过背景颜色实现,并在悬停或相关聊天窗口打开时显示。

高亮系统的实现方式是将所选文本包装在一个可以应用样式的特殊元素中。这种方法确保即使底层 HTML 结构复杂,高亮也能保持准确。

Chat Window Positioning

当用户点击高亮或创建新的注释时,聊天窗口会出现在选中文本附近。小部件会基于可用的视口空间自动计算该窗口的最佳位置。

定位系统使用像 to-rightto-leftto-topto-bottom 这样的 CSS 类来指示聊天窗口应从高亮处向哪个方向展开。在移动设备(屏幕宽度小于 768px)上,聊天窗口始终以全屏形式显示,以提升可用性。

Chat Window Dimensions

在桌面端,聊天窗口宽度为 410px,带有 20px 的间距和一个指向高亮文本的 16px 视觉箭头。这些尺寸是固定的以确保一致的行为,但你可以使用 CSS 自定义外观。

Cross-Element Selections

用户可以选中跨越多个 HTML 元素的文本,例如从一段的中间高亮到另一段的开头。范围序列化系统可以正确处理这种情况,并会高亮所有被选中的文本,即使跨越元素边界。

Browser Compatibility

文本选择系统使用标准的 window.getSelection() API,该 API 在所有现代浏览器中受支持。对于旧版本的 Internet Explorer,会回退到 document.selection 以保证兼容性。

Selection Persistence

一旦为某个文本选区创建了会话,该注释即使在页面重新加载后也会保留。序列化的范围和 DOM 路径允许小部件在用户返回页面时将高亮恢复到完全相同的位置。

只要你的页面内容保持稳定,这个功能就能可靠工作。如果你更改了文本内容或重构了 HTML,现有注释可能不再与文本对齐。因此,最好在有活动注释的页面上避免重大内容更改,或者在必须更改内容时考虑迁移注释。

自定义 Internal Link

深色模式 支持

动态深色模式

如果您站点的深色模式是通过向 body 元素添加 .dark 类来控制的,Collab Chat UI 会自动响应此类,而无需重新初始化。该小部件的样式设计为响应此类的存在。

深色模式 CSS 示例
Copy Copy
1
2/* 您的深色模式 CSS */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

使用 CSS 自定义样式

您可以使用 CSS 自定义高亮、聊天窗口和其他元素的外观。该小部件会添加特定的类,您可以在样式表中针对这些类进行样式设置。

文本高亮使用 FastComments 的评论气泡样式系统,因此您对标准评论小部件所做的任何自定义也会影响 Collab Chat。

顶部栏 自定义

顶部栏显示在线用户数量和讨论数量。您可以通过提供一个自定义元素作为 topBarTarget 来自定义其位置:

自定义顶部栏位置
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

或者通过将其设置为 null 完全禁用:

禁用顶部栏
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

移动端行为

在宽度小于 768px 的屏幕上,Collab Chat 会自动切换到针对移动设备优化的布局。聊天窗口会以全屏方式出现,而不是浮动在文本旁,并且会移除选择延迟以实现更即时的交互。

此行为为内置功能,无需任何配置。该小部件会自动检测屏幕大小并相应调整。

聊天窗口外观

桌面端聊天窗口宽度为 410px,并带有指向高亮文本的 16px 箭头。窗口会根据可用视口空间自动定位,使用像 to-rightto-leftto-topto-bottom 这样的定位类。

您可以添加自定义 CSS 来调整这些窗口的颜色、字体、间距或其他视觉属性。聊天窗口使用与标准 FastComments 小部件相同的组件结构,因此它们会继承您对全局所做的任何自定义。

本地化

Collab Chat 支持与标准 FastComments 小部件相同的本地化选项。将 locale 选项设置为不同的语言以显示 UI 文本:

设置语言环境
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // 西班牙语
5});
6

FastComments 支持数十种语言。locale 设置会影响所有 UI 文本,包括提示、按钮和占位符文本。

继承的自定义选项

由于 Collab Chat 扩展了标准的评论小部件,它继承了来自基础小部件的所有自定义选项。这包括自定义 CSS 类、自定义翻译、头像自定义、日期格式化等更多选项。

有关可用自定义选项的完整列表,请参阅 FastComments 的主要自定义文档。

使用自定义字体

如果您站点使用自定义字体,Collab Chat UI 会从页面的 CSS 中继承这些字体。如果您希望浮动聊天窗口使用相同的字体,您可能需要创建一个小部件自定义规则,并在该规则的自定义 CSS 中使用 @import 导入任何字体。

实时同步 Internal Link

实时更新

Collab Chat 使用 WebSocket 连接在所有已连接用户之间实时同步所有会话。当有人创建新的注释、添加评论或删除讨论时,其他在相同页面的用户会立即看到更新,无需刷新。

WebSocket 同步如何工作

当你初始化 Collab Chat 时,组件会向 FastComments 服务器建立一个 WebSocket 连接。该连接在用户会话期间保持打开,并监听与当前页面相关的更新。

WebSocket 系统为 Collab Chat 使用三种类型的广播消息。new-text-chat 事件在有人在页面上创建新注释时触发。updated-text-chat 事件在有人更新现有会话时触发。deleted-text-chat 事件在有人删除注释时触发。

广播 ID 系统

为了防止回显效果(用户看到自己的操作被再次广播回去),每个更新都包含一个唯一的 broadcastId。当用户创建或更新注释时,客户端会为该操作生成一个 UUID。当 WebSocket 将更新广播回所有客户端时,发起操作的客户端会忽略该更新,因为它与自己的 broadcastId 匹配。

这确保了流畅的交互:用户无需等待通过服务器的往返即可立即在界面上看到自己的更改,同时仍然确保其他所有用户都能收到该更新。

实时用户计数

顶栏显示当前正在查看该页面的用户数量。随着用户加入或离开,此计数会实时更新。用户计数通过相同的 WebSocket 连接提供,并会根据连接和断开事件自动增减。

连接弹性

如果由于网络问题或服务器维护导致 WebSocket 连接中断,组件会自动尝试重新连接。在重新连接期间,用户仍然可以与现有注释进行交互,但在连接重新建立之前,他们无法看到其他用户的实时更新。

重新连接后,组件会重新同步以确保没有错过任何更新。这一过程是透明的,不需要用户干预。

带宽考虑

WebSocket 消息很轻量,只包含同步状态所需的基本信息。创建新注释通常使用不到 1KB 的带宽。系统还包括智能批处理,以在高活动时期减少消息频率。

你在 FastComments 仪表板上的使用指标会跟踪 pubSubMessageCountpubSubBandwidth,以便你监控跨站点的实时同步活动。

跨标签页同步

如果用户在多个浏览器标签页中打开相同页面,一个标签页的更新会立即出现在其他标签页。这通过相同的 WebSocket 同步机制工作,不需要任何额外配置。

安全性

WebSocket 消息通过安全连接(WSS)传输,并包含租户验证,以确保用户仅接收他们有权限查看的会话更新。服务器在广播操作之前会验证所有操作,以防止未授权的访问或篡改。


有问题吗?

这就是 FastComments Collab Chat 的全部内容!如果您有任何问题、需要实现方面的帮助,或有功能建议,请在下面告诉我们或联系您的支持团队。

有关实际示例,请查看 Govscent.org,该站点在生产环境中使用了 Collab Chat。