FastComments.com

Menu Icon

Sprache 🇩🇪 Deutsch
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 Français (France) 🇩🇪 Deutsch 🇨🇾 Ελληνικά (Κύπρος) 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇺🇦 Русский (Украина) 🇧🇦 Српски (БиХ) 🇷🇸 Srpski (Latinica) 🇲🇪 Српски (Црна Гора) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Erste Schritte

Erste Schritte
Beispiele
Live-Kommentare zu Online-Büchern hinzufügen

Konfiguration

Konfigurationsoptionen
Verhalten bei Textauswahl

Anpassung

Anpassung

Erweitert

Live-Synchronisierung
API-Referenz

Inline-Live-Kommentare zu Dokumenten, Büchern usw. hinzufügen

FastComments Collab Chat ermöglicht es Benutzern, beliebige Textinhalte auf Ihrer Website hervorzuheben und zu annotieren, wodurch Thread-Diskussionen entstehen, die an bestimmte Textauswahlen gebunden sind. Benutzer können Wörter, Sätze oder ganze Absätze auswählen, um kollaborative Gespräche direkt in Ihrem Inhalt zu starten.

Dieses Feature eignet sich hervorragend für redaktionelles Feedback, kollaborative Leseumgebungen, Bildungsplattformen, Dokumentenprüfungen und jedes Szenario, in dem Sie kontextbezogene Diskussionen wünschen, die an bestimmte Textstellen gebunden sind.

Beachten Sie, dass diese Dokumentation speziell auf die Funktionalität Collab Chat abzielt. Sie können Kommentare für Inhalte mit vielen Seiten, wie Büchern, mit einem Thread-pro-Seite hinzufügen, ohne Collab Chat zu verwenden. FastComments berechnet außerdem nicht pro Seite oder pro Thread. Collab Chat ist speziell dafür gedacht, wenn Sie Benutzern erlauben möchten, Text auszuwählen und den markierten Textabschnitt zu kommentieren.

Sie können ein Beispiel hier sehen.

Erste Schritte Internal Link

Schnellstart

Der Einstieg in Collab Chat ist einfach. Sie benötigen das FastComments Collab Chat-Skript, ein HTML-Element, das den Text enthält, den Sie annotieren möchten, sowie ein Konfigurationsobjekt mit Ihrer Tenant-ID.

Installation

Fügen Sie das Collab Chat-Skript zu Ihrer Seite hinzu:

Collab Chat-Skript laden
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3

Basic Implementation

Here's a minimal example:

Grundlegende Collab Chat-Implementierung
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 <!-- Ihr Inhaltscontainer -->
9 <div id="article-content" style="min-height: 500px;">
10 <h1>My Article Title</h1>
11 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
12 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
13 </div>
14
15 <!-- Das Collab Chat-Skript laden -->
16 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
17
18 <!-- Collab Chat initialisieren -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

Ersetzen Sie 'demo' durch Ihre tatsächliche FastComments Tenant-ID, falls diese nicht bereits korrekt ist. Sie finden sie in Ihrem FastComments dashboard.

How It Works

Sobald die Initialisierung erfolgt ist, können Benutzer beliebigen Text innerhalb des Ziel-Elements auswählen. Nach einer kurzen Verzögerung (3,5 Sekunden auf dem Desktop) erscheint eine Eingabeaufforderung, die es ihnen ermöglicht, eine Diskussion zu starten. Wenn eine Diskussion erstellt wird, erscheint eine visuelle Hervorhebung des Texts. Andere Benutzer können über die Hervorhebung fahren oder klicken, um die Diskussion zu sehen und daran teilzunehmen. Alle Diskussionen werden in Echtzeit für alle Besucher synchronisiert.

Live Demo

Sie können Collab Chat in Aktion auf unserer Live-Demo-Seite sehen.

Nächste Schritte

Jetzt, wo die Grundlagen funktionieren, können Sie das Aussehen und Verhalten im Leitfaden zu den Konfigurationsoptionen anpassen. Sehen Sie sich den Leitfaden zum Verhalten bei Textauswahl an, um zu verstehen, wie die Textauswahl funktioniert. Erfahren Sie mehr über Styling und Unterstützung für den Dunkelmodus im Anpassungsleitfaden. Für fortgeschrittene Integrationen sehen Sie sich das API Reference an.

