FastComments.com

Menu Icon

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

Početak rada

Početak rada
Primjeri
Dodavanje komentiranja u stvarnom vremenu u online knjige

Konfiguracija

Opcije konfiguracije
Ponašanje odabira teksta

Prilagodba

Prilagodba

Napredno

Sinkronizacija uživo
Referenca API-ja

Collab Chat

Dodajte inline komentare uživo u dokumente, knjige itd.

FastComments Collab Chat omogućuje korisnicima da označavaju i bilješke na bilo koji tekstualni sadržaj na vašoj web-stranici, stvarajući uvlaknute razgovore vezane uz određene odabire teksta. Korisnici mogu odabrati riječi, rečenice ili cijele odlomke kako bi započeli suradničke razgovore izravno unutar vašeg sadržaja.

Ova značajka je savršena za uredničke povratne informacije, suradničko čitanje, obrazovne platforme, pregled dokumenata i bilo koji scenarij u kojem želite kontekstualne rasprave usidrene u određenom tekstu.

Imajte na umu da su ovi dokumenti specifični za funkcionalnost Collab Chat. Komentiranje možete dodati i za sadržaje s puno stranica, poput knjiga, s nitom po stranici, bez korištenja collab chata. FastComments također ne naplaćuje po stranici ni po niti. Collab Chat se koristi upravo kada želite omogućiti korisnicima da odaberu tekst i komentiraju označeni dio teksta.

Možete vidjeti primjer ovdje.

Početak rada Internal Link

Brzi početak

Početak rada s Collab Chatom je jednostavan. Potrebni su vam FastComments Collab Chat skripta, HTML element koji sadrži tekst koji želite anotirati te konfiguracijski objekt s vašim Tenant ID-om.

Instalacija

Dodajte Collab Chat skriptu na svoju stranicu:

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

Osnovna implementacija

Evo minimalnog primjera:

Osnovna implementacija Collab Chata
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 <!-- Vaš spremnik sadržaja -->
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 <!-- Učitaj Collab Chat skriptu -->
16 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
17
18 <!-- Inicijaliziraj Collab Chat -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

Zamijenite 'demo' sa svojim stvarnim FastComments Tenant ID-om ako već nije, koji možete pronaći u svojem FastComments nadzornom panelu.

Kako to radi

Kada je inicijalizirano, korisnici mogu odabrati bilo koji tekst unutar ciljanog elementa. Nakon kratke odgode (3.5 sekundi na desktopu), pojavljuje se upit koji im omogućuje pokretanje rasprave. Kada je rasprava stvorena, na tekstu se pojavljuje vizualno isticanje. Drugi korisnici mogu prijeći mišem ili kliknuti na istaknuti tekst da bi pregledali i sudjelovali u raspravi. Sve rasprave se sinkroniziraju u stvarnom vremenu među svim posjetiteljima.

Demo uživo

Collab Chat možete vidjeti u akciji na našoj stranici s demo prikazom uživo.

Sljedeći koraci

Sada kada imate osnovno funkcionalnost, možete prilagoditi izgled i ponašanje u vodiču za Konfiguracijske opcije. Pogledajte vodič o ponašanju odabira teksta kako biste razumjeli kako funkcionira odabir teksta. Saznajte o stiliziranju i podršci za tamni način rada u vodiču za Prilagodbu. Za napredne integracije, istražite API Reference.

Frontend biblioteke

Sve FastComments frontend biblioteke (react, vue, angular, itd.) imaju Collab Chat.

Primjeri Internal Link

Osnovni primjer

Najjednostavniji način korištenja Collab Chata je ciljanje jednog spremnika sadržaja. Ovaj primjer pokazuje kako omogućiti označavanje teksta na članku:

Osnovni primjer Collab Chata
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

Primjer s prilagođenim URL ID-jem (po stranici knjige, članku itd.)

Po zadanim postavkama, Collab Chat koristi URL stranice u kombinaciji s putanjom elementa i rasponom teksta za identifikaciju razgovora. Možete navesti prilagođeni urlId kako biste imali veću kontrolu nad načinom grupiranja razgovora:

Collab Chat s prilagođenim URL ID-jem
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

Ovo je korisno ako se struktura vaših URL-ova promijeni, ali želite zadržati iste razgovore, ili ako želite dijeliti iste bilješke razgovora na više stranica.

