Razgovor s slikama

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:

Učitavanje Image Chat skripte

Copy

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>

Osnovna implementacija

Evo minimalnog primjera:

Osnovna implementacija Image Chata

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Image Gallery with Image Chat</title>
</head>
<body>
    <!-- Vaša slika -->
    <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
    <!-- Učitajte Image Chat skriptu -->
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <!-- Inicijalizirajte Image Chat -->
    <script>
        FastCommentsImageChat(document.getElementById('my-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

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:

Osnovni primjer Image Chata

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Product Image with Chat</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

Primjer s kontejnerskim elementom

Također možete proslijediti kontejnerski element koji sadrži sliku:

Image Chat s kontejnerom

Copy

Run

<div id="image-container">
    <img src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="System Diagram" />
</div>
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('image-container'), {
        tenantId: 'demo'
    });
</script>

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:

Image Chat s prilagođenim URL ID-om

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        urlId: 'product-v2-main-image'
    });
</script>

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:

Image Chat s tamnim načinom rada

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        hasDarkBackground: true
    });
</script>

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:

Image Chat s prilagođenom veličinom kvadrata

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Image Chat with Custom Square Size</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo',
            chatSquarePercentage: 2, // Manji kvadrati (zadano je 5)
        });
    </script>
</body>
</html>

Primjer s povratnim pozivom broja komentara

Pratite kada su komentari dodani ili ažurirani koristeći commentCountUpdated povratni poziv:

Image Chat s povratnim pozivom za broj komentara

Copy

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        commentCountUpdated: function(count) {
            console.log('Total comments:', count);
            document.getElementById('comment-badge').textContent = count;
        }
    });
</script>

Primjer s više slika

Možete inicijalizirati Image Chat na više slika. Svaka slika će imati svoje neovisne točke rasprave:

Image Chat na više slika

Copy

Run

<img id="image-1" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 1" />
<img id="image-2" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 2" />
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    // Inicijaliziraj na prvoj slici
    FastCommentsImageChat(document.getElementById('image-1'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-1'
    });
    // Inicijaliziraj na drugoj slici
    FastCommentsImageChat(document.getElementById('image-2'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-2'
    });
</script>

Opcije konfiguracije

Pregled

FastComments Image Chat proširuje standardni FastComments widget za komentare, tako da nasljeđuje sve opcije konfiguracije osnovnog widgeta, uz dodavanje nekoliko specifičnih za anotacije slika.

Obavezna konfiguracija

tenantId

Potreban je vaš FastComments Tenant ID. Možete ga pronaći u svom FastComments dashboardu.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo'
});

Opcije specifične za Image Chat

urlId

Prema zadanim postavkama, Image Chat generira jedinstveni identifikator za svaki razgovor na temelju URL-a stranice, izvora slike te X/Y koordinata. To možete nadjačati prilagođenim urlId.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    urlId: 'my-custom-image-id'
});

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

chatSquarePercentage

Kontrolira veličinu klikabilnih oznaka razgovora kao postotak širine slike. Zadana vrijednost je 5%, što znači da je svaka oznaka 5% širine slike.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 8  // Veće, vidljivije oznake
});

Manje vrijednosti stvaraju manje nametljive oznake koje bolje funkcioniraju za detaljne slike. Veće vrijednosti čine oznake lakšima za vidjeti i kliknuti na zauzetim slikama ili za korisnike na mobilnim uređajima.

hasDarkBackground

Omogućite stiliziranje tamnog načina rada kada vaša stranica ima tamnu pozadinu.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

commentCountUpdated

Funkcija povratnog poziva koja se aktivira svaki put kada se broj komentara promijeni. Ovo je korisno za ažuriranje UI elemenata poput bedževa ili naslova stranica.

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 nekoliko često korištenih opcija:

locale

Postavite jezik za UI 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 oznake i rasprave, ali ne mogu stvarati nove ni odgovarati.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    readonly: true
});

sso i simpleSSO

Integrirajte se sa svojim sustavom autentifikacije pomoću Single Sign-On-a.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    sso: {
        // SSO konfiguracija
    }
});

Pogledajte SSO dokumentaciju za potpune detalje o opcijama autentifikacije.

maxReplyDepth

Kontrolirajte koliko razina dubine odgovori mogu ići. Prema zadanim postavkama, Image 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.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // Dopusti 3 razine ugniježđenja
});

Interna konfiguracija

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