Frontend Libraries

Alle FastComments-Frontend-Bibliotheken (react, vue, angular, etc) enthalten Collab Chat.

Beispiele Internal Link

Grundlegendes Beispiel

Der einfachste Weg, Collab Chat zu verwenden, besteht darin, einen einzelnen Inhaltscontainer anzusprechen. Dieses Beispiel zeigt, wie man Textannotationen in einem Artikel aktiviert:

Grundlegendes Collab Chat Beispiel
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

Beispiel mit benutzerdefinierter URL-ID (pro Buchseite, Artikel usw.)

Standardmäßig verwendet Collab Chat die Seiten-URL kombiniert mit dem Elemente-Pfad und dem Textbereich, um Konversationen zu identifizieren. Sie können eine benutzerdefinierte urlId angeben, um mehr Kontrolle darüber zu haben, wie Konversationen gruppiert werden:

Collab Chat mit benutzerdefinierter URL-ID
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

Das ist nützlich, wenn sich Ihre URL-Struktur ändert, Sie aber dieselben Unterhaltungen beibehalten möchten, oder wenn Sie dieselben Konversationsannotationen über mehrere Seiten hinweg teilen möchten.

Beispiel mit Dunkelmodus

Wenn Ihre Seite einen dunklen Hintergrund hat, aktivieren Sie die Unterstützung für den Dunkelmodus, damit die Chat-Benutzeroberfläche korrekt dargestellt wird:

Collab Chat mit Dunkelmodus
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

Beispiel mit deaktivierter Top-Leiste

Standardmäßig zeigt Collab Chat eine obere Leiste mit Benutzeranzahl und Diskussionsanzahl an. Sie können sie deaktivieren:

Collab Chat mit deaktivierter Top-Leiste
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

Beispiel mit Callback für Kommentaranzahl

Sie können verfolgen, wann Kommentare hinzugefügt oder aktualisiert werden, indem Sie den Callback commentCountUpdated verwenden:

Collab Chat mit Callback für Kommentaranzahl
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

Beispiel mit mehreren Abschnitten

Sie können Collab Chat in mehreren separaten Abschnitten Ihrer Seite initialisieren. Jeder Abschnitt hat seine eigenen unabhängigen Annotationen:

Collab Chat auf mehreren Abschnitten
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 // Initialisiere den Intro-Abschnitt
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Initialisiere den Hauptabschnitt
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

Live-Kommentare zu Online-Büchern hinzufügen Internal Link

Sie können Collab Chat pro Seite initialisieren, falls gewünscht, und pro Seite getrennte Threads haben, übergeben Sie einfach dem urlId-Parameter einen Wert wie book-one-page1. Diese Konfiguration funktioniert auch für das normale Kommentar-Widget.

Konfigurationsoptionen Internal Link

Übersicht

FastComments Collab Chat erweitert das Standard-FastComments-Kommentarmodul und übernimmt daher alle Konfigurationsoptionen des Basismoduls, während es einige spezifische Optionen für Textannotationen hinzufügt.

Erforderliche Konfiguration

tenantId

Ihre FastComments Tenant-ID ist erforderlich. Sie finden diese in Ihrem FastComments dashboard.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo'
4});
5

Collab Chat-spezifische Optionen

urlId

Standardmäßig generiert Collab Chat eine eindeutige Kennung für jede Unterhaltung basierend auf der Seiten-URL, dem DOM-Pfad zum Element und dem ausgewählten Textbereich. Sie können dies mit einer benutzerdefinierten urlId überschreiben.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 urlId: 'my-custom-page-id'
5});
6

Dies ist nützlich, wenn sich Ihre URL-Struktur ändern könnte, Sie aber die gleichen Unterhaltungen beibehalten möchten, oder wenn Sie Annotationen über mehrere Seiten hinweg teilen möchten.

topBarTarget

