FastComments Image Chat omogućava interaktivne diskusije na slikama tako što korisnicima omogućava da kliknu bilo gde na slici kako bi kreirali tačke diskusije. Korisnici mogu da kliknu na određene delove slike da započnu razgovore o tim oblastima, stvarajući vizuelne markere koji pokazuju gde se diskusije nalaze.
Ova funkcija je savršena za povratne informacije o dizajnu, recenzije proizvoda, obrazovni materijal sa dijagramima, foto-galerije sa komentarima, i bilo koji scenario u kojem želite kontekstualne diskusije vezane za određene lokacije na slici.
Početak rada 
Slučajevi upotrebe
Image Chat je odličan za povratne informacije o dizajnu kada timovi treba da diskutuju o specifičnim elementima na maketama ili snimcima ekrana. Sajtovi za recenzije proizvoda mogu dozvoliti kupcima da diskutuju o konkretnim karakteristikama vidljivim na fotografijama proizvoda. Obrazovne platforme mogu ga koristiti za diskusiju o dijagramima, mapama ili naučnim slikama. Foto galerije mogu postati interaktivne sa komentarima vezanim za određene lokacije. Sajtovi za nekretnine mogu omogućiti posetiocima da diskutuju o specifičnim detaljima vidljivim na fotografijama nekretnina.
Brzi početak
Početak rada sa Image Chat-om je jednostavan. Potreban vam je FastComments Image Chat skript, element slike ili kontejner sa slikom, i konfiguracioni objekat sa vašim Tenant ID.
Instalacija
Dodajte Image Chat skriptu na vašu stranicu:
Osnovna implementacija
Evo minimalnog primera:
Run 
Zamenite 'demo' sa vašim stvarnim FastComments Tenant ID-jem ako već nije, koji možete pronaći na vašoj FastComments kontrolnoj tabli.
Kako funkcioniše
Kada je inicijalizovan, korisnici mogu kliknuti bilo gde na slici. Kada se klik dogodi, na toj lokaciji se pojavi vizuelni kvadratni marker i otvori se chat prozor. Drugi korisnici mogu videti sve markere i kliknuti na njih da pregledaju ili učestvuju u tim diskusijama. Sve diskusije se sinhronizuju u realnom vremenu među svim posetiocima.
Widžet koristi pozicioniranje zasnovano na procentima, tako da markeri ostaju na tačnoj lokaciji čak i kada se slika promeni veličinu ili se pregleda na različitim veličinama ekrana.
Demo uživo
Možete videti Image Chat u akciji na našoj live demo stranici.
Sledeći koraci
Sada kada imate osnovno rešenje, možete prilagoditi izgled i ponašanje u vodiču za opcije konfiguracije. Pogledajte vodič za responzivni dizajn da biste razumeli kako funkcioniše pozicioniranje zasnovano na procentima. Saznajte više o stilizaciji i podršci za tamni režim u vodiču za prilagođavanje. Za napredne integracije, istražite API referencu.
Frontend biblioteke
Sve FastComments frontend biblioteke (react, vue, angular, itd.) uključuju Image Chat.
Primeri
Osnovni primer
Najjednostavniji način da koristite Image Chat je da ciljate jedan element slike. Ovaj primer prikazuje kako omogućiti interaktivne diskusije na slici:
Run Primer sa kontejner elementom
Takođe možete proslediti kontejner element koji sadrži sliku:
Run Primer sa prilagođenim URL ID-jem
Po podrazumevanoj vrednosti, Image Chat koristi URL stranice u kombinaciji sa izvorom slike i koordinatama za identifikaciju razgovora. Možete navesti prilagođeni urlId:
Run Ovo je korisno ako se struktura vaših URL-ova promeni, ali želite da zadržite iste razgovore, ili ako želite da delite iste tačke diskusije na više stranica.
Primer sa tamnim režimom
Ako vaša stranica ima tamnu pozadinu i vidžet je ne prepoznaje automatski kako bi trebalo, možemo ručno omogućiti podršku za tamni režim:
Run Primer sa prilagođenom veličinom kvadratića za chat
Možete podesiti veličinu klikabilnih kvadratića koji se pojavljuju na slici. Veličina se navodi kao procenat širine slike:
Run Primer sa povratnim pozivom za broj komentara
Pratite kada se komentari dodaju ili ažuriraju koristeći povratni poziv commentCountUpdated:
Primer sa više slika
Možete inicijalizovati Image Chat na više slika. Svaka slika će imati sopstvene nezavisne tačke diskusije:
Run Opcije konfiguracije
Pregled
FastComments Image Chat proširuje standardni FastComments widget za komentare, tako da nasleđuje sve opcije konfiguracije iz osnovnog widgeta dok dodaje nekoliko opcija specifičnih za anotacije slika.
Obavezna konfiguracija
tenantId
Vaš FastComments Tenant ID je obavezan. Možete ga pronaći u vašem FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Opcije specifične za Image Chat
urlId
Po defaultu, Image Chat generiše jedinstveni identifikator za svaki razgovor zasnovan na URL-u stranice, izvoru slike i X/Y koordinatama. Možete to prebrisati sa prilagođenim urlId.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Ovo je korisno kada se struktura vaših URL-ova može promeniti ali želite zadržati iste razgovore, ili kada želite deliti anotacije preko više stranica.
chatSquarePercentage
Kontroliše veličinu klikabilnih markera za chat kao procenat širine slike. Podrazumevano je 5%, što znači da je svaki marker 5% širine slike.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Veći, vidljiviji markeri
});Manje vrednosti stvaraju manje intruzivne markere koji bolje rade za detaljne slike. Veće vrednosti čine markere lakšim za videti i klik na zauzetim slikama ili za korisnike na mobilnim uređajima.
hasDarkBackground
Omogućite stilizaciju za tamni režim kada vaša stranica ima tamnu pozadinu.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Funkcija povratnog poziva koja se izvršava kad god se broj komentara promeni. Ovo je korisno za ažuriranje UI elemenata kao što su značke ili naslovi stranica.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Nasleđene opcije konfiguracije
Pošto Image Chat proširuje standardni widget za komentare, možete koristiti bilo koju opciju konfiguracije iz osnovnog FastComments widgeta. Evo nekoliko često korišćenih opcija:
locale
Podesite jezik za UI widgeta. FastComments podržava desetine jezika.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Spanish
});readonly
Napravite sve razgovore samo za čitanje. Korisnici mogu pregledati postojeće markere i diskusije, ali ne mogu kreirati nove ili odgovarati.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Integracija sa vašim sistemom autentifikacije koristeći Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// SSO konfiguracija
}
});Pogledajte SSO dokumentaciju za potpune detalje o opcijama autentifikacije.
maxReplyDepth
Kontrolišite koliko nivoa duboko odgovori mogu ići. Po defaultu, Image Chat postavlja ovo na 0, što znači da su svi komentari plosnati (nema ugnježdenih odgovora). Možete ovo promeniti ako želite prikaz sa dretvama.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Dozvoli 3 nivoa ugnježđavanja
});Interna konfiguracija
Ove opcije se automatski podešavaju od strane Image Chat-a i ne bi trebalo da ih prepisujete:
The productId is automatically set to 2 for Image Chat. The floating-chat extension is automatically loaded to provide the chat window functionality. The widget automatically detects mobile devices (screens under 768px wide) and adjusts the UI accordingly with fullscreen chat windows.
Fleksibilnost ciljnog elementa
Prvi parametar za FastCommentsImageChat može biti direktno <img> element ili element kontejnera koji ima sliku unutra:
// Direktan <img> element
FastCommentsImageChat(document.getElementById('my-image'), config);
// Kontejner sa slikom unutra
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Widget će automatski pronaći sliku ako prosledite element kontejnera.
Kompletan primer
Evo primera koji prikazuje više opcija konfiguracije 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 kompletan spisak svih dostupnih opcija konfiguracije nasleđenih iz osnovnog widgeta, pogledajte glavnu FastComments dokumentaciju o konfiguraciji.
Responzivni dizajn
Pozicioniranje zasnovano na procentima
Image Chat koristi koordinate zasnovane na procentima umesto piksel-koordinata za pozicioniranje markera chata na slikama. Kada korisnik klikne na sliku, widget konvertuje piksel-koordinate klika u procente širine i visine slike. Ovakav pristup osigurava da markeri ostanu na ispravnoj lokaciji bez obzira na to kako se slika prikazuje.
Na primer, ako korisnik klikne 250 piksela od levog ruba slike širine 1000px, widget to čuva kao 25% od leve strane. Kada drugi korisnik pogleda istu sliku širine 500px na mobilnom uređaju, marker se pojavljuje na 125 piksela od leve strane, što je i dalje 25% širine.
Prednosti za responzivne rasporede
Ovaj sistem zasnovan na procentima omogućava da Image Chat radi besprekorno na svim veličinama uređaja i orijentacijama. Vaše slike mogu biti prikazane u različitim veličinama u zavisnosti od širine ekrana, CSS pravila ili ograničenja kontejnera, ali markeri su uvek pravilno poravnati sa predviđenim lokacijama.
Korisnici na desktop računarima sa velikim monitorima vide markere na istim relativnim pozicijama kao i korisnici na pametnim telefonima sa malim ekranima. Markeri se proporcionalno skaliraju zajedno sa samom slikom.
Skaliranje slike i odnos stranica
Sve dok vaša slika održava odnos stranica pri skaliranju (što je podrazumevano ponašanje pretraživača), markeri zasnovani na procentima će ostati savršeno poravnati. Widget pretpostavlja da se slike skaliraju proporcionalno i izračunava pozicije na osnovu te pretpostavke.
Ako primenite CSS koji izobličava odnos stranica slike (npr. koristeći object-fit: cover sa specifičnim dimenzijama), pozicije markera možda neće biti pravilno poravnate. Za najbolje rezultate, dozvolite slikama da se prirodno skaliraju ili koristite object-fit: contain da održite odnos stranica.
Veličina kvadrata markera
Vizuelna veličina chat markera je takođe zasnovana na procentima. Opcija konfiguracije chatSquarePercentage ima podrazumevanu vrednost 5%, što znači da je svaki kvadrat 5% širine slike. Ovo osigurava konzistentnu vizuelnu težinu na različitim veličinama slika.
Na slici širine 1000px sa podrazumevanih 5%, markeri su kvadratni od 50px. Na slici širine 500px, isti markeri su kvadratni od 25px. Oni ostaju proporcionalni veličini slike.
Ponašanje na mobilnim uređajima
Na ekranima širinе ispod 768px, Image Chat prelazi na izgled optimizovan za mobilne uređaje. Chat prozori se otvaraju celozaslonski umesto da plutaju pored markera. Ovo pruža bolju upotrebljivost na malim ekranima gde bi plutajući prozori previše zaklanjali sliku.
Sami markeri ostaju vidljivi i klikabilni na svojim pozicijama zasnovanim na procentima. Korisnici i dalje mogu videti gde se nalaze sve diskusije i dodirnuti markere da otvore celozaslonski chat interfejs.
Dinamičko učitavanje slika
Sistem zasnovan na procentima radi ispravno čak i kada se slike učitavaju asinhrono ili menjaju veličinu nakon učitavanja stranice. Widget nadgleda element slike i preračunava pozicije markera kad god se dimenzije slike promene.
Ako koristite leno učitavanje slika (lazy-loading) ili implementirate responzivne slike sa različitim veličinama na različitim breakpoint-ovima, markeri se automatski prilagođavaju kada se veličina slike promeni.
Doslednost između uređaja
Pošto se koordinate čuvaju kao procenti u bazi podataka, diskusija kreirana na desktop računaru pojavljuje se na istoj relativnoj lokaciji kada se pregleda na tabletu ili telefonu. Korisnici mogu sarađivati preko uređaja bez bilo kakvih neslaganja u pozicioniranju.
Ovo radi obostrano. Diskusija kreirana dodirom specifičnog mesta na mobilnom uređaju pojavljuje se na istoj relativnoj poziciji kada se pregleda na velikom desktop monitoru.
Razmatranja vezana za viewport
Widget izračunava procente u odnosu na sam element slike, a ne u odnosu na viewport. To znači da skrolovanje stranice ili promena veličine prozora pregledača ne utiču na pozicije markera. Markeri ostaju pričvršćeni za svoje lokacije na slici bez obzira na promene viewport-a.
Priprema sadržaja za budućnost
Pristup zasnovan na procentima čini vaše diskusije na slikama otpornim na promene u rasporedu, dizajnu ili ekosistemu uređaja. Kako se pojavljuju nove veličine ekrana i uređaji, postojeće diskusije će i dalje biti prikazane ispravno bez potrebe za ažuriranjima ili migracijama.
Prilagođavanje
Podrška za tamni režim
Image Chat uključuje ugrađenu podršku za tamni režim. Kada postavite hasDarkBackground: true u svojoj konfiguraciji, prozori chata i UI elementi se automatski prilagođavaju da dobro funkcionišu na tamnim pozadinama.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Stilovi za tamni režim primenjuju se na prozore chata, marker kvadrate i sve interaktivne elemente. Ako vaš sajt ima prekidač za tamni režim, možete ponovo inicijalizovati widget kada se režim promeni, ili koristiti pristup sa klasom na body elementu opisan ispod.
Dinamički tamni režim
Ako je tamni režim na vašem sajtu kontrolisan dodavanjem klase .dark na body element, Image Chat UI će to automatski poštovati bez potrebe za ponovnom inicijalizacijom. Stilovi widgeta su dizajnirani da reaguju na prisustvo ove klase.
/* Vaš CSS za tamni režim */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Prilagođavanje stilova pomoću CSS-a
Možete prilagoditi izgled markera, prozora chata i drugih elemenata koristeći CSS. Widget dodaje specifične klase koje možete ciljati u vašem stylesheet-u.
Chat kvadratići i prozori koriste FastComments sistem stilizovanja komentarskih balona, tako da će sve prilagodbe koje ste primenili na standardni komentar widget takođe uticati na Image Chat.
Veličina chat kvadrata
Opcija chatSquarePercentage kontroliše veličinu klikabilnih markera. Podrazumevana vrednost je 5% širine slike:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Veći, vidljiviji kvadratići
});Manje vrednosti stvaraju nežnije markere koji se bolje uklapaju u sliku. Veće vrednosti čine markere istaknutijim i lakšim za klik, posebno na mobilnim uređajima ili radi pristupačnosti.
Ponašanje na mobilnim uređajima
Na ekranima širine manje od 768px, Image Chat se automatski prebacuje na layout optimizovan za mobilne uređaje. Prozori chata se pojavljuju preko celog ekrana umesto da lebde pored markera, što pruža bolju upotrebljivost na malim ekranima.
Markeri ostaju vidljivi na svojim responzivnim pozicijama na slici. Korisnici mogu dodirnuti bilo koji marker da otvore fullscreen chat interfejs. Ovo ponašanje je ugrađeno i ne zahteva nikakvu konfiguraciju.
Izgled prozora chata
Prozori chata su široki 300px na desktopu sa strelicom od 16px koja pokazuje na marker. Prozori se automatski pozicioniraju u zavisnosti od dostupnog prostora u viewport-u, koristeći klase pozicioniranja kao što su to-right, to-left, to-top, i to-bottom.
Možete dodati prilagođeni CSS da podesite boje, fontove, razmake ili druge vizuelne osobine ovih prozora. Prozori chata koriste istu strukturu komponenti kao standardni FastComments widget, tako da nasledjuju sve globalne prilagođavanja koja ste primenili.
Lenja inicijalizacija
Prozori chata se inicijalizuju na hover za desktop korisnike ili odmah kada su kreirani. Ovo smanjuje početno opterećenje učitavanja tako što renderuje chat interfejs samo kada korisnici zaista interaguju sa markerom.
Lenja inicijalizacija se dešava transparentno. Korisnici ne primete kašnjenje, ali pregledač ne mora da renderuje desetine skrivenih prozora chata ako imate mnogo markera na slici.
Lokalizacija
Image Chat podržava sve iste opcije lokalizacije kao standardni FastComments widget. Podesite opciju locale da prikažete UI tekst na različitim jezicima:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Francuski
});FastComments podržava desetine jezika. Podešavanje locale utiče na sav UI tekst uključujući poruke, dugmad i tekst u placeholderima.
Nasleđene opcije prilagođavanja
Pošto Image Chat proširuje standardni komentar widget, nasleđuje sve opcije prilagođavanja iz osnovnog widgeta. To uključuje prilagođene CSS klase, prilagođena prevoda, prilagođavanje avatara, formatiranje datuma i još mnogo toga.
Pogledajte glavnu FastComments dokumentaciju o prilagođavanju za kompletan spisak dostupnih opcija prilagođavanja.
Rad sa prilagođenim fontovima
Ako vaš sajt koristi prilagođene fontove, Image Chat UI će naslediti te fontove iz CSS-a vaše stranice. Prozori chata se renderuju 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 pre inicijalizacije Image Chat-a, ili prihvatite da može doći do kratkog treptaja nestiilisanog teksta dok se fontovi učitavaju.
Vizuelni dizajn markera
Kvadratni markeri imaju suptilan vizuelni dizajn koji ih čini uočljivim bez preopterećenja slike. Možete prilagoditi njihov izgled pomoću CSS-a ako želite drugačiji vizuelni tretman.
Markeri uključuju hover stanja koja daju povratnu informaciju kada korisnici pomere miš preko njih. Na uređajima osetljivim na dodir, tap interakcija daje momentalnu povratnu informaciju otvaranjem prozora chata.
Sinhronizacija uživo
Ažuriranja u realnom vremenu
Image Chat koristi WebSocket konekcije za sinhronizaciju svih razgovora u realnom vremenu između svih povezanih korisnika. Kada neko kreira novi marker, doda komentar ili obriše diskusiju, svi ostali korisnici koji gledaju istu sliku vide ažuriranje odmah bez osvežavanja.
Kako WebSocket sinhronizacija funkcioniše
Kada inicijalizujete Image Chat, vidžet uspostavlja WebSocket konekciju sa FastComments serverima. Ova konekcija ostaje otvorena tokom trajanja korisničke sesije i osluškuje ažuriranja vezana za trenutnu sliku.
WebSocket sistem koristi tri tipa broadcast poruka za Image Chat. Događaj new-image-chat se emituje kada neko kreira novi marker na slici. Događaj image-chat-updated se emituje kada neko ažurira postojeću konverzaciju. Događaj deleted-image-chat se emituje kada neko obriše marker.
Sistem Broadcast ID
Kako bi se sprečili efekti odjeka gde korisnici vide svoje sopstvene akcije koje im se ponovo emituju, svako ažuriranje uključuje jedinstveni broadcastId. Kada korisnik kreira ili ažurira marker, njegov klijent generiše UUID za tu operaciju. Kada WebSocket emituje ažuriranje nazad svim klijentima, klijent koji je inicirao operaciju ignoriše ažuriranje jer odgovara njegovom broadcastId.
Ovo obezbeđuje nesmetanu interakciju gde korisnici vide svoje izmene odmah u UI bez čekanja na povratni krug kroz server, dok istovremeno svi drugi korisnici dobijaju ažuriranje.
Otpornost konekcije
Ako WebSocket konekcija padne zbog mrežnih problema ili održavanja servera, vidžet automatski pokušava da se ponovo poveže. Tokom perioda ponovnog povezivanja, korisnici i dalje mogu da interaguju sa postojećim markerima, ali neće videti ažuriranja od drugih korisnika dok se konekcija ne uspostavi ponovo.
Kada se ponovo poveže, vidžet se resinhronizuje kako bi se osiguralo da nijedno ažuriranje nije propušteno. Ovo se dešava transparentno bez potrebe za intervencijom korisnika.
Propusni opseg
WebSocket poruke su lagane i sadrže samo neophodne informacije potrebne za sinhronizaciju stanja. Kreiranje novog markera obično koristi manje od 1KB propusnog opsega. Sistem takođe uključuje inteligentno grupisanje poruka kako bi se smanjila učestalost poruka tokom perioda visoke aktivnosti.
Vaši metrički podaci u FastComments kontrolnoj tabli prate pubSubMessageCount i pubSubBandwidth tako da možete pratiti aktivnost sinhronizacije u realnom vremenu na vašim sajtovima.
Sinhronizacija između tabova
Ako korisnik ima istu stranicu otvorenu u više browser tabova, ažuriranja u jednom tabu pojavljuju se odmah i u ostalim tabovima. Ovo funkcioniše kroz isti WebSocket mehanizam sinhronizacije i ne zahteva dodatnu konfiguraciju.
Korisnici mogu imati vaš sajt otvoren na više uređaja istovremeno, i svi će ostati sinhronizovani. Marker kreiran na desktop računaru pojavljuje se instantno na korisnikovom tabletu ako oba uređaja gledaju istu sliku.
Bezbednost
WebSocket poruke se prenose preko sigurnih konekcija (WSS) i uključuju tenant validaciju da bi se osiguralo da korisnici primaju samo ažuriranja za konverzacije koje su ovlašćeni da vide. Server validira sve operacije pre nego što ih emituje kako bi se sprečio neovlašćeni pristup ili manipulacija.
Ponašanje u offline režimu
Kada su korisnici potpuno offline, i dalje mogu da vide postojeće markere ali ne mogu da kreiraju nove niti da vide ažuriranja od drugih. Vidžet detektuje offline stanje i prikazuje odgovarajuće poruke.
Ako korisnik pokuša da kreira marker dok je offline, a zatim se ponovo poveže, operacija će neuspeti umesto da se stavi u red, čime se obezbeđuje konzistentnost podataka. Korisnici treba ponovo da pokušaju operaciju kada im se veza obnovi.
Uticaj na performanse
WebSocket konekcija ima minimalan uticaj na performanse. Konekcija ostaje u stanju mirovanja kada nema ažuriranja i procesuira poruke samo kada se aktivnost dogodi. Na tipičnoj slici sa umerenim brojem markera, WebSocket koristi manje CPU resursa nego prikaz same slike.
Za stranice sa stotinama istovremenih korisnika i visokom aktivnošću kreiranja markera, sistem horizontalno skalira kako bi održao performanse bez uticaja na pojedinačne klijentske veze.
Kolaborativni slučajevi upotrebe
Sinhronizacija u realnom vremenu čini Image Chat posebno moćnim za kolaborativne tokove rada. Dizajn timovi mogu zajedno pregledati makete uz to da svi vide pozicioniranje markera u realnom vremenu. Timovi za korisničku podršku mogu kolektivno anotirati snimke ekrana kako bi identifikovali probleme. Edukativne grupe mogu diskutovati dijagrame uz to da svi učesnici vide marker-e drugih kako se kreiraju.
Neposredna povratna informacija stvara angažovanije i produktivnije kolaborativno iskustvo u poređenju sa tradicionalnim sistemima komentarisanja gde korisnici moraju da osveže stranicu da bi videli ažuriranja.
Referenca API-ja
Pregled API-ja
Image Chat pruža tri REST API endpointa za upravljanje razgovorima vezanim za slike programatski. Ovi endpointi vam omogućavaju da dohvatite, kreirate i brišete markere bez upotrebe widgeta u pregledaču.
Svi API endpointi zahtevaju autentifikaciju i prate standardne FastComments API obrasce. Ovo su javni endpointi koji se autentifikuju putem kolačića u pregledaču, a ne API ključeva.
Osnovni URL
Svi Image Chat API endpointi su pod:
https://fastcomments.com/comment-image-chatsAutentifikacija
Ovi endpointi autentifikuju korisnike putem kolačića u pregledaču. Ne koriste API ključeve. Korisnici moraju biti prijavljeni na FastComments u svom pregledaču da bi pristupili ovim endpointima.
Dobavljanje svih razgovora
Dobavite sve razgovore vezane za određenu sliku.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Parametri
tenantId (path parameter, required) je vaš FastComments Tenant ID.
urlId (query parameter, required) je identifikator slike za koji želite da dohvatite razgovore.
Odgovor
Odgovor uključuje status API-ja, informacije o trenutnoj korisničkoj sesiji ako je autentifikovan, niz razgovora sa njihovim ID-jevima, URL-ovima i X/Y koordinatama, očišćeni identifikator URL-a, zastavicu koja pokazuje da li je trenutni korisnik administrator sajta ili moderator, i detalje za WebSocket konekciju za sinhronizaciju uživo uključujući tenantIdWS, urlIdWS, i userIdWS.
Primer zahteva
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Primer 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"
}Kreiranje razgovora
Kreirajte novi razgovor vezan za određenu lokaciju na slici.
Endpoint
POST /comment-image-chats/:tenantIdParametri
tenantId (path parameter, required) je vaš FastComments Tenant ID.
Telo zahteva mora biti u JSON formatu i da sadrži sledeća obavezna polja.
urlId (string, required) je osnovni identifikator stranice.
windowUrlId (string, required) je URL kombinovan sa izvorom slike i koordinatama, na primer my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, required) je naslov stranice.
src (string, required) je URL izvora slike.
x (number, required) je X koordinata kao procenat (0-100).
y (number, required) je Y koordinata kao procenat (0-100).
createdFromCommentId (string, required) je ID komentara koji je pokrenuo ovaj razgovor.
broadcastId (string, required) je UUID za sinhronizaciju uživo kako bi se izbegli efekti odjeka.
Odgovor
Odgovor uključuje status API-ja i ID novokreiranog razgovora.
Primer zahteva
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"
}'Primer odgovora
{
"status": "success",
"createdChatId": "conv789"
}Brisanje razgovora
Izbrišite postojeći razgovor vezan za sliku. Ovaj endpoint zahteva administratorske ili moderatorske dozvole, ili razgovor mora biti kreiran od strane autentifikovanog korisnika.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdParametri
tenantId (path parameter, required) je vaš FastComments Tenant ID.
chatId (path parameter, required) je ID razgovora koji želite da obrišete.
broadcastId (request body, required) je UUID za sinhronizaciju uživo.
Primer zahteva
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"
}'Primer odgovora
{
"status": "success"
}Sistem koordinata
X i Y koordinate se čuvaju kao procenti dimenzija slike. X predstavlja horizontalnu poziciju od leve ivice (0 = leva ivica, 100 = desna ivica). Y predstavlja vertikalnu poziciju od gornje ivice (0 = gornja ivica, 100 = donja ivica).
Ove vrednosti u procentima mogu sadržati decimale radi preciznosti. Na primer, x: 25.5 znači 25.5% od leve ivice slike.
Ograničenje zahteva
Ovi endpointi podležu standardnom FastComments ograničenju brzine zahteva. Middleware za ograničenje stope se primenjuje po tenant-u kako bi se sprečila zloupotreba, a istovremeno omogućio normalan obrazac korišćenja.
Odgovori sa greškom
Svi endpointi vraćaju standardne HTTP status kodove. Odgovor 400 znači neispravne parametre zahteva. Odgovor 401 znači da autentifikacija nije uspela. Odgovor 403 označava nedovoljne dozvole. Odgovor 404 znači da razgovor nije pronađen. Odgovor 429 označava prekoračenje ograničenja stope.
Odgovori sa greškom uključuju JSON telo sa detaljima:
{
"status": "error",
"message": "Conversation not found"
}Praćenje upotrebe
Kreiranje razgovora povećava vaš usage metric conversationCreateCount. Sva WebSocket sinhronizacija povećava pubSubMessageCount i pubSubBandwidth. Možete pratiti ove metrike na svom FastComments kontrolnom panelu pod analitikom upotrebe.
Imate pitanja?
To je sve za FastComments Image Chat! Ako imate bilo kakvih pitanja, treba vam pomoć pri implementaciji, ili imate predloge za funkcije, javite nam ispod ili kontaktirajte naš tim za podršku.
Pogledajte uživo demo na našoj demo stranici da vidite Image Chat u akciji.