Collab Chat

Grundlæggende eksempel

Den enkleste måde at bruge Collab Chat på er at målrette et enkelt indholdsområde. Dette eksempel viser, hvordan du aktiverer tekstannoteringer på en artikel:

Grundlæggende Collab Chat-eksempel

Copy Run

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

Eksempel med tilpasset URL-id (pr. bogside, artikel osv.)

Som standard bruger Collab Chat sidens URL kombineret med elementstien og tekstområdet til at identificere samtaler. Du kan angive et tilpasset urlId for at få mere kontrol over, hvordan samtaler grupperes:

Collab Chat med tilpasset URL ID

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

Dette er nyttigt, hvis din URL-struktur ændrer sig, men du vil bevare de samme samtaler, eller hvis du vil dele de samme samtaleannoteringer på tværs af flere sider.

Eksempel med mørk tilstand

Hvis dit site har en mørk baggrund, aktiver understøttelse af mørk tilstand for at sikre, at chat-brugergrænsefladen ser korrekt ud:

Collab Chat med mørk tilstand

Copy Run

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

Eksempel med topbjælke deaktiveret

Som standard viser Collab Chat en topbjælke med antal brugere og antal diskussioner. Du kan deaktivere den:

Collab Chat with Top Bar Disabled

Copy Run

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

Eksempel med callback for kommentarantal

Du kan registrere, når kommentarer bliver tilføjet eller opdateret, ved hjælp af commentCountUpdated-callback'en:

Collab Chat med callback for kommentarantal

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

Eksempel med flere sektioner

Du kan initialisere Collab Chat på flere separate sektioner af din side. Hver sektion får sine egne uafhængige annoteringer:

Collab Chat on Multiple Sections

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 // Initialiser på intro-sektionen

15 FastCommentsCollabChat(document.getElementById('intro-section'), {

16 tenantId: 'demo',

17 urlId: 'my-article-intro'

18 });

19

20 // Initialiser på hovedsektionen

21 FastCommentsCollabChat(document.getElementById('main-section'), {

22 tenantId: 'demo',

23 urlId: 'my-article-main'

24 });

25</script>

26

Du kan initialisere Collab Chat pr. side, hvis ønsket, og have separate tråde pr. side, giv blot urlId-parameteren en værdi som book-one-page1. Denne konfiguration virker også for den normale kommenteringswidget.

Sådan fungerer tekstmarkering

Når brugere markerer tekst i Collab Chat-containeren, fanger widgetten markeringen og giver dem mulighed for at starte en diskussion. Markeringen kan være så lille som et enkelt ord eller så stor som flere afsnit, der spænder over forskellige elementer.

Markeringsforsinkelse

På stationære enheder er der en forsinkelse på 3,5 sekunder mellem, hvornår en bruger markerer tekst, og hvornår diskussionsprompten vises. Dette forhindrer, at brugerfladen flimrer, når brugere blot markerer tekst for at kopiere eller læse den. På mobile enheder vises prompten med det samme, da tekstmarkering er mere bevidst på touchskærme.

Unikke samtale-ID'er

Hver samtale får et unikt urlId, der kombinerer sidens URL, DOM-elementstien og det serialiserede tekstområde. Dette sikrer, at hver tekstmarkering skaber en distinkt samtale, som kan findes igen senere.

Hvis du angiver et brugerdefineret urlId i din konfiguration, vil det blive kombineret med elementstien og tekstområdet for at danne den endelige identifikator.

Visuelle fremhævninger

Når der findes en diskussion for en bestemt tekstmarkering, får teksten en visuel fremhævning. Fremhævningen implementeres med baggrundsfarver og vises ved hover, eller når det tilknyttede chatvindue er åbent.

Fremhævningssystemet fungerer ved at indpakke den markerede tekst i et specielt element, som kan styles. Denne tilgang sikrer, at fremhævninger forbliver præcise, selv når den underliggende HTML-struktur er kompleks.

Placering af chatvinduer

Når en bruger klikker på en fremhævning eller opretter en ny annotering, vises et chatvindue nær den markerede tekst. Widgetten beregner automatisk den bedste placering for dette vindue baseret på den tilgængelige plads i viewporten.

Positioneringssystemet bruger CSS-klasser som to-right, to-left, to-top og to-bottom til at angive, i hvilken retning chatvinduet skal strække sig fra fremhævningen. På mobile enheder (skærme under 768px i bredden) vises chatvinduet altid i fuldskærm for bedre brugervenlighed.

Chatvinduets dimensioner

