協作聊天

在文件、書籍等中新增即時內嵌評論

FastComments Collab Chat 讓使用者能在您網站上的任何文字內容中標註與註解，建立與特定文字選取相關聯的串狀討論。使用者可以選取單字、句子或整段文字，直接在內容中啟動協作對話。

此功能非常適合編輯回饋、協作閱讀環境、教育平台、文件審閱，以及任何需要將情境化討論錨定到特定文字的情境。

請注意，本文件特別針對 Collab Chat 功能。您也可以為頁數很多的內容（例如書籍）新增評論，採用每頁一個討論串（thread-per-page），無需使用 collab chat。FastComments 也不會按頁或按討論串收費。Collab Chat 專指當您想允許使用者選取文字並對已標註的文字段落發表評論的情況。

您可以在這裡查看一個範例。

快速上手

快速入門

開始使用 Collab Chat 非常簡單。您需要 FastComments Collab Chat 腳本、一個包含您想要標註文字的 HTML 元素，以及一個包含您的 Tenant ID 的設定物件。

安裝

將 Collab Chat 腳本加入您的頁面：

載入 Collab Chat 腳本

Copy

<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>

基本實作

以下是一個最簡範例：

基本 Collab Chat 實作

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Article with Collab Chat</title>
</head>
<body>
    <!-- 您的內容容器 -->
    <div id="article-content" style="min-height: 500px;">
        <h1>My Article Title</h1>
        <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
        <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
    </div>
    <!-- 載入 Collab Chat 腳本 -->
    <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
    <!-- 初始化 Collab Chat -->
    <script>
        FastCommentsCollabChat(document.getElementById('article-content'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

如果尚未設定，請將 'demo' 替換為您實際的 FastComments Tenant ID，您可以在 FastComments 儀表板中找到它。

運作原理

初始化後，使用者可以選取目標元素內的任何文字。經過短暫延遲（桌面上為 3.5 秒）後，會出現一個提示，讓他們開始討論。當討論建立後，文字上會出現視覺化醒目提示。其他使用者可以將滑鼠懸停在醒目提示上或點擊它，以檢視並參與討論。所有討論會在所有訪客之間即時同步。

線上示範

您可以在我們的線上示範頁面上看到 Collab Chat 的實際運作。

後續步驟

現在您已經掌握了基本用法，可以在 Configuration Options 指南中自訂外觀與行為。請查看 Text Selection Behavior 指南以了解文字選取的運作方式。在 Customization 指南中了解樣式與深色模式支援。如需進階整合，請探索 API Reference。

前端函式庫

所有 FastComments 前端函式庫（react、vue、angular 等）都支援 Collab Chat。

範例

基本範例

使用 Collab Chat 最簡單的方式是針對單一內容容器。此範例示範如何在文章上啟用文字註解：

Collab Chat 基本範例

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Article with Collab Chat</title>
</head>
<body>
    <div id="article-content" style="min-height: 500px">
        <h1>My Article Title</h1>
        <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
        <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
    </div>
    <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
    <script>
        FastCommentsCollabChat(document.getElementById('article-content'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

使用自訂 URL ID 的範例（例如每本書頁面、文章等）

預設情況下，Collab Chat 使用頁面 URL 結合元素路徑與文字範圍來識別對話。您可以提供自訂的 urlId，以更精確地控制對話的分組方式：

使用自訂 URL ID 的 Collab Chat 範例

Copy

<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
<script>
    FastCommentsCollabChat(document.getElementById('article-content'), {
        tenantId: 'demo',
        urlId: 'book-one-page-2'
    });
</script>

當您的 URL 結構變動但希望維持相同對話，或希望在多個頁面之間共用相同的對話註解時，這會很有用。

支援深色模式的範例

如果您的網站為深色背景，請啟用深色模式支援以確保聊天使用者介面顯示正常：

支援深色模式的 Collab Chat 範例

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Article with Collab Chat - Dark Mode</title>
    <style>
        body {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
            font-family: system-ui, -apple-system, sans-serif;
            padding: 20px;
            margin: 0;
        }
        #article-content {
            max-width: 800px;
            margin: 0 auto;
            background-color: #2d2d2d;
            padding: 20px;
            border-radius: 8px;
        }
        h1 {
            color: #ffffff !important;
        }
        p {
            color: #e0e0e0 !important;
            line-height: 1.6;
        }
        .fastcomments-collab-chat-top-bar {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-bottom: 1px solid #444 !important;
        }
    </style>
</head>
<body>
    <div id="article-content" style="min-height: 500px">
        <h1>My Article Title</h1>
        <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
        <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
    </div>
    <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
    <script>
        FastCommentsCollabChat(document.getElementById('article-content'), {
            tenantId: 'demo',
            hasDarkBackground: true
        });
    </script>
</body>
</html>

停用頂部列的範例

預設情況下，Collab Chat 會顯示包含使用者數與討論數的頂部列。您可以將它停用：

停用頂部列的 Collab Chat 範例

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Article with Collab Chat - No Top Bar</title>
</head>
<body>
    <div id="article-content" style="min-height: 500px">
        <h1>My Article Title</h1>
        <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
        <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
    </div>
    <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
    <script>
        FastCommentsCollabChat(document.getElementById('article-content'), {
            tenantId: 'demo',
            topBarTarget: null
        });
    </script>
</body>
</html>

含評論數回呼的範例

您可以使用 commentCountUpdated 回呼來追蹤評論何時被新增或更新：

含評論數回呼的 Collab Chat 範例

Copy

<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
<script>
    FastCommentsCollabChat(document.getElementById('article-content'), {
        tenantId: 'demo',
        commentCountUpdated: function(count) {
            console.log('Total comments:', count);
            document.getElementById('comment-badge').textContent = count;
        }
    });
</script>

多個區段的範例

您可以在頁面上的多個不同區段初始化 Collab Chat。每個區段會有各自獨立的註解：

多個區段的 Collab Chat 範例

Copy

<div id="intro-section">
    <h2>Introduction</h2>
    <p>Content for the introduction...</p>
</div>
<div id="main-section">
    <h2>Main Content</h2>
    <p>Content for the main article...</p>
</div>
<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
<script>
    // 在 intro 區段初始化
    FastCommentsCollabChat(document.getElementById('intro-section'), {
        tenantId: 'demo',
        urlId: 'my-article-intro'
    });
    // 在 main 區段初始化
    FastCommentsCollabChat(document.getElementById('main-section'), {
        tenantId: 'demo',
        urlId: 'my-article-main'
    });
</script>

為線上書籍新增即時評論

如有需要，你可以為每一頁初始化 Collab Chat，並為每頁建立獨立的討論串，僅需將 urlId 參數設為像 book-one-page1 這樣的值即可。此設定也適用於 normal commenting widget。

設定選項

概覽

FastComments Collab Chat 擴展了標準的 FastComments 留言小工具，因此它繼承了基礎小工具的所有配置選項，同時新增了幾個專屬於文字標註的選項。

必要配置

tenantId

必須提供您的 FastComments Tenant ID。您可以在 FastComments 儀表板中找到它。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo'
});

Collab Chat 專屬選項

urlId

預設情況下，Collab Chat 會根據頁面 URL、元素的 DOM 路徑以及選取的文字範圍，為每個對話產生一個唯一識別碼。您可以使用自訂的 urlId 來覆蓋此行為。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    urlId: 'my-custom-page-id'
});