Steuert die Anzeige der oberen Leiste, die die Benutzeranzahl und die Diskussionsanzahl anzeigt. Setzen Sie auf null, um die obere Leiste vollständig zu deaktivieren, oder geben Sie ein DOM-Element an, um sie an einem bestimmten Ort zu rendern.

Konfigurationsbeispiel
Copy Copy
1
2// Top-Leiste deaktivieren
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Top-Leiste an benutzerdefiniertem Ort rendern
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Aktivieren Sie das Dark-Mode-Styling, wenn Ihre Seite einen dunklen Hintergrund hat. Diese Erkennung erfolgt automatisch, kann aber ggf. überschrieben werden.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 hasDarkBackground: true
5});
6

commentCountUpdated

Eine Callback-Funktion, die ausgelöst wird, sobald sich die Kommentaranzahl ändert. Dies ist nützlich, um UI-Elemente wie Badges oder Seitentitel zu aktualisieren.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 commentCountUpdated: function(count) {
5 console.log('Total comments:', count);
6 document.getElementById('badge').textContent = count;
7 }
8});
9

Geerbte Konfigurationsoptionen

Da Collab Chat das Standard-Kommentarmodul erweitert, können Sie jede Konfigurationsoption des Basismoduls von FastComments verwenden. Hier sind einige häufig verwendete Optionen:

locale

Legen Sie die Sprache für die Widget-Benutzeroberfläche fest. FastComments unterstützt Dutzende von Sprachen.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Spanisch
5});
6

readonly

Machen Sie alle Unterhaltungen schreibgeschützt. Benutzer können vorhandene Annotationen ansehen, aber keine neuen erstellen oder antworten.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 readonly: true
5});
6

sso und simpleSSO

Integrieren Sie Ihr Authentifizierungssystem mit Single Sign-On.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 sso: {
5 // SSO-Konfiguration
6 }
7});
8

Siehe die SSO-Dokumentation für vollständige Details zu den Authentifizierungsoptionen.

maxReplyDepth

Steuert, wie tief Antworten verschachtelt werden können. Standardmäßig setzt Collab Chat dies auf 0, was bedeutet, dass alle Kommentare flach sind (keine verschachtelten Antworten). Sie können dies ändern, wenn Sie verschachtelte Konversationen wünschen.

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Erlaube 3 Ebenen der Verschachtelung
5});
6

Interne Konfiguration

Diese Optionen werden automatisch von Collab Chat gesetzt und sollten nicht überschrieben werden:

Die Eigenschaft productId wird automatisch auf 3 für Collab Chat gesetzt. Die Erweiterung floating-chat wird automatisch geladen, um die Chatfenster-Funktionalität bereitzustellen. Das Widget erkennt automatisch mobile Geräte (Bildschirme unter 768px Breite) und passt die Benutzeroberfläche entsprechend an.

Vollständiges Beispiel

Hier ein Beispiel, das mehrere Konfigurationsoptionen zusammen zeigt:

Konfigurationsbeispiel
Copy Copy
1
2FastCommentsCollabChat(document.getElementById('article'), {
3 tenantId: 'demo',
4 urlId: 'my-article-v2',
5 hasDarkBackground: false,
6 locale: 'en',
7 topBarTarget: document.getElementById('custom-header'),
8 commentCountUpdated: function(count) {
9 document.title = count > 0 ? `(${count}) My Article` : 'My Article';
10 },
11 sso: {
12 // Ihre SSO-Konfiguration
13 },
14 maxReplyDepth: 1
15});
16

Für eine vollständige Liste aller verfügbaren Konfigurationsoptionen, die vom Basismodul geerbt werden, siehe die Hauptdokumentation zur FastComments-Konfiguration.

Verhalten bei Textauswahl Internal Link

Wie die Textauswahl funktioniert

Wenn Benutzer Text innerhalb des Collab Chat Containers auswählen, erfasst das Widget diese Auswahl und ermöglicht es ihnen, eine Diskussion zu starten. Die Auswahl kann so klein wie ein einzelnes Wort oder so groß wie mehrere Absätze sein, die sich über verschiedene Elemente erstrecken.

Verzögerung bei der Auswahl

