FastComments Image Chat omogućuje interaktivne rasprave na slikama tako da korisnicima dopušta da kliknu bilo gdje na slici kako bi stvorili točke za raspravu. Korisnici mogu kliknuti na određene dijelove slika kako bi započeli razgovore o tim područjima, stvarajući vizualne oznake koje pokazuju gdje se rasprave nalaze.
Ova značajka je savršena za povratne informacije o dizajnu, recenzije proizvoda, obrazovne materijale s dijagramima, foto galerije s komentarima i bilo koji scenarij u kojem želite kontekstualne rasprave vezane uz određene lokacije na slici.
Početak rada 
Slučajevi upotrebe
Image Chat izvrsno funkcionira za povratne informacije o dizajnu gdje timovi trebaju raspravljati o određenim elementima u maketama ili snimkama zaslona. Web‑stranice za recenzije proizvoda mogu omogućiti korisnicima raspravu o specifičnim značajkama vidljivim na fotografijama proizvoda. Obrazovne platforme mogu ga koristiti za raspravu o dijagramima, kartama ili znanstvenim slikama. Foto galerije mogu postati interaktivne s komentarima vezanim uz određene lokacije. Stranice nekretnina mogu dopustiti gledateljima da raspravljaju o pojedinim značajkama vidljivim na fotografijama objekata.
Brzi početak
Početak rada s Image Chatom je jednostavan. Trebate FastComments Image Chat skriptu, element slike ili spremnik sa slikom i konfiguracijski objekt s vašim Tenant ID.
Instalacija
Dodajte Image Chat skriptu na svoju stranicu:
Osnovna implementacija
Evo minimalnog primjera:
Run 
Zamijenite 'demo' sa svojim stvarnim FastComments Tenant ID-om ako već nije, koji možete pronaći u svojoj FastComments dashboard.
Kako radi
Nakon inicijalizacije, korisnici mogu kliknuti bilo gdje na slici. Kada se dogodi klik, na toj lokaciji pojavi se vizualni kvadratni marker i otvori se chat prozor. Ostali korisnici mogu vidjeti sve markere i kliknuti ih da pregledaju ili sudjeluju u tim raspravama. Sve rasprave se sinkroniziraju u stvarnom vremenu među svim posjetiteljima.
Widget koristi pozicioniranje temeljeno na postotcima, pa markeri ostaju na ispravnom mjestu čak i kada se slika promijeni veličinu ili se pregledava na različitim veličinama zaslona.
Demo uživo
Možete vidjeti Image Chat u akciji na našoj demo stranici uživo.
Sljedeći koraci
Sada kada imate osnovne funkcionalnosti, možete prilagoditi izgled i ponašanje u vodiču Configuration Options. Pogledajte vodič Responsive Design kako biste razumjeli kako funkcionira pozicioniranje temeljeno na postotcima. Saznajte o stiliziranju i podršci za tamni način rada u vodiču Customization. Za napredne integracije istražite API Reference.
Frontend biblioteke
Sve FastComments frontend biblioteke (react, vue, angular, itd.) imaju Image Chat.
Primjeri
Osnovni primjer
Najjednostavniji način korištenja Image Chata je ciljanje jednog elementa slike. Ovaj primjer pokazuje kako omogućiti interaktivne rasprave na slici:
Run Primjer s kontejnerskim elementom
Također možete proslijediti kontejnerski element koji sadrži sliku:
Run Primjer s prilagođenim URL ID-om
Po defaultu, Image Chat koristi URL stranice u kombinaciji s izvorom slike i koordinatama za identifikaciju razgovora. Možete navesti prilagođeni urlId:
Run Ovo je korisno ako se struktura vaših URL-ova promijeni, ali želite zadržati iste razgovore, ili ako želite dijeliti iste točke rasprave na više stranica.
Primjer s tamnim načinom rada
Ako vaša stranica ima tamnu pozadinu i widget je ne detektira automatski kako treba, možemo ručno omogućiti podršku za tamni način rada:
Run Primjer s prilagođenom veličinom kvadrata chata
Možete prilagoditi veličinu klikabilnih kvadrata koji se pojavljuju na slici. Veličina je specificirana kao postotak širine slike:
Run Primjer s povratnim pozivom broja komentara
Pratite kada su komentari dodani ili ažurirani koristeći commentCountUpdated povratni poziv:
Primjer s više slika
Možete inicijalizirati Image Chat na više slika. Svaka slika će imati svoje neovisne točke rasprave:
Run Opcije konfiguracije
Pregled
FastComments Image Chat proširuje standardni FastComments widget za komentare, pa nasljeđuje sve opcije konfiguracije iz osnovnog widgeta dok dodaje nekoliko specifičnih za označavanje slika.
Potrebna konfiguracija
tenantId
Potrebno je vaše FastComments Tenant ID. Možete ga pronaći u vašem FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Specifične opcije za Image Chat
urlId
Po zadanim postavkama, Image Chat generira jedinstveni identifikator za svaki razgovor na temelju URL stranice, izvora slike i X/Y koordinata. To možete nadjačati vlastitim urlId.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Ovo je korisno kada se vaša struktura URL-a može promijeniti, ali želite zadržati iste razgovore, ili kada želite dijeliti bilješke između više stranica.
chatSquarePercentage
Kontrolira veličinu klikabilnih oznaka za chat kao postotak širine slike. Zadano je 5%, što znači da je svaka oznaka 5% širine slike.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Veći, vidljiviji markeri
});Manje vrijednosti stvaraju manje nametljive markere koji bolje rade za detaljne slike. Veće vrijednosti čine markere lakšima za vidjeti i kliknuti na zauzetim slikama ili za korisnike na mobilnim uređajima.
hasDarkBackground
Omogućite stilizaciju tamnog načina rada kada vaša stranica ima tamnu pozadinu.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Funkcija povratnog poziva koja se poziva kad god se broj komentara promijeni. Ovo je korisno za ažuriranje elemenata sučelja poput bedževa ili naslova stranice.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Naslijeđene opcije konfiguracije
Budući da Image Chat proširuje standardni widget za komentare, možete koristiti bilo koju opciju konfiguracije iz osnovnog FastComments widgeta. Evo nekih često korištenih opcija:
locale
Postavite jezik za korisničko sučelje widgeta. FastComments podržava desetke jezika.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Španjolski
});readonly
Učinite sve razgovore samo za čitanje. Korisnici mogu pregledavati postojeće markere i rasprave, ali ne mogu stvarati nove niti odgovarati.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Integrirajte se s vašim sustavom autentikacije koristeći Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Konfiguracija SSO-a
}
});Pogledajte SSO dokumentaciju za potpune detalje o opcijama autentikacije.
maxReplyDepth
Kontrolirajte koliko nivoa duboko odgovori mogu ići. Zadano, Image Chat postavlja ovo na 0, što znači da su svi komentari ravni (nema ugniježđenih odgovora). To možete promijeniti ako želite threaded razgovore.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Dozvoli 3 nivoa ugniježđivanja
});Interna konfiguracija
Ove opcije automatski postavlja Image Chat i ne bi se trebale nadjačavati:
productId se automatski postavlja na 2 za Image Chat. Ekstenzija floating-chat se automatski učitava kako bi pružila funkcionalnost chat prozora. Widget automatski detektira mobilne uređaje (zasloni uži od 768px) i odgovarajuće prilagođava korisničko sučelje s chat prozorima preko cijelog zaslona.
Fleksibilnost ciljnog elementa
Prvi parametar za FastCommentsImageChat može biti ili <img> element izravno ili kontejner element s unutarnjom slikom:
// Izravni element slike
FastCommentsImageChat(document.getElementById('my-image'), config);
// Kontejner s unutarnjom slikom
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Widget će automatski pronaći sliku ako proslijedite kontejner element.
Kompletan primjer
Evo primjera koji prikazuje nekoliko konfiguracijskih opcija zajedno:
FastCommentsImageChat(document.getElementById('product-image'), {
tenantId: 'demo',
urlId: 'product-v2-main',
chatSquarePercentage: 6,
hasDarkBackground: false,
locale: 'en',
commentCountUpdated: function(count) {
document.title = count > 0 ? `(${count}) Product Photo` : 'Product Photo';
},
sso: {
// Vaša SSO konfiguracija
},
maxReplyDepth: 1
});Za potpuni popis svih dostupnih opcija konfiguracije naslijeđenih iz osnovnog widgeta, pogledajte glavnu FastComments dokumentaciju o konfiguraciji.
Responzivni dizajn
Percentage-Based Positioning
Image Chat koristi koordinate temeljene na postocima umjesto pikselnih koordinata za pozicioniranje markera razgovora na slikama. Kada korisnik klikne na sliku, widget pretvara pikselne koordinate klika u postotke širine i visine slike. Ovaj pristup osigurava da markeri ostanu na ispravnom mjestu bez obzira na način prikaza slike.
Na primjer, ako korisnik klikne 250 piksela od lijeve ivice slike širine 1000px, widget to pohranjuje kao 25% od lijeve strane. Kada drugi korisnik pogleda istu sliku široku 500px na mobilnom uređaju, marker se pojavljuje 125 piksela od lijeve strane, što je opet 25% širine.
Benefits for Responsive Layouts
Sustav temeljen na postocima omogućuje da Image Chat besprijekorno radi na svim veličinama i orijentacijama uređaja. Vaše se slike mogu prikazivati u različitim veličinama ovisno o širini ekrana, CSS pravilima ili ograničenjima kontejnera, ali se markeri uvijek pravilno poravnaju s namjenjenim lokacijama.
Korisnici na stolnim računalima s velikim monitorima vide markere na istim relativnim pozicijama kao i korisnici na pametnim telefonima s malim ekranima. Markeri se proporcionalno skaliraju sa samom slikom.
Image Scaling and Aspect Ratio
Dokle god vaša slika zadržava svoj omjer širine i visine pri skaliranju (što je zadano ponašanje preglednika), markeri temeljeni na postocima ostat će savršeno poravnati. Widget pretpostavlja da se slike proporcionalno skaliraju i izračunava pozicije na temelju te pretpostavke.
Ako primijenite CSS koji izobličuje omjer slike (kao npr. korištenjem object-fit: cover s određenim dimenzijama), pozicije markera možda se neće pravilno poravnati. Za najbolje rezultate dopustite slikama da se prirodno skaliraju ili koristite object-fit: contain kako biste održali omjer.
Chat Square Sizing
Vizualna veličina markera razgovora također je temeljena na postotcima. Opcija konfiguracije chatSquarePercentage zadano je postavljena na 5%, što znači da je svaki kvadrat 5% širine slike. To osigurava konzistentnu vizualnu težinu na različitim veličinama slika.
Na slici širine 1000px sa zadanim postavkama od 5%, markeri su kvadratni od 50px. Na slici širine 500px isti markeri su kvadratni od 25px. Oni ostaju proporcionalni veličini slike.
Mobile Behavior
Na zaslonima širine manjom od 768px, Image Chat prelazi na izgled optimiziran za mobilne uređaje. Prozori razgovora se otvaraju preko cijelog zaslona umjesto da lebde pored markera. To poboljšava upotrebljivost na malim ekranima gdje bi lebdeći prozori previše zakrivali sliku.
Sami markeri ostaju vidljivi i klikabilni na svojim pozicijama temeljenim na postocima. Korisnici i dalje mogu vidjeti gdje se nalaze sve rasprave i dodirnuti markere kako bi otvorili sučelje za razgovor preko cijelog zaslona.
Dynamic Image Loading
Sustav temeljen na postocima radi ispravno čak i kada se slike učitavaju asinkrono ili mijenjaju veličinu nakon učitavanja stranice. Widget prati element slike i preračunava pozicije markera kad god se dimenzije slike promijene.
Ako koristite lijeno učitavanje slika ili implementirate responzivne slike s različitim veličinama na različitim prekidnim točkama, markeri se automatski prilagođavaju kada se veličina slike promijeni.
Cross-Device Consistency
Budući da se koordinate pohranjuju u bazi podataka kao postoci, rasprava stvorena na stolnom računalu pojavljuje se na točno istoj relativnoj lokaciji kada se pogleda na tabletu ili telefonu. Korisnici mogu surađivati preko uređaja bez bilo kakvih neslaganja u pozicioniranju.
Ovo radi obostrano. Rasprava stvorena dodirom određene točke na mobilnom uređaju pojavljuje se na istoj relativnoj poziciji kada se pogleda na velikom stolnom monitoru.
Viewport Considerations
Widget izračunava postotke u odnosu na sam element slike, a ne u odnosu na viewport. To znači da pomicanje stranice ili promjena veličine prozora preglednika ne utječe na pozicije markera. Markeri ostaju vezani za svoje lokacije na slici bez obzira na promjene prikaza.
Future-Proofing Content
Pristup temeljen na postocima čini vaše rasprave o slikama otpornima na promjene u izgledu, dizajnu ili ekosustavu uređaja. Kako se pojavljuju nove veličine zaslona i uređaji, postojeće rasprave nastavit će se pravilno prikazivati bez potrebe za ažuriranjima ili migracijama.
Prilagodba
Podrška za tamni način
Image Chat uključuje ugrađenu podršku za tamni način. Kada postavite hasDarkBackground: true u svojoj konfiguraciji, prozori chata i UI elementi automatski se prilagođavaju kako bi dobro funkcionirali na tamnim pozadinama.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Stilizacija tamnog načina primjenjuje se na prozore chata, kvadratiće markera i sve interaktivne elemente. Ako vaša stranica ima prekidač za tamni način, možete ponovo inicijalizirati widget kada se način promijeni, ili koristiti pristup s klasom body opisan u nastavku.
Dinamički tamni način
Ako je tamni način na vašoj stranici kontroliran dodavanjem klase .dark na element body, Image Chat UI će automatski poštovati to bez potrebe za ponovnom inicijalizacijom. Stilovi widgeta su dizajnirani da reagiraju na prisutnost te klase.
/* Vaš CSS za tamni način */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Prilagođavanje stila pomoću CSS-a
Možete prilagoditi izgled markera, prozora chata i drugih elemenata pomoću CSS-a. Widget dodaje posebne klase koje možete ciljati u svom stylesheetu.
Chat kvadratići i prozori koriste FastComments sustav stiliziranja komentarskih oblačića, pa će sve prilagodbe koje ste primijenili na standardni widget za komentiranje također utjecati na Image Chat.
Veličina chat kvadratića
Opcija chatSquarePercentage kontrolira veličinu klikabilnih markera. Zadana vrijednost je 5% širine slike:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Veće, vidljivije kvadratiće
});Manje vrijednosti stvaraju diskretnije markere koji se bolje uklapaju u sliku. Veće vrijednosti čine markere istaknutijima i lakšima za klik, posebno na mobilnim uređajima ili iz pristupačnih razloga.
Ponašanje na mobilnim uređajima
Na ekranima širim manje od 768px, Image Chat se automatski prebacuje na layout optimiziran za mobilne uređaje. Prozori chata se prikazuju preko cijelog zaslona umjesto da plutaju pored markera, što poboljšava upotrebljivost na malim ekranima.
Markeri ostaju vidljivi na svojim responzivnim pozicijama na slici. Korisnici mogu dodirnuti bilo koji marker da otvore fullscreen sučelje chata. Ovo ponašanje je ugrađeno i ne zahtijeva konfiguraciju.
Izgled prozora chata
Prozori chata imaju širinu od 300px na desktopu s 16px strelicom koja pokazuje na marker. Prozori se automatski pozicioniraju na temelju dostupnog prostora 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 ovih prozora. Prozori chata koriste istu strukturu komponenti kao standardni FastComments widget, pa nasljeđuju sve globalne prilagodbe koje ste primijenili.
Lenja inicijalizacija
Prozori chata se inicijaliziraju pri hoveru za desktop korisnike ili odmah kada su stvoreni. Time se smanjuje početno opterećenje učitavanja jer se sučelje chata renderira samo kada korisnici zapravo komuniciraju s markerom.
Lenja inicijalizacija se odvija transparentno. Korisnici ne primjećuju kašnjenje, ali pregledniku nije potrebno renderirati desetke skrivenih prozora chata ako imate mnogo markera na slici.
Lokalizacija
Image Chat podržava sve iste opcije lokalizacije kao standardni FastComments widget. Postavite opciju locale za prikaz UI teksta na različitim jezicima:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Francuski
});FastComments podržava desetke jezika. Postavka lokaliteta utječe na sav UI tekst uključujući upite, gumbe i tekst mjesta za unos.
Naslijeđene opcije prilagodbe
Budući da Image Chat proširuje standardni widget za komentiranje, nasljeđuje sve opcije prilagodbe iz osnovnog widgeta. To uključuje prilagođene CSS klase, prilagođene prijevode, prilagodbu avatara, formatiranje datuma i mnogo više.
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, Image Chat UI će naslijediti te fontove iz CSS-a vaše stranice. Prozori chata renderiraju unutar DOM-a vaše stranice i poštuju postojeća tipografska podešavanja.
Za najbolje rezultate, osigurajte da su vaši prilagođeni fontovi učitani prije inicijalizacije Image Chat-a, ili prihvatite da može doći do kratkog treptaja nestiliziranog teksta dok se fontovi učitavaju.
Vizualni dizajn markera
Kvadratni marker ima suptilan vizualni dizajn koji ga čini uočljivim bez preplavljivanja slike. Možete prilagoditi njihov izgled pomoću CSS-a ako želite drugačiji vizualni pristup.
Markeri sadrže hover stanja koja daju povratnu informaciju kada korisnici pomaknu miš preko njih. Na uređajima na dodir, interakcija dodirom daje neposrednu povratnu informaciju otvaranjem prozora chata.
Sinkronizacija uživo
Real-Time Updates
Image Chat koristi WebSocket veze za sinkronizaciju svih razgovora u stvarnom vremenu između svih povezanih korisnika. Kada netko stvori novu oznaku, doda komentar ili obriše raspravu, svi ostali korisnici koji gledaju istu sliku vide ažuriranje odmah, bez osvježavanja.
How WebSocket Sync Works
Kada inicijalizirate Image Chat, widget uspostavlja WebSocket vezu prema FastComments serverima. Ta veza ostaje otvorena tijekom korisničke sesije i sluša ažuriranja vezana uz trenutnu sliku.
WebSocket sustav koristi tri vrste broadcast poruka za Image Chat. Događaj new-image-chat se pokreće kada netko stvori novu oznaku na slici. Događaj image-chat-updated se pokreće kada netko ažurira postojeći razgovor. Događaj deleted-image-chat se pokreće kada netko obriše oznaku.
Broadcast ID System
Kako bi se spriječili echo efekti gdje korisnici vide vlastite radnje koje im se ponovno emitiraju, svako ažuriranje uključuje jedinstveni broadcastId. Kada korisnik stvori ili ažurira oznaku, njihov klijent generira UUID za tu operaciju. Kad WebSocket emitira ažuriranje natrag svim klijentima, izvorni klijent zanemaruje ažuriranje jer odgovara njegovom vlastitom broadcastId.
To osigurava glatku interakciju u kojoj korisnici vide svoje promjene odmah u UI bez čekanja za putovanje do servera i natrag, a istovremeno svi drugi korisnici dobivaju ažuriranje.
Connection Resilience
Ako WebSocket veza padne zbog mrežnih problema ili održavanja servera, widget automatski pokušava ponovno uspostaviti vezu. Tijekom razdoblja ponovnog povezivanja, korisnici i dalje mogu manipulirati postojećim oznakama, ali neće vidjeti ažuriranja od drugih korisnika dok veza ne bude ponovno uspostavljena.
Kada se veza ponovno uspostavi, widget se resinkronizira kako bi osigurao da nijedno ažuriranje nije propušteno. To se događa transparentno bez potrebe za intervencijom korisnika.
Bandwidth Considerations
WebSocket poruke su male i sadrže samo esencijalne informacije potrebne za sinkronizaciju stanja. Kreiranje nove oznake obično koristi manje od 1KB bandwidtha. Sustav također uključuje inteligentno grupiranje poruka kako bi smanjio učestalost poruka tijekom razdoblja velike aktivnosti.
Vaše metrike korištenja na FastComments nadzornoj ploči prate pubSubMessageCount i pubSubBandwidth kako biste mogli nadzirati aktivnost sinkronizacije u stvarnom vremenu preko vaših stranica.
Cross-Tab Synchronization
Ako korisnik ima istu stranicu otvorenu u više pregledničkih kartica, ažuriranja u jednoj kartici pojavljuju se odmah u drugim karticama. To radi kroz isti WebSocket mehanizam za sinkronizaciju i ne zahtijeva dodatnu konfiguraciju.
Korisnici mogu imati vašu stranicu otvorenu na više uređaja istovremeno, i svi će ostati sinkronizirani. Oznaka kreirana na stolnom računalu pojavljuje se instantno na korisnikovom tabletu ako oba uređaja gledaju istu sliku.
Security
WebSocket poruke se prenose preko sigurnih veza (WSS) i uključuju validaciju najamnika kako bi se osiguralo da korisnici primaju samo ažuriranja za razgovore koje su ovlašteni vidjeti. Server validira sve operacije prije nego što ih emitira kako bi sprječavao neovlašteni pristup ili manipulaciju.
Offline Behavior
Kada su korisnici potpuno offline, i dalje mogu pregledavati postojeće oznake, ali ne mogu stvarati nove niti vidjeti ažuriranja od drugih. Widget detektira offline stanje i prikazuje odgovarajuću poruku.
Ako korisnik pokuša stvoriti oznaku dok je offline, a zatim se vrati online, operacija će ne uspjeti umjesto da se stavi na čekanje, čime se osigurava konzistentnost podataka. Korisnici bi trebali pokušati ponovo kad im se veza ponovno uspostavi.
Performance Impact
WebSocket veza ima minimalan utjecaj na performanse. Veza ostaje neaktivna kad se ne događaju ažuriranja i obrađuje poruke samo kada ima aktivnosti. Na tipičnoj slici s umjerenom aktivnošću oznaka, WebSocket koristi manje CPU-a nego samo renderiranje slike.
Za stranice s stotinama istodobnih korisnika i velikom aktivnošću kreiranja oznaka, sustav se horizontalno skalira kako bi održao performanse bez utjecaja na pojedinačne klijentske veze.
Collaborative Use Cases
Sinkronizacija u stvarnom vremenu čini Image Chat posebno moćnim za kolaborativne tijekove rada. Timovi za dizajn mogu zajednički pregledavati makete pri čemu svi vide pozicioniranja oznaka u stvarnom vremenu. Timovi za korisničku podršku mogu zajednički anotirati snimke zaslona kako bi identificirali probleme. Edukacijske grupe mogu raspravljati o dijagramima pri čemu svi sudionici vide oznake drugih kako se stvaraju.
Trenutna povratna informacija stvara angažiranije i produktivnije kolaborativno iskustvo u usporedbi s tradicionalnim sustavima komentiranja gdje korisnici moraju osvježiti stranicu da bi vidjeli ažuriranja.
Referenca API-ja
Pregled API-ja
Image Chat pruža tri REST API krajnje točke za programsku obradu razgovora o slikama. Ove krajnje točke omogućuju dohvat, stvaranje i brisanje markera bez korištenja widgeta u pregledniku.
Sve API krajnje točke zahtijevaju autentifikaciju i slijede standardne obrasce FastComments API-ja. Ovo su javne krajnje točke koje se autentificiraju putem kolačića preglednika, a ne putem API ključeva.
Osnovni URL
Sve Image Chat API krajnje točke nalaze se pod:
https://fastcomments.com/comment-image-chatsAutentifikacija
Ove krajnje točke autentificiraju korisnike putem kolačića preglednika. Ne koriste API ključeve. Korisnici moraju biti prijavljeni u FastComments u svom pregledniku kako bi imali pristup ovim krajnjim točkama.
Dohvati sve razgovore
Dohvati sve razgovore o slici za određenu sliku.
Krajnja točka
GET /comment-image-chats/:tenantId?urlId=<urlId>Parametri
tenantId (putni parametar, obavezno) je vaš FastComments Tenant ID.
urlId (parametar upita, obavezno) je identifikator slike za koju želite dohvatiti razgovore.
Odgovor
Odgovor uključuje status API-ja, informacije o trenutnoj korisničkoj sesiji ako je autentificirana, niz razgovora s njihovim ID-evima, URL-ovima i X/Y koordinatama, očišćeni identifikator URL-a, zastavicu koja označava je li trenutni korisnik administrator ili moderator stranice, te detalje za WebSocket vezu za sinkronizaciju uživo uključujući tenantIdWS, urlIdWS i userIdWS.
Primjer zahtjeva
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Primjer odgovora
{
"status": "success",
"user": {
"id": "user123",
"username": "john_doe"
},
"conversations": [
{
"_id": "conv123",
"urlId": "my-product-image:/images/product.jpg:25:30",
"x": 25.5,
"y": 30.2
},
{
"_id": "conv456",
"urlId": "my-product-image:/images/product.jpg:60:45",
"x": 60.8,
"y": 45.1
}
],
"urlIdClean": "my-product-image",
"isSiteAdmin": false,
"tenantIdWS": "demo",
"urlIdWS": "my-product-image",
"userIdWS": "user123"
}Stvaranje razgovora
Kreirajte novi razgovor o slici za određenu lokaciju na slici.
Krajnja točka
POST /comment-image-chats/:tenantIdParametri
tenantId (putni parametar, obavezno) je vaš FastComments Tenant ID.
Tijelo zahtjeva mora biti JSON i mora sadržavati sljedeća obavezna polja.
urlId (string, obavezno) je osnovni identifikator stranice.
windowUrlId (string, obavezno) je URL kombiniran sa izvorom slike i koordinatama, na primjer my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, obavezno) je naslov stranice.
src (string, obavezno) je URL izvora slike.
x (number, obavezno) je X koordinata izražena kao postotak (0-100).
y (number, obavezno) je Y koordinata izražena kao postotak (0-100).
createdFromCommentId (string, obavezno) je ID komentara koji je pokrenuo ovaj razgovor.
broadcastId (string, obavezno) je UUID za sinkronizaciju uživo kako bi se spriječili učinci odjeka.
Odgovor
Odgovor uključuje status API-ja i ID novokreiranog razgovora.
Primjer zahtjeva
curl -X POST "https://fastcomments.com/comment-image-chats/demo" \
--cookie "your-session-cookie" \
-H "Content-Type: application/json" \
-d '{
"urlId": "my-product-image",
"windowUrlId": "my-product-image:/images/product.jpg:25.5:30.2",
"pageTitle": "Product Gallery",
"src": "/images/product.jpg",
"x": 25.5,
"y": 30.2,
"createdFromCommentId": "comment789",
"broadcastId": "550e8400-e29b-41d4-a716-446655440000"
}'Primjer odgovora
{
"status": "success",
"createdChatId": "conv789"
}Brisanje razgovora
Izbrišite postojeći razgovor o slici. Ova krajnja točka zahtijeva administratorske ili moderatorske dozvole, ili razgovor mora biti kreiran od strane autentificiranog korisnika.
Krajnja točka
DELETE /comment-image-chats/:tenantId/:chatIdParametri
tenantId (putni parametar, obavezno) je vaš FastComments Tenant ID.
chatId (putni parametar, obavezno) je ID razgovora koji želite izbrisati.
broadcastId (tijelo zahtjeva, obavezno) je UUID za sinkronizaciju uživo.
Primjer zahtjeva
curl -X DELETE "https://fastcomments.com/comment-image-chats/demo/conv789" \
--cookie "your-session-cookie" \
-H "Content-Type: application/json" \
-d '{
"broadcastId": "550e8400-e29b-41d4-a716-446655440001"
}'Primjer odgovora
{
"status": "success"
}Koordinatni sustav
X i Y koordinate pohranjuju se kao postotci dimenzija slike. X predstavlja horizontalnu poziciju od lijeve ruba (0 = lijevi rub, 100 = desni rub). Y predstavlja vertikalnu poziciju od gornjeg ruba (0 = gornji rub, 100 = donji rub).
Ove vrijednosti u postocima mogu uključivati decimale radi preciznosti. Na primjer, x: 25.5 znači 25.5% od lijevog ruba slike.
Ograničenje zahtjeva
Ove krajnje točke podliježu standardnom ograničenju brzine (rate limiting) FastComments API-ja. Middleware za ograničenje primjene ograničenja radi po tenant-u kako bi se spriječila zloupotreba dok se omogućuju uobičajeni obrasci korištenja.
Odgovori s pogreškama
Sve krajnje točke vraćaju standardne HTTP status kodove. Odgovor 400 označava nevažeće parametre zahtjeva. Odgovor 401 znači da autentifikacija nije uspjela. Odgovor 403 označava nedostatak dopuštenja. Odgovor 404 znači da razgovor nije pronađen. Odgovor 429 označava prekoračenje ograničenja brzine.
Odgovori s pogreškama uključuju JSON tijelo s detaljima:
{
"status": "error",
"message": "Conversation not found"
}Praćenje upotrebe
Stvaranje razgovora povećava vašu metriku upotrebe conversationCreateCount. Sva aktivnost sinkronizacije putem WebSocket-a povećava pubSubMessageCount i pubSubBandwidth. Ove metrike možete pratiti u svom FastComments dashboardu pod analizom upotrebe.
Imate li pitanja?
To je sve za FastComments Image Chat! Ako imate bilo kakvih pitanja, trebate pomoć pri implementaciji ili imate prijedloge za značajke, molimo javite nam u nastavku ili se obratite našem timu za podršku.
Pogledajte demonstraciju uživo na našoj demo stranici da biste vidjeli Image Chat u akciji.