當您的 URL 結構可能會變更但您希望保留相同的對話，或者您想在多個頁面之間共享標註時，這會很有用。

topBarTarget

控制頂部列的顯示，該列會顯示使用者人數與討論數量。設為 null 可完全停用頂部列，或提供一個 DOM 元素以將其渲染在特定位置。

配置範例

Copy

// 停用頂部列
FastCommentsCollabChat(element, {
    tenantId: 'demo',
    topBarTarget: null
});
// 在自訂位置渲染頂部列
FastCommentsCollabChat(element, {
    tenantId: 'demo',
    topBarTarget: document.getElementById('custom-header')
});

hasDarkBackground

當您的頁面具有深色背景時，啟用深色模式樣式。此偵測是自動進行的，但您可能希望覆蓋它。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    hasDarkBackground: true
});

commentCountUpdated

每當留言數量變更時觸發的回呼函式。這對於更新 UI 元素（例如徽章或頁面標題）很有用。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    commentCountUpdated: function(count) {
        console.log('Total comments:', count);
        document.getElementById('badge').textContent = count;
    }
});

繼承的配置選項

由於 Collab Chat 擴展了標準留言小工具，您可以使用基礎 FastComments 小工具的任何配置選項。以下是一些常用的選項：

locale

設定小工具 UI 的語言。FastComments 支援數十種語言。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    locale: 'es'  // 西班牙文
});