Auf Desktop-Geräten gibt es eine Verzögerung von 3,5 Sekunden zwischen dem Zeitpunkt, an dem ein Benutzer Text auswählt, und dem Erscheinen der Diskussionsaufforderung. Dies verhindert ein Flackern der UI, wenn Benutzer Text nur zum Kopieren oder Lesen markieren. Auf mobilen Geräten erscheint die Aufforderung sofort, da die Textauswahl auf Touchscreens gezielter erfolgt.

Eindeutige Konversations-IDs

Jede Konversation erhält eine eindeutige urlId, die die Seiten-URL, den DOM-Elementpfad und den serialisierten Bereich des Textes kombiniert. Dadurch wird sichergestellt, dass jede Textauswahl eine eigene Konversation erzeugt, die später wiedergefunden werden kann.

Wenn Sie eine benutzerdefinierte urlId in Ihrer Konfiguration angeben, wird diese mit dem Elementpfad und dem Textbereich kombiniert, um den endgültigen Bezeichner zu erstellen.

Visuelle Hervorhebungen

Wenn für eine bestimmte Textauswahl eine Diskussion existiert, wird dieser Text visuell hervorgehoben. Die Hervorhebung wird mittels Hintergrundfarben umgesetzt und erscheint beim Überfahren mit der Maus (hover) oder wenn das zugehörige Chatfenster geöffnet ist.

Das Hervorhebungssystem funktioniert, indem der ausgewählte Text in ein spezielles Element eingeschlossen wird, das gestylt werden kann. Dieser Ansatz stellt sicher, dass Hervorhebungen genau bleiben, selbst wenn die zugrunde liegende HTML-Struktur komplex ist.

Positionierung des Chatfensters

Wenn ein Benutzer auf eine Hervorhebung klickt oder eine neue Anmerkung erstellt, erscheint in der Nähe des ausgewählten Textes ein Chatfenster. Das Widget berechnet automatisch die beste Position für dieses Fenster basierend auf dem verfügbaren Viewport-Bereich.

Das Positionierungssystem verwendet CSS-Klassen wie to-right, to-left, to-top und to-bottom, um anzugeben, in welche Richtung sich das Chatfenster von der Hervorhebung aus erstrecken soll. Auf mobilen Geräten (Bildschirme schmaler als 768px) erscheint das Chatfenster aus Gründen der besseren Bedienbarkeit immer im Vollbild.

Dimensionen des Chatfensters

Chatfenster sind auf dem Desktop 410px breit, mit 20px Abstand und einem 16px großen visuellen Pfeil, der auf den hervorgehobenen Text zeigt. Diese Abmessungen sind festgelegt, um ein konsistentes Verhalten zu gewährleisten, können aber mit CSS an das Erscheinungsbild angepasst werden.

Auswahl über mehrere Elemente

Benutzer können Text auswählen, der sich über mehrere HTML-Elemente erstreckt, etwa vom Mitte eines Absatzes bis zum Anfang eines anderen. Das System zur Serialisierung des Bereichs verarbeitet dies korrekt und hebt den gesamten ausgewählten Text hervor, sogar über Elementgrenzen hinweg.

Browser-Kompatibilität

Das Textauswahlsystem verwendet die standardmäßige API window.getSelection(), die in allen modernen Browsern unterstützt wird. Für ältere Versionen des Internet Explorers greift es zur Kompatibilität auf document.selection zurück.

Persistenz der Auswahl

Sobald für eine Textauswahl eine Konversation erstellt wurde, bleibt diese Anmerkung erhalten, selbst wenn die Seite neu geladen wird. Der serialisierte Bereich und der DOM-Pfad ermöglichen es dem Widget, Hervorhebungen an genau derselben Stelle wiederherzustellen, wenn Benutzer zur Seite zurückkehren.

Dies funktioniert zuverlässig, solange Ihre Seiteninhalte stabil bleiben. Wenn Sie den Textinhalt ändern oder Ihre HTML-Struktur umgestalten, stimmen bestehende Anmerkungen möglicherweise nicht mehr korrekt mit dem Text überein. Aus diesem Grund ist es am besten, größere Inhaltsänderungen auf Seiten mit aktiven Anmerkungen zu vermeiden oder in Betracht zu ziehen, Anmerkungen zu migrieren, wenn Inhaltsänderungen notwendig sind.