productId je automatski postavljen na 2 za Image Chat. Ekstenzija floating-chat se automatski učitava kako bi omogućila funkcionalnost prozora razgovora. Widget automatski otkriva mobilne uređaje (zaslone širine ispod 768px) i prilagođava UI sukladno tome s fullscreen prozorima razgovora.

Fleksibilnost ciljanog elementa

Prvi parametar za FastCommentsImageChat može biti izravno <img> element ili element spremnika sa slikom unutra:

// Izravni element slike
FastCommentsImageChat(document.getElementById('my-image'), config);

// Spremnik sa slikom unutra
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);

Widget će automatski pronaći sliku ako proslijedite element spremnika.

Potpuni primjer

Evo primjera 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 potpuni popis svih dostupnih opcija konfiguracije naslijeđenih iz osnovnog widgeta, pogledajte glavnu dokumentaciju konfiguracije FastComments.

Responzivni dizajn

Pozicioniranje na temelju postotaka

Image Chat koristi koordinate na temelju postotaka umjesto pikselnih koordinata za pozicioniranje oznaka razgovora na slikama. Kada korisnik klikne na sliku, widget pretvara pikselne koordinate klika u postotke širine i visine slike. Ovaj pristup osigurava da oznake ostaju na ispravnoj lokaciji bez obzira na to kako je slika prikazana.

Na primjer, ako korisnik klikne 250 piksela od lijevog ruba slike širine 1000px, widget to sprema kao 25% s lijeva. Kada drugi korisnik pregledava istu sliku širine 500px na mobilnom uređaju, oznaka se pojavljuje 125 piksela od lijevog ruba, što je i dalje 25% širine.

Prednosti za responzivne rasporede

Ovaj postotni sustav omogućuje da Image Chat besprijekorno radi na svim veličinama i orijentacijama uređaja. Vaše slike mogu biti prikazane u različitim veličinama ovisno o širini zaslona, CSS pravilima ili ograničenjima spremnika, ali se oznake uvijek ispravno poravnavaju s namijenjenim lokacijama.

Korisnici na stolnim računalima s velikim monitorima vide oznake u istim relativnim pozicijama kao korisnici na pametnim telefonima s malim zaslonima. Oznake se skaliraju proporcionalno sa samom slikom.

Skaliranje slika i omjer slike

Dok god vaša slika zadržava omjer pri skaliranju (što je zadano ponašanje preglednika), oznake na temelju postotaka ostat će savršeno poravnate. Widget pretpostavlja da se slike skaliraju proporcionalno i izračunava pozicije na temelju te pretpostavke.

Ako primijenite CSS koji iskrivljuje omjer slike (poput korištenja object-fit: cover s određenim dimenzijama), pozicije oznaka možda se neće ispravno poravnati. Za najbolje rezultate dopustite slikama da se prirodno skaliraju ili koristite object-fit: contain za očuvanje omjera slike.

Veličina kvadrata razgovora

Vizualna veličina oznaka razgovora također se temelji na postocima. Konfiguracijska opcija chatSquarePercentage ima zadanu vrijednost od 5%, što znači da je svaki kvadrat 5% širine slike. To osigurava dosljednu vizualnu težinu u različitim veličinama slika.

Na slici širine 1000px sa zadanom postavkom od 5%, oznake su kvadrati od 50px. Na slici širine 500px, iste oznake su kvadrati od 25px. Ostaju proporcionalne veličini slike.

Ponašanje na mobilnim uređajima

Na zaslonima širine manje od 768px, Image Chat prelazi na mobilno optimizirani raspored. Prozori razgovora otvaraju se preko cijelog zaslona umjesto da lebde uz oznaku. To pruža bolju upotrebljivost na malim zaslonima gdje bi leteći prozori prekrili previše slike.

Same oznake ostaju vidljive i klikabilne na svojim pozicijama temeljenim na postocima. Korisnici i dalje mogu vidjeti gdje se nalaze svi razgovori i dodirnuti oznake za otvaranje sučelja razgovora preko cijelog zaslona.

Dinamičko učitavanje slika

Postotni sustav ispravno radi čak i kada se slike učitavaju asinkrono ili mijenjaju veličinu nakon učitavanja stranice. Widget prati element slike i ponovno izračunava pozicije oznaka svaki put kada se dimenzije slike promijene.

Ako koristite lazy-loading slika ili implementirate responzivne slike s različitim veličinama na različitim prijelomnim točkama, oznake se automatski prilagođavaju kada se veličina slike promijeni.