Primjer s tamnim načinom

Ako vaša stranica ima tamnu pozadinu, omogućite podršku za tamni način kako bi korisničko sučelje chata izgledalo ispravno:

Collab Chat s tamnim načinom
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

Primjer s onemogućenom gornjom trakom

Po zadanim postavkama, Collab Chat prikazuje gornju traku s brojem korisnika i brojem rasprava. Možete je onemogućiti:

Collab Chat s onemogućenom gornjom trakom
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

Primjer s povratnim pozivom za broj komentara

Možete pratiti kada su komentari dodani ili ažurirani koristeći povratni poziv commentCountUpdated:

Collab Chat s povratnim pozivom za broj komentara
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

Primjer s više odjeljaka

Možete inicijalizirati Collab Chat na više zasebnih odjeljaka vaše stranice. Svaki odjeljak imat će svoje neovisne bilješke:

Collab Chat na više odjeljaka
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 // Initialize on intro section
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Initialize on main section
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

Dodavanje komentiranja u stvarnom vremenu u online knjige Internal Link

Možete inicijalizirati Collab Chat po stranici ako želite, i imati odvojene niti po stranici, jednostavno proslijedite parametar urlId vrijednost poput book-one-page1. Ova konfiguracija također radi za uobičajeni widget komentiranja.

Opcije konfiguracije Internal Link

Pregled

FastComments Collab Chat proširuje standardni FastComments widget za komentare, pa nasljeđuje sve konfiguracijske opcije osnovnog widgeta dok istovremeno dodaje nekoliko opcija specifičnih za tekstualne napomene.

Obavezna konfiguracija

tenantId

Vaš FastComments Tenant ID je obavezan. Možete ga pronaći u svom FastComments nadzornoj ploči.

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

Opcije specifične za Collab Chat

urlId

Prema zadanim postavkama, Collab Chat generira jedinstveni identifikator za svaki razgovor na temelju URL-a stranice, DOM putanje do elementa i odabranog raspona teksta. To možete nadjačati prilagođenim urlId.

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

Ovo je korisno kada se struktura vašeg URL-a može promijeniti, ali želite zadržati iste razgovore, ili kada želite dijeliti napomene na više stranica.

topBarTarget

Kontrolira prikaz gornje trake koja prikazuje broj korisnika i broj rasprava. Postavite na null da potpuno onemogućite gornju traku, ili navedite DOM element da je prikažete na određenoj lokaciji.

Primjer konfiguracije
Copy Copy
1
2// Disable top bar
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Render top bar in custom location
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Omogućite stil tamnog načina rada kada vaša stranica ima tamnu pozadinu. Ova detekcija je automatska, ali može biti poželjno da je nadjačate.

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

commentCountUpdated

Povratna funkcija koja se aktivira svaki put kada se broj komentara promijeni. Ovo je korisno za ažuriranje UI elemenata poput znački ili naslova stranica.

Primjer konfiguracije
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

Naslijeđene konfiguracijske opcije

Budući da Collab Chat proširuje standardni widget za komentare, možete koristiti bilo koju konfiguracijsku opciju iz osnovnog FastComments widgeta. Evo nekoliko često korištenih opcija:

locale

Postavite jezik za UI widgeta. FastComments podržava desetke jezika.

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

readonly

Učinite sve razgovore samo za čitanje. Korisnici mogu pregledavati postojeće napomene, ali ne mogu stvarati nove niti odgovarati.

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

sso i simpleSSO

Integrirajte se sa svojim sustavom autentifikacije pomoću jedinstvene prijave (Single Sign-On).

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

Pogledajte SSO dokumentaciju za potpune detalje o opcijama autentifikacije.

maxReplyDepth

Kontrolirajte koliko razina dubine odgovori mogu ići. Prema zadanim postavkama, Collab Chat postavlja ovo na 0, što znači da su svi komentari ravni (bez ugniježđenih odgovora). To možete promijeniti ako želite razgovore s nitima.

Primjer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Allow 3 levels of nesting
5});
6

Interna konfiguracija

Ove opcije automatski postavlja Collab Chat i ne bi ih trebalo nadjačavati:

productId je automatski postavljen na 3 za Collab Chat. Proširenje floating-chat se automatski učitava kako bi omogućilo funkcionalnost prozora za razgovor. Widget automatski detektira mobilne uređaje (zasloni širine ispod 768px) i prilagođava UI sukladno tome.

Potpuni primjer

Evo primjera koji prikazuje više konfiguracijskih opcija zajedno:

Primjer konfiguracije
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 // Your SSO config
13 },
14 maxReplyDepth: 1
15});
16

Za potpuni popis svih dostupnih konfiguracijskih opcija naslijeđenih iz osnovnog widgeta, pogledajte glavnu FastComments dokumentaciju konfiguracije.

Ponašanje odabira teksta Internal Link

Kako funkcionira odabir teksta

Kad korisnici odaberu tekst unutar Collab Chat kontejnera, widget bilježi taj odabir i omogućuje im pokretanje rasprave. Odabir može biti mali poput jedne riječi ili velik koliko više odlomaka koji obuhvaćaju različite elemente.

Kašnjenje odabira

Na stolnim uređajima postoji kašnjenje od 3,5 sekunde između trenutka kada korisnik odabere tekst i pojave upita za raspravu. To sprječava treperenje korisničkog sučelja kada korisnici jednostavno označavaju tekst radi kopiranja ili čitanja. Na mobilnim uređajima upit se pojavljuje odmah jer je odabir teksta na zaslonima osjetljivim na dodir obično namjerniji.

Jedinstveni ID-ovi razgovora

Svaki razgovor dobiva jedinstveni urlId koji kombinira URL stranice, putanju DOM elementa i serijalizirani raspon teksta. To osigurava da svaki odabir teksta stvori poseban razgovor koji se kasnije može ponovno pronaći.

Ako u svojoj konfiguraciji navedete prilagođeni urlId, on će se kombinirati s putanjom elementa i rasponom teksta kako bi se stvorio konačni identifikator.

Vizualna isticanja

Kad za određeni odabir teksta postoji rasprava, taj tekst dobiva vizualno isticanje. Isticanje se ostvaruje pomoću boja pozadine i pojavljuje se pri prelasku mišem ili kada je pridruženi chat prozor otvoren.

Sustav isticanja radi tako da omota odabrani tekst u poseban element koji se može stilizirati. Ovaj pristup osigurava da isticanja ostanu točna čak i kada je temeljna HTML struktura složena.

Pozicioniranje prozora chata

Kada korisnik klikne na isticanje ili stvori novu bilješku, pored odabranog teksta pojavi se prozor chata. Widget automatski izračunava najbolju poziciju za taj prozor na temelju dostupnog prostora unutar prikaza (viewport).

Sustav pozicioniranja koristi CSS klase poput to-right, to-left, to-top i to-bottom za označavanje u kojem smjeru bi se prozor chata trebao proširiti od isticanja. Na mobilnim uređajima (zasloni širi manje od 768px), prozor chata uvijek se pojavljuje preko cijelog zaslona radi bolje upotrebljivosti.

Dimenzije chat prozora

Chat prozori na stolnim računalima široki su 410px s razmakom od 20px i vizualnom strelicom od 16px koja pokazuje na istaknuti tekst. Te dimenzije su fiksne kako bi se osiguralo dosljedno ponašanje, ali izgled možete prilagoditi pomoću CSS-a.

Odabiri koji obuhvaćaju više elemenata

Korisnici mogu odabrati tekst koji se proteže kroz više HTML elemenata, primjerice označavanje od sredine jednog odlomka do početka drugog. Sustav serijalizacije raspona ispravno obrađuje ovo i istaknut će sav odabrani tekst čak i preko granica elemenata.

Kompatibilnost preglednika

Sustav odabira teksta koristi standardni API window.getSelection() koji je podržan u svim modernim preglednicima. Za starije verzije Internet Explorera koristi se povratna kompatibilnost s document.selection.

Postojanost odabira

Kad se za odabir teksta stvori razgovor, ta bilješka ostaje čak i ako se stranica ponovno učita. Serijalizirani raspon i DOM putanja omogućuju widgetu da ponovno obnovi isticanja na točno istom mjestu kada se korisnici vrate na stranicu.