readonly

將所有對話設為唯讀。使用者可以檢視現有的標註，但無法建立新的標註或回覆。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    readonly: true
});

sso 與 simpleSSO

使用單一登入（Single Sign-On）與您的驗證系統整合。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    sso: {
        // SSO 配置
    }
});

有關驗證選項的完整詳細資訊，請參閱 SSO 文件。

maxReplyDepth

控制回覆可以巢狀到多少層。預設情況下，Collab Chat 將此設為 0，表示所有留言都是扁平的（沒有巢狀回覆）。如果您想要有討論串形式的對話，可以更改此設定。

配置範例

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    maxReplyDepth: 3  // 允許 3 層巢狀
});

內部配置

這些選項由 Collab Chat 自動設定，不應被覆蓋：

productId 會自動設為 3 以用於 Collab Chat。floating-chat 擴充功能會自動載入以提供聊天視窗功能。小工具會自動偵測行動裝置（寬度低於 768px 的螢幕）並相應調整 UI。

完整範例

以下是一個同時展示多個配置選項的範例：

配置範例

Copy

FastCommentsCollabChat(document.getElementById('article'), {
    tenantId: 'demo',
    urlId: 'my-article-v2',
    hasDarkBackground: false,
    locale: 'en',
    topBarTarget: document.getElementById('custom-header'),
    commentCountUpdated: function(count) {
        document.title = count > 0 ? `(${count}) My Article` : 'My Article';
    },
    sso: {
        // 您的 SSO 配置
    },
    maxReplyDepth: 1
});

有關從基礎小工具繼承的所有可用配置選項的完整清單，請參閱 FastComments 主要配置文件。

文字選取行為

文字選取的運作方式

當使用者在 Collab Chat 容器內選取文字時，小工具會擷取該選取範圍，並允許使用者開始討論。選取範圍可以小到單一單字，也可以大到橫跨不同元素的多個段落。

選取延遲

在桌面裝置上，使用者選取文字與討論提示出現之間有 3.5 秒的延遲。這是為了避免使用者只是想反白文字以複製或閱讀時，UI 出現閃爍。在行動裝置上，提示會立即出現，因為在觸控螢幕上選取文字通常是刻意的行為。

唯一對話 ID

每個對話都會取得一個唯一的 urlId，由頁面 URL、DOM 元素路徑以及序列化的文字範圍組合而成。這確保每次文字選取都會建立一個獨特的對話，日後可以再次找到。

如果您在設定中提供自訂的 urlId，它會與元素路徑及文字範圍結合，產生最終的識別碼。

視覺化醒目提示

當特定文字選取範圍已有對話存在時，該文字會顯示視覺化醒目提示。醒目提示是使用背景顏色實作，並在滑鼠懸停或相關聊天視窗開啟時顯示。

醒目提示系統的運作方式是將選取的文字包覆在一個可以設定樣式的特殊元素中。這種做法可確保即使底層 HTML 結構複雜，醒目提示仍能保持準確。

聊天視窗定位

當使用者點擊醒目提示或建立新註解時，聊天視窗會出現在選取文字附近。小工具會根據可用的視窗空間自動計算此視窗的最佳位置。