Dosljednost među uređajima

Budući da se koordinate spremaju kao postoci u bazi podataka, razgovor stvoren na stolnom računalu pojavljuje se na potpuno istoj relativnoj lokaciji kada se pregledava na tabletu ili telefonu. Korisnici mogu surađivati na različitim uređajima bez ikakvih nekonzistentnosti u pozicioniranju.

Ovo radi u oba smjera. Razgovor stvoren dodirivanjem određene točke na mobilnom uređaju pojavljuje se na istoj relativnoj poziciji kada se pregledava na velikom monitoru stolnog računala.

Razmatranja o vidljivom području

Widget izračunava postotke u odnosu na sam element slike, a ne na vidljivo područje (viewport). To znači da pomicanje stranice ili promjena veličine prozora preglednika ne utječe na pozicije oznaka. Oznake ostaju usidrene na svojim lokacijama na slici bez obzira na promjene vidljivog područja.

Buduća otpornost sadržaja

Pristup temeljen na postocima čini vaše slikovne razgovore otpornima na promjene u rasporedu, dizajnu ili ekosustavu uređaja. Kako se pojavljuju nove veličine zaslona i uređaji, postojeći razgovori nastavit će se ispravno prikazivati bez potrebe za bilo kakvim 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

Ažuriranja u stvarnom vremenu

Image Chat koristi WebSocket veze za sinkronizaciju svih razgovora u stvarnom vremenu među svim povezanim korisnicima. Kada netko stvori novi marker, doda komentar ili izbriše raspravu, svi ostali korisnici koji gledaju istu sliku odmah vide ažuriranje bez osvježavanja.

Kako funkcionira WebSocket sinkronizacija

Kada inicijalizirate Image Chat, widget uspostavlja WebSocket vezu s FastComments poslužiteljima. Ova veza ostaje otvorena tijekom trajanja korisničke sesije i sluša ažuriranja povezana s trenutnom slikom.

WebSocket sustav koristi tri vrste broadcast poruka za Image Chat. Događaj new-image-chat aktivira se kada netko stvori novi marker na slici. Događaj image-chat-updated aktivira se kada netko ažurira postojeći razgovor. Događaj deleted-image-chat aktivira se kada netko izbriše marker.

Sustav broadcast ID-jeva

Kako bi se spriječili efekti odjeka gdje korisnici vide vlastite akcije vraćene natrag njima, svako ažuriranje uključuje jedinstveni broadcastId. Kada korisnik stvori ili ažurira marker, njegov klijent generira UUID za tu operaciju. Kada WebSocket emitira ažuriranje natrag svim klijentima, izvorni klijent ignorira ažuriranje jer se podudara s vlastitim broadcastId.

To osigurava glatku interakciju gdje korisnici odmah vide svoje promjene u sučelju bez čekanja na povratni put kroz poslužitelj, dok se istovremeno osigurava da svi ostali korisnici dobiju ažuriranje.

Otpornost veze

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

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

Razmatranja propusnosti

WebSocket poruke su lagane i sadrže samo bitne informacije potrebne za sinkronizaciju stanja. Stvaranje novog markera obično koristi manje od 1KB propusnosti. Sustav također uključuje inteligentno grupiranje kako bi se smanjila učestalost poruka tijekom razdoblja 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 svojim stranicama.

Sinkronizacija između kartica

Ako korisnik ima istu stranicu otvorenu u više kartica preglednika, ažuriranja u jednoj kartici odmah se pojavljuju u ostalim karticama. To funkcionira kroz isti mehanizam WebSocket sinkronizacije i ne zahtijeva nikakvu dodatnu konfiguraciju.

Korisnici mogu imati vašu stranicu otvorenu na više uređaja istovremeno, i svi će ostati sinkronizirani. Marker stvoren na računalu odmah se pojavljuje na korisnikovom tabletu ako oba uređaja gledaju istu sliku.

Sigurnost

WebSocket poruke se prenose preko sigurnih veza (WSS) i uključuju validaciju stanara (tenant) kako bi se osiguralo da korisnici primaju samo ažuriranja za razgovore koje su ovlašteni vidjeti. Poslužitelj validira sve operacije prije nego što ih emitira kako bi spriječio neovlašteni pristup ili manipulaciju.

Ponašanje izvan mreže