Ovo radi pouzdano sve dok sadržaj vaše stranice ostane stabilan. Ako promijenite tekstualni sadržaj ili restrukturirate HTML, postojeće bilješke možda više neće pravilno odgovarati tekstu. Iz tog razloga najbolje je izbjegavati velike promjene sadržaja na stranicama s aktivnim bilješkama ili razmotriti migraciju bilješki kada su promjene sadržaja neophodne.

Prilagodba Internal Link

Podrška za tamni način

Dinamički tamni način

Ako je tamni način na vašoj stranici kontroliran dodavanjem klase .dark elementu body, Collab Chat UI automatski će to poštovati bez potrebe za ponovnim inicijaliziranjem. Stilovi widgeta dizajnirani su da reagiraju na prisutnost te klase.

Dark Mode CSS Example
Copy Copy
1
2/* Vaš CSS za tamni način */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

Prilagođeno stiliziranje putem CSS-a

Možete prilagoditi izgled isticanja, prozora za chat i drugih elemenata pomoću CSS-a. Widget dodaje specifične klase koje možete ciljati u svom stilskom listu.

Isticanje teksta koristi sustav stiliziranja komentarskih oblačića FastComments, pa će sve prilagodbe koje ste primijenili na standardni widget za komentare također utjecati na Collab Chat.

Prilagodba gornje trake

Gornja traka prikazuje broj korisnika online i broj rasprava. Poziciju možete prilagoditi tako da navedete prilagođeni element kao topBarTarget:

Custom Top Bar Location
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Ili je u potpunosti onemogućite postavljanjem na null:

Disable Top Bar
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Ponašanje na mobilnim uređajima

Na zaslonima užim od 768px, Collab Chat se automatski prebacuje u izgled optimiziran za mobilne uređaje. Prozori chata pojavljuju se preko cijelog zaslona umjesto da lebde pored teksta, a kašnjenje pri odabiru je uklonjeno radi brže interakcije.

Ovo ponašanje je ugrađeno i ne zahtijeva konfiguraciju. Widget automatski detektira veličinu zaslona i prilagođava se u skladu s tim.

Izgled prozora chata

Prozori chata na desktopu imaju širinu 410px uz strelicu od 16px koja pokazuje na istaknuti tekst. Prozori se automatski postavljaju ovisno o raspoloživom prostoru u viewportu, koristeći klase pozicioniranja poput to-right, to-left, to-top, i to-bottom.

Možete dodati prilagođeni CSS za podešavanje boja, fontova, razmaka ili drugih vizualnih svojstava tih prozora. Prozori chata koriste istu strukturu komponenata kao standardni FastComments widget, pa nasljeđuju sve globalne prilagodbe koje ste primijenili.

Lokalizacija

Collab Chat podržava sve iste opcije lokalizacije kao standardni FastComments widget. Postavite opciju locale kako biste prikazali tekst sučelja na različitim jezicima:

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

FastComments podržava desetke jezika. Postavka locale utječe na sav tekst sučelja, uključujući poruke, gumbe i tekst u poljima za unos (placeholder).

Naslijeđene opcije prilagodbe

Budući da Collab Chat proširuje standardni widget za komentare, nasljeđuje sve opcije prilagodbe iz osnovnog widgeta. To uključuje prilagođene CSS klase, prilagođene prijevode, prilagodbu avatara, formatiranje datuma i još mnogo toga.

Pogledajte glavnu FastComments dokumentaciju o prilagodbi za potpuni popis dostupnih opcija prilagodbe.

Rad s prilagođenim fontovima

Ako vaša stranica koristi prilagođene fontove, Collab Chat UI će naslijediti te fontove iz CSS-a vaše stranice. Možda ćete morati stvoriti pravilo za prilagodbu widgeta i @import bilo kojih fontova u prilagođenom CSS-u u tom pravilu ako želite da plutajući prozor chata koristi iste fontove.

Sinkronizacija uživo Internal Link

Ažuriranja u stvarnom vremenu

Collab Chat koristi WebSocket veze za sinkronizaciju svih razgovora u stvarnom vremenu među svim povezanim korisnicima. Kada netko stvori novu bilješku, doda komentar ili obriše raspravu, svi ostali korisnici koji gledaju istu stranicu odmah vide ažuriranje bez osvježavanja.

Kako WebSocket sinkronizacija funkcionira