定位系統使用 to-right、to-left、to-top 和 to-bottom 等 CSS 類別，來指示聊天視窗應從醒目提示向哪個方向延伸。在行動裝置上（寬度低於 768px 的螢幕），聊天視窗一律以全螢幕顯示，以提升可用性。

聊天視窗尺寸

在桌面上，聊天視窗寬度為 410px，間距為 20px，並有一個 16px 的視覺箭頭指向醒目提示的文字。這些尺寸是固定的，以確保行為一致，但您可以透過 CSS 自訂外觀。

跨元素選取

使用者可以選取橫跨多個 HTML 元素的文字，例如從一個段落的中間反白到另一個段落的開頭。範圍序列化系統能正確處理這種情況，即使跨越元素邊界，也會醒目提示所有選取的文字。

瀏覽器相容性

文字選取系統使用標準的 window.getSelection() API，所有現代瀏覽器都支援此 API。對於較舊版本的 Internet Explorer，它會改用 document.selection 以維持相容性。

選取範圍的持久性

一旦為文字選取範圍建立了對話，即使頁面重新載入，該註解仍會持續存在。序列化的範圍與 DOM 路徑讓小工具能在使用者返回頁面時，於完全相同的位置還原醒目提示。

只要您的頁面內容保持穩定，這項功能就能可靠運作。如果您變更文字內容或重組 HTML，現有的註解可能無法再正確對應到文字。因此，建議避免在含有有效註解的頁面上進行重大內容變更，或在必要時於內容變更時考慮遷移註解。

自訂

深色模式支援

動態深色模式

如果你網站的深色模式是透過在 body 元素新增 .dark 類別來控制，Collab Chat 的 UI 將會自動支援此功能而不需要重新初始化。小工具的樣式會設計為回應此類別的存在。

深色模式 CSS 範例

Copy

/* 你的深色模式 CSS */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

使用 CSS 自訂樣式

你可以使用 CSS 自訂高亮、聊天視窗和其他元素的外觀。小工具會新增特定的類別，讓你可以在樣式表中針對它們進行設定。

文字高亮使用 FastComments 的留言氣泡樣式系統，因此你對標準留言小工具所做的任何自訂也會影響 Collab Chat。

頂部列自訂

頂部列會顯示線上使用者數與討論數。你可以透過提供一個自訂元素作為 topBarTarget 來自訂它的位置：

自訂頂部列位置

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    topBarTarget: document.getElementById('my-custom-header')
});

或是將它完全停用，設定為 null：

停用頂部列

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    topBarTarget: null
});

行動裝置行為

在寬度小於 768px 的螢幕上，Collab Chat 會自動切換到行動裝置優化的版面。聊天視窗會以全螢幕顯示，而非浮動在文字旁邊，並且移除選取延遲以提供更即時的互動。

此行為為內建，不需要任何設定。小工具會自動偵測螢幕大小並做相應調整。

聊天視窗外觀

桌面版的聊天視窗寬度為 410px，並有一個 16px 的箭頭指向被標示的文字。視窗會根據可用的視口空間自動定位，使用像 to-right、to-left、to-top 與 to-bottom 這類定位類別。

你可以新增自訂 CSS 以調整這些視窗的顏色、字型、間距或其他視覺屬性。聊天視窗使用與標準 FastComments 小工具相同的元件結構，因此它們會繼承你套用的任何全域自訂。

在地化

Collab Chat 支援與標準 FastComments 小工具相同的所有在地化選項。設定 locale 選項以顯示不同語言的介面文字：

設定語系

Copy

FastCommentsCollabChat(element, {
    tenantId: 'demo',
    locale: 'es'  // 西班牙語
});

FastComments 支援數十種語言。locale 設定會影響所有介面文字，包括提示、按鈕與預設文字。

繼承的自訂選項

由於 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 相符而忽略它。

這確保了流暢的互動體驗：使用者可以立即在 UI 中看到自己的變更，而無需等待透過伺服器的往返過程，同時仍能確保所有其他使用者收到該更新。

線上人數統計

