
语言 🇨🇳 简体中文
入门
配置
自定义
高级
在文档、书籍等中添加内联实时评论
FastComments Collab Chat 使用户能够突出显示并注释您网站上的任意文本内容,从而围绕特定文本选区创建关联的线程讨论。用户可以选择单词、句子或整段文本,直接在内容中启动协作对话。
此功能非常适用于编辑反馈、协作阅读环境、教育平台、文档审阅,以及任何希望将上下文讨论锚定到特定文本的场景。
请注意,这些文档是针对 Collab Chat 功能的。您可以为具有大量页面的内容(例如 Books)添加评论,使用 thread-per-page,而无需使用 collab chat。FastComments 也不会按每页或每线程收费。Collab Chat 专门用于当您 希望允许用户选择文本并对高亮部分发表评论时。
您可以在这里查看示例。
入门 
快速开始
开始使用 Collab Chat 很简单。您需要 FastComments Collab Chat 脚本、包含要注释文本的 HTML 元素,以及包含您的 Tenant ID 的配置对象。
安装
将 Collab Chat 脚本添加到您的页面:

基本实现
下面是一个最小示例:
Run 
Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your FastComments dashboard.
工作原理
初始化后,用户可以在目标元素内选择任意文本。短暂延迟后(桌面端为 3.5 秒),会出现提示,允许他们开始讨论。创建讨论后,文本上会出现视觉高亮。其他用户可以将鼠标悬停或点击该高亮以查看并参与讨论。所有讨论会在所有访问者之间实时同步。
在线演示
您可以在我们的在线演示页面查看 Collab Chat 的实际效果。
后续步骤
现在基础功能已就绪,您可以在配置选项指南中自定义外观和行为。查看文本选择行为指南以了解文本选择的工作方式。在自定义指南中了解样式和暗色模式支持。对于高级集成,请参阅 API 参考。
前端库
所有 FastComments 前端库(react、vue、angular 等)都包含 Collab Chat。
示例 
基本示例
使用 Collab Chat 的最简单方法是针对单个内容容器。此示例演示如何在文章上启用文本注释:
Run 
使用自定义 URL ID 的示例(按书页、文章等)
默认情况下,Collab Chat 使用页面 URL 与元素路径和文本范围的组合来识别会话。您可以提供自定义的 urlId 来更好地控制对话如何分组:

如果您的 URL 结构发生更改但希望保留相同的会话,或者希望在多个页面之间共享相同的会话注释,这会很有用。
深色模式示例
如果您的网站有深色背景,请启用深色模式支持以确保聊天 UI 显示正确:
Run 
禁用顶部栏的示例
默认情况下,Collab Chat 会显示一个包含用户计数和讨论计数的顶部栏。您可以将其禁用:
Run 
带评论计数回调的示例
您可以使用 commentCountUpdated 回调跟踪评论何时被添加或更新:

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

在在线书籍中添加实时评论 
如果需要,您可以为每一页初始化 Collab Chat,并为每一页设置独立的线程,只需为 urlId 参数
传入像 book-one-page1 这样的值。此配置也适用于普通的评论小部件。
配置选项 
概览
FastComments Collab Chat 扩展了标准的 FastComments 评论小部件,因此继承了基础小部件的所有配置选项,同时增加了一些特定于文本注释的选项。
必需的配置
tenantId
需要提供您的 FastComments Tenant ID。您可以在您的 FastComments 仪表盘 中找到它。

Collab Chat 特定选项
urlId
默认情况下,Collab Chat 会根据页面 URL、元素的 DOM 路径和选定的文本范围为每个会话生成唯一标识符。您可以使用自定义的 urlId 覆盖此行为。

当您的 URL 结构可能发生变化但希望保留相同的会话,或希望在多个页面之间共享注释时,这很有用。
topBarTarget
控制显示顶部栏(显示用户计数和讨论计数)。设置为 null 可完全禁用顶部栏,或者提供一个 DOM 元素以在特定位置渲染它。

hasDarkBackground
当页面具有深色背景时启用暗色模式样式。此检测是自动的,但有时需要手动覆盖。

commentCountUpdated
每当评论计数更改时触发的回调函数。可用于更新徽章或页面标题等 UI 元素。

继承的配置选项
由于 Collab Chat 扩展了标准评论小部件,您可以使用基础 FastComments 小部件的任何配置选项。以下是一些常用选项:
locale
设置小部件 UI 的语言。FastComments 支持数十种语言。