Kad inicijalizirate Collab Chat, widget uspostavlja WebSocket vezu s FastComments poslužiteljima. Ta veza ostaje otvorena tijekom trajanja korisničke sesije i sluša ažuriranja vezana uz trenutnu stranicu.

Sustav WebSocket koristi tri vrste broadcast poruka za Collab Chat. Događaj new-text-chat aktivira se kad netko kreira novu bilješku na stranici. Događaj updated-text-chat aktivira se kad netko ažurira postojeći razgovor. Događaj deleted-text-chat aktivira se kad netko obriše bilješku.

Sustav Broadcast ID-a

Kako bi se spriječio efekt odjeka u kojem korisnici vide svoje vlastite akcije kako im se vraćaju, svako ažuriranje uključuje jedinstveni broadcastId. Kad korisnik stvori ili ažurira bilješku, njegov klijent generira UUID za tu operaciju. Kada WebSocket emitira ažuriranje natrag svim klijentima, izvorni klijent zanemaruje ažuriranje jer odgovara njegovom vlastitom broadcastId.

To osigurava glatku interakciju u kojoj korisnici odmah vide svoje promjene u korisničkom sučelju bez čekanja na putovanje podataka kroz poslužitelj, a istovremeno jamči da svi ostali korisnici dobiju ažuriranje.

Broj korisnika uživo

Gornja traka prikazuje broj korisnika koji trenutno gledaju stranicu. Taj se broj ažurira u stvarnom vremenu kako se korisnici pridružuju i napuštaju. Broj korisnika se prenosi putem iste WebSocket veze i automatski se povećava/smanjuje na temelju događaja povezivanja i prekida veze.

Otpornost veze

Ako WebSocket veza padne zbog mrežnih problema ili održavanja poslužitelja, widget automatski pokušava ponovno uspostaviti vezu. Tijekom razdoblja ponovnog povezivanja, korisnici i dalje mogu raditi s postojećim bilješkama, ali neće vidjeti ažuriranja u stvarnom vremenu od drugih korisnika dok veza ne bude ponovno uspostavljena.

Nakon ponovnog povezivanja, widget se ponovo sinkronizira kako bi osigurao da nijedno ažuriranje nije propušteno. To se događa transparentno bez potrebe za intervencijom korisnika.

Razmatranja propusnosti

WebSocket poruke su male i sadrže samo osnovne informacije potrebne za sinkronizaciju stanja. Kreiranje nove bilješke obično koristi manje od 1KB propusnosti. Sustav također uključuje inteligentno grupiranje poruka kako bi se smanjila učestalost poruka tijekom perioda visoke aktivnosti.

Vaše metrike korištenja u FastComments nadzornoj ploči prate pubSubMessageCount i pubSubBandwidth kako biste mogli pratiti aktivnost sinkronizacije u stvarnom vremenu na vašim stranicama.

Sinkronizacija između kartica

Ako korisnik ima istu stranicu otvorenu u više pregledničkih kartica, ažuriranja u jednoj kartici pojavljuju se odmah u ostalim karticama. To radi putem istog WebSocket mehanizma sinkronizacije i ne zahtijeva dodatnu konfiguraciju.

Sigurnost

WebSocket poruke se prenose preko sigurnih veza (WSS) i uključuju provjeru tenanta kako bi se osiguralo da korisnici primaju samo ažuriranja za razgovore za koje su ovlašteni. Poslužitelj validira sve operacije prije njihovog emitiranja kako bi spriječio neovlašteni pristup ili manipulaciju.

Referenca API-ja Internal Link

Pregled API-ja

Collab Chat pruža tri REST API endpointa za programsko upravljanje tekstualnim razgovorima. Ovi endpointi omogućuju dohvaćanje, stvaranje i brisanje napomena bez korištenja widgeta u pregledniku.

Ovo su javni endpointi koji autentificiraju korisnike putem kolačića preglednika. Ne koriste API ključeve. Korisnici moraju biti prijavljeni u FastComments u svom pregledniku kako bi pristupili ovim endpointima.

Osnovni URL

Svi Collab Chat API endpointi nalaze se pod:

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

Autentifikacija

Ovi endpointi autentificiraju korisnike putem kolačića preglednika. Ne koriste API ključeve. Korisnici moraju biti prijavljeni u FastComments u svom pregledniku kako bi pristupili ovim endpointima.

Dohvati sve razgovore