頂部列會顯示目前正在檢視該頁面的使用者人數。此人數會隨著使用者加入與離開而即時更新。使用者人數透過相同的 WebSocket 連線提供，並根據連線與斷線事件自動增減。

連線韌性

如果 WebSocket 連線因網路問題或伺服器維護而中斷，小工具會自動嘗試重新連線。在重新連線期間，使用者仍可與現有註解互動，但在連線重新建立之前，他們不會看到來自其他使用者的即時更新。

重新連線後，小工具會重新同步以確保沒有遺漏任何更新。此過程完全透明，無需使用者介入。

頻寬考量

WebSocket 訊息非常輕量，僅包含同步狀態所需的必要資訊。建立新註解通常使用不到 1KB 的頻寬。系統還包含智慧批次處理，以在高活動期間降低訊息頻率。

FastComments 儀表板中的使用量指標會追蹤 pubSubMessageCount 和 pubSubBandwidth，讓您可以監控各網站的即時同步活動。

跨分頁同步

如果使用者在多個瀏覽器分頁中開啟同一頁面，其中一個分頁的更新會立即出現在其他分頁中。這透過相同的 WebSocket 同步機制運作，不需要任何額外設定。

安全性

WebSocket 訊息透過安全連線（WSS）傳輸，並包含租戶驗證，以確保使用者僅收到其有權查看的對話更新。伺服器會在廣播之前驗證所有操作，以防止未經授權的存取或操縱。

API 參考

API 總覽

Collab Chat 提供三個 REST API 端點，用於以程式方式管理文字對話。這些端點讓您無需使用瀏覽器小工具即可擷取、建立和刪除標註。

這些是透過瀏覽器 Cookie 對使用者進行身分驗證的公開端點。它們不使用 API 金鑰。使用者必須在其瀏覽器中登入 FastComments 才能存取這些端點。

基底 URL

所有 Collab Chat API 端點都位於：

基底 URL

Copy

https://fastcomments.com/comment-collab-chats

身分驗證

這些端點透過瀏覽器 Cookie 對使用者進行身分驗證。它們不使用 API 金鑰。使用者必須在其瀏覽器中登入 FastComments 才能存取這些端點。

取得所有對話

擷取特定頁面的所有文字對話。

端點

GET 端點

Copy

GET /comment-collab-chats/:tenantId?urlId=<urlId>

參數

tenantId（路徑參數，必填）是您的 FastComments 租戶 ID。

urlId（查詢參數，必填）是您要擷取對話的頁面識別碼。

回應

回應包含 API 狀態、已驗證時的目前使用者工作階段資訊、包含對話 ID、URL 與文字範圍的對話陣列、清理後的 URL 識別碼、表示目前使用者是否為網站管理員或版主的旗標，以及用於即時同步的 WebSocket 連線詳細資訊，包括 tenantIdWS、urlIdWS 和 userIdWS。

請求範例

GET 請求範例

Copy

curl "https://fastcomments.com/comment-collab-chats/demo?urlId=my-article-page" \
  --cookie "your-session-cookie"

回應範例

GET 回應範例

Copy

{
  "status": "success",
  "user": {
    "id": "user123",
    "username": "john_doe"
  },
  "conversations": [
    {
      "_id": "conv123",
      "urlId": "my-article-page:p:0:15,0:45{abc123}",
      "range": "0:15,0:45{abc123}"
    },
    {
      "_id": "conv456",
      "urlId": "my-article-page:h1:5:20,5:35{def456}",
      "range": "5:20,5:35{def456}"
    }
  ],
  "urlIdClean": "my-article-page",
  "isSiteAdmin": false,
  "tenantIdWS": "demo",
  "urlIdWS": "my-article-page",
  "userIdWS": "user123"
}

建立對話

為特定文字選取範圍建立新的文字對話。

端點

POST 端點

Copy

POST /comment-collab-chats/:tenantId

參數

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。

請求範例

POST 請求範例

Copy