readonly
将所有会话设为只读。用户可以查看现有注释,但无法创建新注释或回复。

sso and simpleSSO
使用单点登录与您的身份验证系统集成。

有关身份验证选项的完整详情,请参阅 SSO 文档。
maxReplyDepth
控制回复的嵌套层级深度。默认情况下,Collab Chat 将此设置为 0,表示所有评论为平级(没有嵌套回复)。如果您想要线程化的会话,可以更改此设置。

内部配置
以下选项由 Collab Chat 自动设置,不应被覆盖:
对于 Collab Chat,productId 会自动设置为 3。floating-chat 扩展会自动加载以提供聊天窗口功能。该小部件会自动检测移动设备(屏幕宽度低于 768px)并相应地调整 UI。
完整示例
下面是一个展示多个配置选项的示例:

有关从基础小部件继承的所有可用配置选项的完整列表,请参阅主 FastComments 配置文档。
文本选择行为 
How Text Selection Works
当用户在 Collab Chat 容器内选中文本时,小部件会捕获该选区并允许他们发起讨论。选区可以小到一个单词,也可以大到跨越不同元素的多段文本。
Selection Delay
在桌面设备上,用户选中文本与讨论提示出现之间有 3.5 秒的延迟。这可以防止当用户仅仅高亮文本以复制或阅读时界面闪烁。在移动设备上,由于触摸屏上的文本选择更为刻意,提示会立即出现。
Unique Conversation IDs
每个会话都会得到一个唯一的 urlId,它将页面 URL、DOM 元素路径和序列化的文本范围组合在一起。这确保每个文本选区都会创建一个可以稍后再次找到的唯一会话。
如果你在配置中提供了自定义的 urlId,它将与元素路径和文本范围组合以创建最终标识符。
Visual Highlights
当某个文本选区存在讨论时,该文本会获得视觉高亮。高亮通过背景颜色实现,并在悬停或相关聊天窗口打开时显示。
高亮系统的实现方式是将所选文本包装在一个可以应用样式的特殊元素中。这种方法确保即使底层 HTML 结构复杂,高亮也能保持准确。
Chat Window Positioning
当用户点击高亮或创建新的注释时,聊天窗口会出现在选中文本附近。小部件会基于可用的视口空间自动计算该窗口的最佳位置。
定位系统使用像 to-right、to-left、to-top 和 to-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,现有注释可能不再与文本对齐。因此,最好在有活动注释的页面上避免重大内容更改,或者在必须更改内容时考虑迁移注释。
自定义 
深色模式 支持
动态深色模式
如果您站点的深色模式是通过向 body 元素添加 .dark 类来控制的,Collab Chat UI 会自动响应此类,而无需重新初始化。该小部件的样式设计为响应此类的存在。

使用 CSS 自定义样式
您可以使用 CSS 自定义高亮、聊天窗口和其他元素的外观。该小部件会添加特定的类,您可以在样式表中针对这些类进行样式设置。
文本高亮使用 FastComments 的评论气泡样式系统,因此您对标准评论小部件所做的任何自定义也会影响 Collab Chat。
顶部栏 自定义
顶部栏显示在线用户数量和讨论数量。您可以通过提供一个自定义元素作为 topBarTarget 来自定义其位置:

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

移动端行为
在宽度小于 768px 的屏幕上,Collab Chat 会自动切换到针对移动设备优化的布局。聊天窗口会以全屏方式出现,而不是浮动在文本旁,并且会移除选择延迟以实现更即时的交互。
此行为为内置功能,无需任何配置。该小部件会自动检测屏幕大小并相应调整。
聊天窗口外观
桌面端聊天窗口宽度为 410px,并带有指向高亮文本的 16px 箭头。窗口会根据可用视口空间自动定位,使用像 to-right、to-left、to-top 和 to-bottom 这样的定位类。
您可以添加自定义 CSS 来调整这些窗口的颜色、字体、间距或其他视觉属性。聊天窗口使用与标准 FastComments 小部件相同的组件结构,因此它们会继承您对全局所做的任何自定义。
本地化
Collab Chat 支持与标准 FastComments 小部件相同的本地化选项。将 locale 选项设置为不同的语言以显示 UI 文本:

FastComments 支持数十种语言。locale 设置会影响所有 UI 文本,包括提示、按钮和占位符文本。
继承的自定义选项
由于 Collab Chat 扩展了标准的评论小部件,它继承了来自基础小部件的所有自定义选项。这包括自定义 CSS 类、自定义翻译、头像自定义、日期格式化等更多选项。
有关可用自定义选项的完整列表,请参阅 FastComments 的主要自定义文档。
使用自定义字体
如果您站点使用自定义字体,Collab Chat UI 会从页面的 CSS 中继承这些字体。如果您希望浮动聊天窗口使用相同的字体,您可能需要创建一个小部件自定义规则,并在该规则的自定义 CSS 中使用 @import 导入任何字体。
实时同步 
实时更新
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 仪表板上的使用指标会跟踪 pubSubMessageCount 和 pubSubBandwidth,以便你监控跨站点的实时同步活动。
跨标签页同步
如果用户在多个浏览器标签页中打开相同页面,一个标签页的更新会立即出现在其他标签页。这通过相同的 WebSocket 同步机制工作,不需要任何额外配置。
安全性
WebSocket 消息通过安全连接(WSS)传输,并包含租户验证,以确保用户仅接收他们有权限查看的会话更新。服务器在广播操作之前会验证所有操作,以防止未授权的访问或篡改。
API 参考 
API 概览
Collab Chat 提供三个用于以编程方式管理文本对话的 REST API 端点。 这些端点允许您在不使用浏览器小部件的情况下检索、创建和删除注释。
这些是通过浏览器 Cookie 对用户进行身份验证的公共端点。 它们不使用 API 密钥。用户必须在其浏览器中登录 FastComments 才能访问这些端点。
基本 URL
所有 Collab Chat API 端点都位于:

身份验证
这些端点通过浏览器 Cookie 对用户进行身份验证。 它们不使用 API 密钥。用户必须在其浏览器中登录 FastComments 才能访问这些端点。
获取所有会话
检索特定页面的所有文本会话。
端点

参数
tenantId(路径参数,必填)是您的 FastComments 租户 ID。
urlId(查询参数,必填)是您要检索会话的页面标识符。
响应
响应包括 API 状态、如果已通过身份验证则包含的当前用户会话信息、带有其 ID、URL 和文本范围的会话数组、已清理的 URL 标识符、指示当前用户是否为站点管理员或版主的标志,以及用于实时同步的 WebSocket 连接详细信息,包括 tenantIdWS、urlIdWS 和 userIdWS。
示例请求

示例响应

创建会话
为特定文本选择创建新的文本会话。
端点

参数
tenantId(路径参数,必填)是您的 FastComments 租户 ID。
请求体必须为 JSON 并包含以下必填字段。
urlId(字符串,必填)是基础页面标识符。
urlIdWithRange(字符串,必填)是与文本范围组合的 URL,例如 my-page:p:0:15,0:45{abc123}。
pageTitle(字符串,必填)是页面标题。
selector(字符串,必填)是包含所选文本的元素的 DOM 路径。
range(字符串,必填)是序列化的文本范围,格式为 startOffset:endOffset,startOffset:endOffset{checksum}。
createdFromCommentId(字符串,必填)是发起此聊天的评论 ID。
broadcastId(字符串,必填)是用于实时同步以防止回声效应的 UUID。
响应
响应包括 API 状态和新创建会话的 ID。
示例请求

示例响应

删除会话
删除现有的文本会话。此端点需要管理员或版主权限,或该会话必须由经过身份验证的用户创建。
端点

参数
tenantId(路径参数,必填)是您的 FastComments 租户 ID。
chatId(路径参数,必填)是要删除的会话的 ID。
broadcastId(请求体,必填)是用于实时同步的 UUID。
示例请求

示例响应

速率限制
这些端点遵循标准的 FastComments API 速率限制。速率限制中间件按租户应用,以防止滥用,同时允许正常的使用模式。
错误响应
所有端点返回标准的 HTTP 状态代码。400 响应表示请求参数无效。401 响应表示身份验证失败。403 响应表示权限不足。404 响应表示未找到会话。429 响应表示超过速率限制。
错误响应包含带有详细信息的 JSON 正文:

使用情况跟踪
创建会话会增加您的 conversationCreateCount 使用指标。所有 WebSocket 同步活动都会增加 pubSubMessageCount 和 pubSubBandwidth。您可以在 FastComments 仪表板的使用分析中监控这些指标。
有问题吗?
这就是 FastComments Collab Chat 的全部内容!如果您有任何问题、需要实现方面的帮助,或有功能建议,请在下面告诉我们或联系您的支持团队。
有关实际示例,请查看 Govscent.org,该站点在生产环境中使用了 Collab Chat。