Dohvaća sve tekstualne razgovore za određenu stranicu.

Endpoint

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

Parametri

tenantId (parametar putanje, obavezan) je vaš FastComments Tenant ID.

urlId (query parametar, obavezan) je identifikator stranice za koju želite dohvatiti razgovore.

Odgovor

Odgovor uključuje status API-ja, informacije o trenutnoj korisničkoj sesiji ako je korisnik autentificiran, niz razgovora s njihovim ID-jevima, URL-ovima i tekstualnim rasponima, očišćeni URL identifikator, zastavicu koja označava je li trenutni korisnik administrator stranice ili moderator, te detalje WebSocket veze za sinkronizaciju u stvarnom vremenu uključujući tenantIdWS, urlIdWS i userIdWS.

Primjer zahtjeva

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

Primjer odgovora

Primjer GET odgovora
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

Stvori razgovor

Stvara novi tekstualni razgovor za određeni odabir teksta.

Endpoint

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

Parametri

tenantId (parametar putanje, obavezan) je vaš FastComments Tenant ID.

Tijelo zahtjeva mora biti JSON i mora uključivati ove obavezne polja.

urlId (string, obavezan) je osnovni identifikator stranice.

urlIdWithRange (string, obavezan) je URL kombiniran s tekstualnim rasponom, na primjer my-page:p:0:15,0:45{abc123}.

pageTitle (string, obavezan) je naslov stranice.

selector (string, obavezan) je DOM putanja do elementa koji sadrži odabrani tekst.

range (string, obavezan) je serializirani tekstualni raspon u formatu startOffset:endOffset,startOffset:endOffset{checksum}.

createdFromCommentId (string, obavezan) je ID komentara koji je pokrenuo ovaj razgovor.

broadcastId (string, obavezan) je UUID za sinkronizaciju u stvarnom vremenu radi sprječavanja efekata odjeka.

Odgovor

Odgovor uključuje status API-ja i ID novostvorenog razgovora.

Primjer zahtjeva

Primjer POST zahtjeva
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

Primjer odgovora

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

Izbriši razgovor

Briše postojeći tekstualni razgovor. Ovaj endpoint zahtijeva administratorske ili moderatorske dozvole, ili razgovor mora biti stvorio autentificirani korisnik.

Endpoint

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

Parametri

tenantId (parametar putanje, obavezan) je vaš FastComments Tenant ID.

chatId (parametar putanje, obavezan) je ID razgovora koji treba izbrisati.

broadcastId (tijelo zahtjeva, obavezan) je UUID za sinkronizaciju u stvarnom vremenu.

Primjer zahtjeva

Primjer DELETE zahtjeva
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

Primjer odgovora

Primjer DELETE odgovora
Copy Copy
1
2{
3 "status": "success"
4}
5

Ograničenje brzine

Ovi endpointi podliježu standardnom ograničenju brzine FastComments API-ja. Middleware za ograničenje brzine primjenjuje se po najmoprimcu (tenant) kako bi se spriječila zloupotreba uz omogućavanje uobičajenih obrazaca korištenja.

Odgovori o pogreškama

Svi endpointi vraćaju standardne HTTP statusne kodove. Odgovor 400 označava nevažeće parametre zahtjeva. Odgovor 401 znači da je autentifikacija nije uspjela. Odgovor 403 označava nedovoljne dozvole. Odgovor 404 znači da razgovor nije pronađen. Odgovor 429 označava prekoračenje ograničenja brzine.

Odgovori o pogreškama uključuju JSON tijelo s detaljima:

Primjer odgovora o pogrešci
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

Praćenje korištenja

Stvaranje razgovora povećava vašu metriku korištenja conversationCreateCount. Sva aktivnost WebSocket sinkronizacije povećava pubSubMessageCount i pubSubBandwidth. Ove metrike možete pratiti u svojoj FastComments upravljačkoj ploči pod analitikom korištenja.

Imate pitanja?

To je sve za FastComments Collab Chat! Ako imate bilo kakvih pitanja, trebate pomoć s implementacijom ili imate prijedloge za značajke, molimo obavijestite nas u nastavku ili se obratite našem timu za podršku.

Za primjere uživo, pogledajte Govscent.org koji koristi Collab Chat u produkciji.

Doprinesite ovom vodiču