Collab Chat | FastComments Docs

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

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>

Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your FastComments 儀表板.

運作方式

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

線上示範

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

下一步

既然您已完成基礎設置，您可以在「設定選項」指南中自訂外觀與行為。查看「文字選取行為」指南以了解文字選取的運作方式。在「自訂」指南中了解樣式和深色模式支援。若需進階整合，請參閱「API 參考」。

前端程式庫

所有 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 and 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 自動設定，且不應被覆寫：

The productId is automatically set to 3 for Collab Chat. The floating-chat extension is automatically loaded to provide the chat window functionality. The widget automatically detects mobile devices (screens under 768px wide) and adjusts the UI accordingly.

完整範例

以下示範多個設定項目一起使用的範例：

設定範例

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 設定文件。

文字選取行為

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 範例

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 引入任何字型。

即時同步

Real-Time Updates

Collab Chat 使用 WebSocket 連線即時同步所有已連線使用者之間的對話。當有人建立新的註解、新增評論或刪除討論時，所有正在檢視同一頁面的其他使用者會立即看到更新，無需重新整理。

How WebSocket Sync Works

當您初始化 Collab Chat 時，小工具會與 FastComments 伺服器建立 WebSocket 連線。此連線在使用者的會話期間保持開啟，並監聽與當前頁面相關的更新。

WebSocket 系統對 Collab Chat 使用三種廣播訊息類型。new-text-chat 事件在有人於頁面上建立新註解時觸發。updated-text-chat 事件在有人更新既有對話時觸發。deleted-text-chat 事件在有人刪除註解時觸發。

Broadcast ID System

為了避免出現使用者看到自己動作回播的回音效應，每次更新都包含唯一的 broadcastId。當使用者建立或更新註解時，他們的用戶端會為該操作產生一個 UUID。當 WebSocket 將更新廣播回所有用戶端時，來源用戶端會忽略該更新，因為它與自身的 broadcastId 相符。

這能確保使用者在 UI 中立即看到自己的變更，而無需等待經由伺服器的往返，同時也能確保所有其他使用者接收到該更新。

Live User Count

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

Connection Resilience

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

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

Bandwidth Considerations

WebSocket 訊息為輕量級，只包含同步狀態所需的必要資訊。建立新註解通常使用少於 1KB 的頻寬。系統也包含智慧型分批機制，以在高活動期間降低訊息頻率。

您在 FastComments 儀表板中的使用量指標會追蹤 pubSubMessageCount 與 pubSubBandwidth，以便您監控跨網站的即時同步活動。

Cross-Tab Synchronization

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

Security

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

API 參考

API Overview

Collab Chat 提供三個用於以程式化方式管理文字對話的 REST API 端點。這些端點可讓您在不使用瀏覽器外掛程式的情況下檢索、建立和刪除註解。

這些為公開端點，透過瀏覽器 cookie 驗證使用者。它們不使用 API 金鑰。使用者必須在瀏覽器中登入 FastComments 才能存取這些端點。

Base URL

All Collab Chat API endpoints are under:

基本 URL

Copy

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

Authentication

These endpoints authenticate users via browser cookies. They do not use API keys. Users must be logged into FastComments in their browser to access these endpoints.

Get All Conversations

Retrieve all text conversations for a specific page.

Endpoint

GET 端點

Copy

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

Parameters

tenantId (path parameter, required) 是您的 FastComments Tenant ID。

urlId (query parameter, required) 是您要檢索對話的頁面識別碼。

Response

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

Example Request

GET 範例請求

Copy

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

Example Response

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"
}

Create Conversation

Create a new text conversation for a specific text selection.

Endpoint

POST 端點

Copy

POST /comment-collab-chats/:tenantId

Parameters

tenantId (path parameter, required) 是您的 FastComments Tenant ID。

The request body must be JSON and include these required fields.

urlId (string, required) 是基本頁面識別碼。

urlIdWithRange (string, required) 是結合文字範圍的 URL，例如 my-page:p:0:15,0:45{abc123}。

pageTitle (string, required) 是頁面的標題。

selector (string, required) 是包含已選取文字之元素的 DOM 路徑。

range (string, required) 是序列化的文字範圍，格式為 startOffset:endOffset,startOffset:endOffset{checksum}。

createdFromCommentId (string, required) 是啟動此聊天的評論 ID。

broadcastId (string, required) 是用於即時同步以避免回波效應的 UUID。

Response

回應包含 API 狀態以及新建立對話的 ID。

Example Request

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"
  }'

Example Response

POST 範例回應

Copy

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

Delete Conversation

Delete an existing text conversation. This endpoint requires admin or moderator permissions, or the conversation must have been created by the authenticated user.

Endpoint

DELETE 端點

Copy

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

Parameters

tenantId (path parameter, required) 是您的 FastComments Tenant ID。

chatId (path parameter, required) 是要刪除的對話 ID。

broadcastId (request body, required) 是用於即時同步的 UUID。

Example Request

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"
  }'

Example Response

DELETE 範例回應

Copy

{
  "status": "success"
}

Rate Limiting

These endpoints are subject to standard FastComments API rate limiting. The rate limit middleware applies per-tenant to prevent abuse while allowing normal usage patterns.

Error Responses

All endpoints return standard HTTP status codes. A 400 response indicates invalid request parameters. A 401 response means authentication failed. A 403 response indicates insufficient permissions. A 404 response means the conversation was not found. A 429 response indicates rate limit exceeded.

Error responses include a JSON body with details:

錯誤回應範例

Copy

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

Usage Tracking

Creating conversations increments your conversationCreateCount usage metric. All WebSocket sync activity increments pubSubMessageCount and pubSubBandwidth. You can monitor these metrics in your FastComments dashboard under usage analytics.

有問題嗎？

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

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

語言 🇹🇼 繁體中文

快速上手

設定

自訂

進階

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

快速上手

快速開始

安裝

基本實作

運作方式

線上示範

下一步

前端程式庫

範例

基本範例

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

支援深色模式的範例

停用頂部列的範例

含評論數回呼的範例

多個區段的範例

為線上書籍新增即時評論

設定選項

概觀

必要的設定

tenantId

Collab Chat 專屬選項

urlId

topBarTarget

hasDarkBackground

commentCountUpdated

繼承的設定選項

locale

readonly

sso and simpleSSO

maxReplyDepth

內部設定

完整範例

文字選取行為

How Text Selection Works

Selection Delay

Unique Conversation IDs

Visual Highlights

Chat Window Positioning

Chat Window Dimensions

Cross-Element Selections

Browser Compatibility

Selection Persistence

自訂

深色模式支援

動態深色模式

使用 CSS 自訂樣式

頂部列自訂

行動裝置行為

聊天視窗外觀

在地化

繼承的自訂選項

使用自訂字型

即時同步

Real-Time Updates

How WebSocket Sync Works

Broadcast ID System

Live User Count

Connection Resilience

Bandwidth Considerations

Cross-Tab Synchronization

Security

API 參考

API Overview

Base URL

Authentication

Get All Conversations

Endpoint

Parameters

Response

Example Request

Example Response

Create Conversation

Endpoint

Parameters