Anpassung Internal Link

Dunkelmodus-Unterstützung

Dynamischer Dunkelmodus

Wenn der Dunkelmodus Ihrer Seite durch Hinzufügen der Klasse .dark zum body-Element gesteuert wird, respektiert die Collab Chat UI dies automatisch, ohne dass eine Neuinitialisierung erforderlich ist. Die Styles des Widgets sind so gestaltet, dass sie auf das Vorhandensein dieser Klasse reagieren.

Beispiel für Dark Mode CSS
Copy Copy
1
2/* Ihr Dark-Mode-CSS */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

Benutzerdefinierte Gestaltung mit CSS

Sie können das Erscheinungsbild von Hervorhebungen, Chatfenstern und anderen Elementen mit CSS anpassen. Das Widget fügt spezifische Klassen hinzu, die Sie in Ihrem Stylesheet ansprechen können.

Text-Hervorhebungen verwenden das FastComments-Kommentarblasen-Styling-System, sodass alle Anpassungen, die Sie am Standard-Kommentar-Widget vorgenommen haben, sich auch auf Collab Chat auswirken.

Anpassung der oberen Leiste

Die obere Leiste zeigt die Anzahl der Online-Nutzer und die Anzahl der Diskussionen an. Sie können ihre Position anpassen, indem Sie ein benutzerdefiniertes Element als topBarTarget angeben:

Benutzerdefinierter Ort der oberen Leiste
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Oder deaktivieren Sie sie vollständig, indem Sie sie auf null setzen:

Obere Leiste deaktivieren
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Verhalten auf Mobilgeräten

Auf Bildschirmen unter 768px Breite wechselt Collab Chat automatisch in ein für Mobilgeräte optimiertes Layout. Chatfenster erscheinen im Vollbildmodus anstatt neben dem Text zu schweben, und die Auswahlverzögerung wird entfernt, um eine unmittelbarere Interaktion zu ermöglichen.

Dieses Verhalten ist eingebaut und erfordert keine Konfiguration. Das Widget erkennt die Bildschirmgröße automatisch und passt sich entsprechend an.

Darstellung der Chatfenster

Chatfenster sind auf Desktop 410px breit und haben einen 16px-Pfeil, der auf den hervorgehobenen Text zeigt. Die Fenster positionieren sich automatisch basierend auf dem verfügbaren Viewport-Platz und verwenden Positionierungsklassen wie to-right, to-left, to-top und to-bottom.

Sie können benutzerdefiniertes CSS hinzufügen, um Farben, Schriftarten, Abstände oder andere visuelle Eigenschaften dieser Fenster anzupassen. Die Chatfenster verwenden dieselbe Komponentenstruktur wie das Standard-FastComments-Widget, sodass sie alle von Ihnen vorgenommenen globalen Anpassungen erben.

Lokalisierung

Collab Chat unterstützt dieselben Lokalisierungsoptionen wie das Standard-FastComments-Widget. Setzen Sie die Option locale, um die UI-Texte in verschiedenen Sprachen anzuzeigen:

Locale festlegen
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Spanisch
5});
6

FastComments unterstützt dutzende Sprachen. Die Locale-Einstellung beeinflusst alle UI-Texte, einschließlich Aufforderungen, Schaltflächen und Platzhaltertexte.

Vererbte Anpassungsoptionen

Da Collab Chat das Standard-Commenting-Widget erweitert, erbt es alle Anpassungsoptionen des Basis-Widgets. Dazu gehören benutzerdefinierte CSS-Klassen, benutzerdefinierte Übersetzungen, Avatar-Anpassungen, Datumsformatierung und vieles mehr.

Siehe die Haupt-FastComments-Anpassungsdokumentation für die vollständige Liste der verfügbaren Anpassungsoptionen.

Arbeiten mit benutzerdefinierten Schriftarten