curl -X POST "https://fastcomments.com/comment-collab-chats/demo" \
  --cookie "your-session-cookie" \
  -H "Content-Type: application/json" \
  -d '{
    "urlId": "my-article-page",
    "urlIdWithRange": "my-article-page:p:0:15,0:45{abc123}",
    "pageTitle": "My Article Title",
    "selector": "div#article > p:nth-child(2)",
    "range": "0:15,0:45{abc123}",
    "createdFromCommentId": "comment789",
    "broadcastId": "550e8400-e29b-41d4-a716-446655440000"
  }'

回應範例

POST 回應範例

Copy

{
  "status": "success",
  "createdChatId": "conv789"
}

刪除對話

刪除現有的文字對話。此端點需要管理員或版主權限，或者該對話必須是由已驗證的使用者所建立。

端點

DELETE 端點

Copy

DELETE /comment-collab-chats/:tenantId/:chatId

參數

tenantId（路徑參數，必填）是您的 FastComments 租戶 ID。

chatId（路徑參數，必填）是要刪除的對話 ID。

broadcastId（請求主體，必填）是用於即時同步的 UUID。

請求範例

DELETE 請求範例

Copy

curl -X DELETE "https://fastcomments.com/comment-collab-chats/demo/conv789" \
  --cookie "your-session-cookie" \
  -H "Content-Type: application/json" \
  -d '{
    "broadcastId": "550e8400-e29b-41d4-a716-446655440001"
  }'

回應範例

DELETE 回應範例

Copy

{
  "status": "success"
}

速率限制

這些端點受標準 FastComments API 速率限制約束。速率限制中介軟體按租戶套用，以防止濫用，同時允許正常的使用模式。

錯誤回應

所有端點都會回傳標準 HTTP 狀態碼。400 回應表示請求參數無效。401 回應表示身分驗證失敗。403 回應表示權限不足。404 回應表示找不到該對話。429 回應表示超出速率限制。

錯誤回應包含帶有詳細資訊的 JSON 主體：

錯誤回應範例

Copy

{
  "status": "error",
  "message": "Conversation not found"
}

用量追蹤

建立對話會增加您的 conversationCreateCount 用量指標。所有 WebSocket 同步活動會增加 pubSubMessageCount 和 pubSubBandwidth。您可以在 FastComments 儀表板的用量分析中監控這些指標。

有問題嗎？

這就是 FastComments Collab Chat 的全部內容！如果您有任何問題、需要實作上的協助，或有功能建議，請在下方告訴我們或聯絡我們的支援團隊。

欲查看實際範例，請參閱 Govscent.org，該網站在生產環境中使用 Collab Chat。

語言 🇹🇼 繁體中文

快速上手

設定

自訂

進階

協作聊天

在文件、書籍等中新增即時內嵌評論

快速上手

快速入門

安裝

基本實作

運作原理

線上示範

後續步驟

前端函式庫

範例

基本範例

使用自訂 URL ID 的範例（例如每本書頁面、文章等）

支援深色模式的範例

停用頂部列的範例

含評論數回呼的範例

多個區段的範例

為線上書籍新增即時評論

設定選項

概覽

必要配置

tenantId

Collab Chat 專屬選項

urlId

topBarTarget

hasDarkBackground

commentCountUpdated

繼承的配置選項

locale

readonly

sso 與 simpleSSO

maxReplyDepth

內部配置

完整範例

文字選取行為

文字選取的運作方式

選取延遲

唯一對話 ID

視覺化醒目提示

聊天視窗定位

聊天視窗尺寸

跨元素選取

瀏覽器相容性

選取範圍的持久性

自訂

深色模式支援

動態深色模式

使用 CSS 自訂樣式

頂部列自訂

行動裝置行為

聊天視窗外觀

在地化

繼承的自訂選項

使用自訂字型

即時同步

即時更新

WebSocket 同步的運作方式

廣播 ID 系統

線上人數統計

連線韌性

頻寬考量

跨分頁同步

安全性

API 參考

API 總覽

基底 URL

身分驗證

取得所有對話

端點

參數

回應

請求範例

回應範例

建立對話

端點