Kada su korisnici potpuno izvan mreže, i dalje mogu vidjeti postojeće markere, ali ne mogu stvarati nove niti vidjeti ažuriranja drugih. Widget otkriva stanje izvan mreže i prikazuje odgovarajuću poruku.

Ako korisnik pokuša stvoriti marker dok je izvan mreže, a zatim se vrati na mrežu, operacija će propasti umjesto da se stavi u red čekanja, čime se osigurava konzistentnost podataka. Korisnici trebaju ponoviti operaciju nakon što se veza obnovi.

Utjecaj na performanse

WebSocket veza ima minimalan utjecaj na performanse. Veza ostaje neaktivna kada nema ažuriranja i obrađuje poruke samo kada se dogodi aktivnost. Na tipičnoj slici s umjerenom aktivnošću markera, WebSocket koristi manje CPU-a nego samo renderiranje slike.

Za stranice sa stotinama istovremenih korisnika i visokom aktivnošću stvaranja markera, sustav se horizontalno skalira kako bi održao performanse bez utjecaja na pojedinačne klijentske veze.

Suradnički primjeri upotrebe

Sinkronizacija u stvarnom vremenu čini Image Chat posebno moćnim za suradničke tijekove rada. Dizajnerski timovi mogu zajedno pregledavati mockupove dok svi u stvarnom vremenu vide postavljanje markera. Timovi za korisničku podršku mogu suradnički označavati snimke zaslona kako bi identificirali probleme. Obrazovne skupine mogu raspravljati o dijagramima dok svi sudionici vide markere jedni drugih čim se stvore.

Trenutna povratna informacija stvara angažiranije i produktivnije suradničko iskustvo u usporedbi s tradicionalnim sustavima komentara gdje korisnici trebaju osvježiti stranicu da vide 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-chats

Autentifikacija

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/:tenantId

Parametri

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/:chatId

Parametri

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 pitanja?

To je sve za FastComments Image Chat! Ako imate bilo kakvih pitanja, trebate pomoć pri implementaciji ili imate prijedloge za značajke, javite nam u nastavku ili se obratite našem timu za podršku.

Pogledajte živi demo na našoj demo stranici da biste vidjeli Image Chat u akciji.

Jezik 🇭🇷 Hrvatski

Početak rada

Konfiguracija

Prilagodba

Napredno

Razgovor s slikama

Početak rada

Slučajevi upotrebe

Brzi početak

Instalacija

Osnovna implementacija

Kako radi

Demo uživo

Sljedeći koraci

Frontend biblioteke

Primjeri

Osnovni primjer

Primjer s kontejnerskim elementom

Primjer s prilagođenim URL ID-om

Primjer s tamnim načinom rada

Primjer s prilagođenom veličinom kvadrata chata

Primjer s povratnim pozivom broja komentara

Primjer s više slika

Opcije konfiguracije

Pregled

Obavezna konfiguracija

tenantId

Opcije specifične za Image Chat

urlId

chatSquarePercentage

hasDarkBackground

commentCountUpdated

Naslijeđene opcije konfiguracije

locale

readonly

sso i simpleSSO

maxReplyDepth

Interna konfiguracija

Fleksibilnost ciljanog elementa

Potpuni primjer

Responzivni dizajn

Pozicioniranje na temelju postotaka

Prednosti za responzivne rasporede

Skaliranje slika i omjer slike

Veličina kvadrata razgovora

Ponašanje na mobilnim uređajima

Dinamičko učitavanje slika

Dosljednost među uređajima

Razmatranja o vidljivom području

Buduća otpornost sadržaja

Prilagodba

Podrška za tamni način

Dinamički tamni način

Prilagođavanje stila pomoću CSS-a

Veličina chat kvadratića

Ponašanje na mobilnim uređajima

Izgled prozora chata

Lenja inicijalizacija

Lokalizacija

Naslijeđene opcije prilagodbe

Rad s prilagođenim fontovima

Vizualni dizajn markera

Sinkronizacija uživo

Ažuriranja u stvarnom vremenu

Kako funkcionira WebSocket sinkronizacija

Sustav broadcast ID-jeva

Otpornost veze

Razmatranja propusnosti

Sinkronizacija između kartica

Sigurnost

Ponašanje izvan mreže

Utjecaj na performanse

Suradnički primjeri upotrebe

Referenca API-ja

Pregled API-ja

Osnovni URL

Autentifikacija

Dohvati sve razgovore

Krajnja točka

Parametri