Wenn Ihre Seite benutzerdefinierte Schriftarten verwendet, übernimmt die Collab Chat UI diese Schriftarten aus dem CSS Ihrer Seite. Möglicherweise müssen Sie eine Widget-Anpassungsregel erstellen und in dieser Regel @import alle Schriftarten in das benutzerdefinierte CSS aufnehmen, wenn Sie wollen, dass das schwebende Chatfenster dieselben Schriftarten verwendet.

Live-Synchronisierung Internal Link

Echtzeit-Aktualisierungen

Collab Chat verwendet WebSocket-Verbindungen, um alle Unterhaltungen in Echtzeit über alle verbundenen Benutzer hinweg zu synchronisieren. Wenn jemand eine neue Annotation erstellt, einen Kommentar hinzufügt oder eine Diskussion löscht, sehen alle anderen Benutzer, die dieselbe Seite betrachten, die Aktualisierung sofort, ohne die Seite neu zu laden.

Wie die WebSocket-Synchronisierung funktioniert

Wenn Sie Collab Chat initialisieren, stellt das Widget eine WebSocket-Verbindung zu den FastComments-Servern her. Diese Verbindung bleibt für die Dauer der Sitzung des Benutzers offen und lauscht auf Updates, die sich auf die aktuelle Seite beziehen.

Das WebSocket-System verwendet drei Arten von Broadcast-Nachrichten für Collab Chat. Das new-text-chat-Ereignis wird ausgelöst, wenn jemand eine neue Annotation auf der Seite erstellt. Das updated-text-chat-Ereignis wird ausgelöst, wenn jemand eine bestehende Unterhaltung aktualisiert. Das deleted-text-chat-Ereignis wird ausgelöst, wenn jemand eine Annotation löscht.

Broadcast-ID-System

Um Echo-Effekte zu verhindern, bei denen Benutzer ihre eigenen Aktionen zurückgesendet sehen, enthält jede Aktualisierung eine eindeutige broadcastId. Wenn ein Benutzer eine Annotation erstellt oder aktualisiert, generiert sein Client für diese Operation eine UUID. Wenn der WebSocket die Aktualisierung an alle Clients zurücksendet, ignoriert der ursächliche Client die Aktualisierung, weil sie mit seiner eigenen broadcastId übereinstimmt.

Das stellt eine reibungslose Interaktion sicher, bei der Benutzer ihre Änderungen sofort in der UI sehen, ohne auf den Round-Trip über den Server warten zu müssen, während gleichzeitig gewährleistet ist, dass alle anderen Benutzer die Aktualisierung erhalten.

Live-Benutzeranzahl

Die obere Leiste zeigt die Anzahl der Benutzer an, die die Seite derzeit betrachten. Diese Zahl aktualisiert sich in Echtzeit, wenn Benutzer beitreten oder die Seite verlassen. Die Benutzeranzahl wird über dieselbe WebSocket-Verbindung bereitgestellt und erhöht bzw. verringert sich automatisch basierend auf Verbindungs- und Trennungsereignissen.

Verbindungsresilienz

Fällt die WebSocket-Verbindung aufgrund von Netzwerkproblemen oder Serverwartung aus, versucht das Widget automatisch, die Verbindung wiederherzustellen. Während der Wiederverbindungsphase können Benutzer weiterhin mit bestehenden Annotationen interagieren, sehen jedoch keine Echtzeit-Aktualisierungen von anderen Benutzern, bis die Verbindung wiederhergestellt ist.

Sobald die Verbindung wiederhergestellt ist, synchronisiert das Widget erneut, um sicherzustellen, dass keine Aktualisierungen verpasst wurden. Dies geschieht transparent, ohne dass eine Aktion des Benutzers erforderlich ist.

Bandbreitenüberlegungen

WebSocket-Nachrichten sind leichtgewichtig und enthalten nur die wesentlichen Informationen, die zur Zustands-Synchronisation benötigt werden. Das Erstellen einer neuen Annotation verbraucht typischerweise weniger als 1 KB Bandbreite. Das System beinhaltet außerdem intelligente Bündelung, um die Nachrichtenfrequenz in Phasen hoher Aktivität zu reduzieren.