Chatvinduer er 410px brede på stationære enheder med 20px afstand og en 16px visuel pil, der peger på den fremhævede tekst. Disse dimensioner er faste for at sikre konsistent adfærd, men du kan tilpasse udseendet med CSS.

Markeringer på tværs af elementer

Brugere kan markere tekst, der spænder over flere HTML-elementer, f.eks. ved at fremhæve fra midten af ét afsnit til begyndelsen af et andet. Range-serialiseringssystemet håndterer dette korrekt og vil fremhæve hele den markerede tekst, selv på tværs af elementgrænser.

Browserkompatibilitet

Tekstmarkeringssystemet bruger standard-API'en window.getSelection(), som understøttes i alle moderne browsere. For ældre versioner af Internet Explorer falder det tilbage til document.selection af hensyn til kompatibiliteten.

Vedvarende markeringer

Når en samtale er oprettet for en tekstmarkering, forbliver annoteringen, selv hvis siden genindlæses. Det serialiserede område og DOM-stien gør det muligt for widgetten at gendanne fremhævninger på præcis samme sted, når brugerne vender tilbage til siden.

Dette fungerer pålideligt, så længe dit sideindhold forbliver stabilt. Hvis du ændrer tekstindholdet eller omstrukturerer din HTML, vil eksisterende annoteringer muligvis ikke længere passe korrekt til teksten. Af denne grund er det bedst at undgå større indholdsændringer på sider med aktive annoteringer, eller overveje at migrere annoteringer, når indholdsændringer er nødvendige.

Understøttelse af mørk tilstand

Dynamisk mørk tilstand

Hvis dit sites mørke tilstand styres ved at tilføje en .dark-klasse til body-elementet, vil Collab Chat UI automatisk respektere dette uden at kræve reinitialisering. Widget'ens stile er designet til at reagere på tilstedeværelsen af denne klasse.

Eksempel på CSS til mørk tilstand

Copy

1

2/* Din CSS til mørk tilstand */

3body.dark {

4 background: #1a1a1a;

5 color: #ffffff;

6}

7

Brugerdefineret styling med CSS

Du kan tilpasse udseendet af markeringer, chatvinduer og andre elementer ved hjælp af CSS. Widget'en tilføjer specifikke klasser, som du kan målrette i dit stylesheet.

Tekstmarkeringer bruger FastComments' comment bubble-styling system, så eventuelle tilpasninger, du har anvendt på den standard kommenteringswidget, også vil påvirke Collab Chat.

Tilpasning af topbjælken

Topbjælken viser antallet af brugere online og antallet af diskussioner. Du kan tilpasse dens position ved at angive et brugerdefineret element som topBarTarget:

Brugerdefineret topbjælkeplacering

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 topBarTarget: document.getElementById('my-custom-header')

5});

6

Eller deaktiver den helt ved at sætte den til null:

Deaktiver topbjælken

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 topBarTarget: null

5});

6

Mobiladfærd

På skærme under 768px bredde skifter Collab Chat automatisk til et mobiloptimeret layout. Chatvinduer vises fuldskærm i stedet for at flyde ved siden af teksten, og forsinkelsen ved markering fjernes for mere umiddelbar interaktion.

Denne opførsel er indbygget og kræver ingen konfiguration. Widget'en registrerer skærmstørrelsen automatisk og tilpasser sig derefter.

Udseende af chatvinduet

Chatvinduer er 410px brede på desktop med en 16px pil, der peger mod den fremhævede tekst. Vinduerne positionerer sig automatisk baseret på tilgængelig viewport-plads og bruger positioneringsklasser som to-right, to-left, to-top og to-bottom.

Du kan tilføje brugerdefineret CSS for at justere farver, skrifttyper, afstande eller andre visuelle egenskaber af disse vinduer. Chatvinduerne bruger samme komponentstruktur som den standard FastComments-widget, så de arver alle globale tilpasninger, du har anvendt.

Lokalisering

Collab Chat understøtter alle de samme lokaliseringsmuligheder som den standard FastComments-widget. Indstil locale-optionen for at vise UI-tekst på forskellige sprog:

Indstil lokalitet

Copy

1

2FastCommentsCollabChat(element, {

3 tenantId: 'demo',

4 locale: 'es' // Spansk

5});

6

FastComments understøtter dusinvis af sprog. Locale-indstillingen påvirker al UI-tekst, inklusive prompts, knapper og pladsholdertekst.

Arvede tilpasningsmuligheder