Ihre Nutzungsmetriken im FastComments-Dashboard verfolgen pubSubMessageCount und pubSubBandwidth, sodass Sie die Echtzeit-Sync-Aktivität über Ihre Websites überwachen können.

Cross-Tab-Synchronisierung

Wenn ein Benutzer dieselbe Seite in mehreren Browser-Tabs geöffnet hat, erscheinen Aktualisierungen in einem Tab sofort in den anderen Tabs. Dies funktioniert über denselben WebSocket-Sync-Mechanismus und erfordert keine zusätzliche Konfiguration.

Sicherheit

WebSocket-Nachrichten werden über sichere Verbindungen (WSS) übertragen und beinhalten eine Mandantenvalidierung, um sicherzustellen, dass Benutzer nur Aktualisierungen für Unterhaltungen erhalten, zu deren Ansicht sie berechtigt sind. Der Server validiert alle Operationen, bevor er sie broadcastet, um unbefugten Zugriff oder Manipulationen zu verhindern.

API-Referenz Internal Link

API-Übersicht

Collab Chat stellt drei REST-API-Endpunkte zum programmatischen Verwalten von Textkonversationen bereit. Mit diesen Endpunkten können Sie Annotationen abrufen, erstellen und löschen, ohne das Browser-Widget zu verwenden.

Dies sind öffentliche Endpunkte, die Benutzer über Browser-Cookies authentifizieren. Sie verwenden keine API-Schlüssel. Benutzer müssen in FastComments in ihrem Browser angemeldet sein, um auf diese Endpunkte zugreifen zu können.

Basis-URL

Alle Collab Chat API-Endpunkte befinden sich unter:

Basis-URL
Copy Copy
1
2https://fastcomments.com/comment-collab-chats
3

Authentifizierung

Diese Endpunkte authentifizieren Benutzer über Browser-Cookies. Sie verwenden keine API-Schlüssel. Benutzer müssen in FastComments in ihrem Browser angemeldet sein, um auf diese Endpunkte zugreifen zu können.

Alle Konversationen abrufen

Ruft alle Textkonversationen für eine bestimmte Seite ab.

Endpunkt

GET-Endpunkt
Copy Copy
1
2GET /comment-collab-chats/:tenantId?urlId=<urlId>
3

Parameter

tenantId (Pfadparameter, erforderlich) ist Ihre FastComments Tenant-ID.

urlId (Query-Parameter, erforderlich) ist die Seitenkennung, für die Sie Konversationen abrufen möchten.

Antwort

Die Antwort enthält den API-Status, Informationen zur aktuellen Benutzersitzung, falls authentifiziert, ein Array von Konversationen mit ihren IDs, URLs und Textranges, eine bereinigte URL-Kennung, ein Flag, das angibt, ob der aktuelle Benutzer Site-Admin oder Moderator ist, sowie WebSocket-Verbindungsdetails für die Live-Synchronisierung einschließlich tenantIdWS, urlIdWS und userIdWS.

Beispielanfrage

GET-Anfragebeispiel
Copy Copy
1
2curl "https://fastcomments.com/comment-collab-chats/demo?urlId=my-article-page" \
3 --cookie "your-session-cookie"
4

Beispielantwort

GET-Antwortbeispiel
Copy Copy
1
2{
3 "status": "success",
4 "user": {
5 "id": "user123",
6 "username": "john_doe"
7 },
8 "conversations": [
9 {
10 "_id": "conv123",
11 "urlId": "my-article-page:p:0:15,0:45{abc123}",
12 "range": "0:15,0:45{abc123}"
13 },
14 {
15 "_id": "conv456",
16 "urlId": "my-article-page:h1:5:20,5:35{def456}",
17 "range": "5:20,5:35{def456}"
18 }
19 ],
20 "urlIdClean": "my-article-page",
21 "isSiteAdmin": false,
22 "tenantIdWS": "demo",
23 "urlIdWS": "my-article-page",
24 "userIdWS": "user123"
25}
26

Konversation erstellen

Erstellt eine neue Textkonversation für eine bestimmte Textauswahl.

Endpunkt

POST-Endpunkt
Copy Copy
1
2POST /comment-collab-chats/:tenantId
3

Parameter

tenantId (Pfadparameter, erforderlich) ist Ihre FastComments Tenant-ID.

Der Request-Body muss JSON sein und die folgenden erforderlichen Felder enthalten.

urlId (string, erforderlich) ist die Basis-Seitenkennung.

urlIdWithRange (string, erforderlich) ist die URL kombiniert mit dem Textrange, zum Beispiel my-page:p:0:15,0:45{abc123}.

pageTitle (string, erforderlich) ist der Titel der Seite.

selector (string, erforderlich) ist der DOM-Pfad zum Element, das den ausgewählten Text enthält.

range (string, erforderlich) ist der serialisierte Textrange im Format startOffset:endOffset,startOffset:endOffset{checksum}.

createdFromCommentId (string, erforderlich) ist die ID des Kommentars, der diesen Chat initiiert hat.

broadcastId (string, erforderlich) ist eine UUID für die Live-Synchronisation, um Echo-Effekte zu verhindern.

Antwort

Die Antwort enthält den API-Status und die ID der neu erstellten Konversation.

Beispielanfrage

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

Beispielantwort

POST-Antwortbeispiel
Copy Copy
1
2{
3 "status": "success",
4 "createdChatId": "conv789"
5}
6

Konversation löschen

Löscht eine vorhandene Textkonversation. Für diesen Endpunkt sind Admin- oder Moderatorberechtigungen erforderlich, oder die Konversation muss vom authentifizierten Benutzer erstellt worden sein.

Endpunkt

DELETE-Endpunkt
Copy Copy
1
2DELETE /comment-collab-chats/:tenantId/:chatId
3

Parameter

tenantId (Pfadparameter, erforderlich) ist Ihre FastComments Tenant-ID.

chatId (Pfadparameter, erforderlich) ist die ID der zu löschenden Konversation.

broadcastId (Request-Body, erforderlich) ist eine UUID für die Live-Synchronisation.

Beispielanfrage

DELETE-Anfragebeispiel
Copy Copy
1
2curl -X DELETE "https://fastcomments.com/comment-collab-chats/demo/conv789" \
3 --cookie "your-session-cookie" \
4 -H "Content-Type: application/json" \
5 -d '{
6 "broadcastId": "550e8400-e29b-41d4-a716-446655440001"
7 }'
8

Beispielantwort

DELETE-Antwortbeispiel
Copy Copy
1
2{
3 "status": "success"
4}
5

Ratenbegrenzung

Diese Endpunkte unterliegen der standardmäßigen FastComments API-Ratenbegrenzung. Die Rate-Limit-Middleware wird pro Tenant angewendet, um Missbrauch zu verhindern und gleichzeitig normale Nutzungsmuster zu ermöglichen.

Fehlerantworten

Alle Endpunkte geben standardmäßige HTTP-Statuscodes zurück. Eine 400-Antwort deutet auf ungültige Anfrageparameter hin. Eine 401-Antwort bedeutet, dass die Authentifizierung fehlgeschlagen ist. Eine 403-Antwort weist auf unzureichende Berechtigungen hin. Eine 404-Antwort bedeutet, dass die Konversation nicht gefunden wurde. Eine 429-Antwort zeigt an, dass das Rate-Limit überschritten wurde.

Fehlerantworten enthalten einen JSON-Body mit Details:

Fehler-Antwortbeispiel
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

Nutzungsverfolgung

Das Erstellen von Konversationen erhöht Ihre Nutzungsmetrik conversationCreateCount. Alle WebSocket-Synchronisationsaktivitäten erhöhen pubSubMessageCount und pubSubBandwidth. Sie können diese Metriken in Ihrem FastComments-Dashboard unter Nutzungsanalyse überwachen.

Haben Sie Fragen?

Das war's für FastComments Collab Chat! Wenn Sie Fragen haben, Hilfe bei der Implementierung benötigen oder Vorschläge für Funktionen haben, lassen Sie es uns bitte unten wissen oder wenden Sie sich an unser Support-Team.

Für Live-Beispiele sehen Sie sich Govscent.org an, das Collab Chat produktiv einsetzt.

Zu diesem Leitfaden beitragen