Da Collab Chat udvider den standard kommenteringswidget, arver den alle tilpasningsmuligheder fra basiswidget'en. Dette inkluderer brugerdefinerede CSS-klasser, brugerdefinerede oversættelser, avatar-tilpasning, datoformattering og meget mere.

Se hoveddokumentationen for FastComments-tilpasning for den komplette liste over tilpasningsmuligheder, der er tilgængelige.

Arbejde med brugerdefinerede skrifttyper

Hvis dit site bruger brugerdefinerede skrifttyper, vil Collab Chat UI arve disse skrifttyper fra din sides CSS. Du kan være nødt til at oprette en widget-tilpasningsregel og @import eventuelle skrifttyper i den brugerdefinerede CSS i den regel, hvis du ønsker, at det flydende chatvindue skal bruge de samme skrifttyper.

Opdateringer i realtid

Collab Chat bruger WebSocket-forbindelser til at synkronisere alle samtaler i realtid på tværs af alle tilsluttede brugere. Når nogen opretter en ny annotering, tilføjer en kommentar eller sletter en diskussion, ser alle andre brugere, der ser samme side, opdateringen med det samme uden at genindlæse.

Hvordan WebSocket-synkronisering fungerer

Når du initialiserer Collab Chat, etablerer widgeten en WebSocket-forbindelse til FastComments-serverne. Denne forbindelse forbliver åben i brugerens session og lytter efter opdateringer relateret til den aktuelle side.

WebSocket-systemet bruger tre typer broadcast-beskeder for Collab Chat. new-text-chat-begivenheden udløses, når nogen opretter en ny annotering på siden. updated-text-chat-begivenheden udløses, når nogen opdaterer en eksisterende samtale. deleted-text-chat-begivenheden udløses, når nogen sletter en annotering.

Broadcast ID-system

For at forhindre ekko-effekter, hvor brugere ser deres egne handlinger blive broadcastet tilbage til dem, indeholder hver opdatering en unik broadcastId. Når en bruger opretter eller opdaterer en annotering, genererer deres klient en UUID for den handling. Når WebSocket'en broadcaster opdateringen tilbage til alle klienter, ignorerer den oprindelige klient opdateringen, fordi den matcher dens eget broadcastId.

Dette sikrer en glidende interaktion, hvor brugere ser deres ændringer med det samme i brugergrænsefladen uden at vente på tur/retur gennem serveren, samtidig med at alle andre brugere stadig modtager opdateringen.

Live-brugerantal

Topbaren viser antallet af brugere, der i øjeblikket ser siden. Dette antal opdateres i realtid, efterhånden som brugere slutter sig til og forlader siden. Brugerantallet leveres gennem den samme WebSocket-forbindelse og øges/formindskes automatisk baseret på forbindelses- og afbrydelsesbegivenheder.

Forbindelsesstabilitet

Hvis WebSocket-forbindelsen falder på grund af netværksproblemer eller servervedligeholdelse, forsøger widgeten automatisk at genoprette forbindelsen. I løbet af genoprettelsesperioden kan brugere stadig interagere med eksisterende annoteringer, men de vil ikke se realtidsopdateringer fra andre brugere, indtil forbindelsen er genoprettet.

Når forbindelsen er genoprettet, resynkroniserer widgeten for at sikre, at ingen opdateringer gik tabt. Dette sker transparent uden at kræve brugerintervention.

Båndbreddehensyn

WebSocket-beskeder er lette og indeholder kun de væsentlige oplysninger, der er nødvendige for at synkronisere tilstanden. Oprettelse af en ny annotering bruger typisk mindre end 1KB båndbredde. Systemet inkluderer også intelligent batching for at reducere beskedfrekvensen under perioder med høj aktivitet.

Dine brugermetrikker i FastComments-dashboardet sporer pubSubMessageCount og pubSubBandwidth, så du kan overvåge realtids-synkroniseringsaktivitet på tværs af dine sites.

Synkronisering på tværs af faner

Hvis en bruger har samme side åben i flere faner i browseren, vises opdateringer i én fane med det samme i de andre faner. Dette fungerer gennem den samme WebSocket-synkroniseringsmekanisme og kræver ingen ekstra konfiguration.

Sikkerhed

WebSocket-beskeder transmitters over sikre forbindelser (WSS) og inkluderer tenant-validering for at sikre, at brugere kun modtager opdateringer for samtaler, de har tilladelse til at se. Serveren validerer alle operationer, før de broadcastes, for at forhindre uautoriseret adgang eller manipulation.