FastComments Image Chat омогућава интерактивне дискусије на сликама тако што корисницима дозвољава да кликну било где на слици да би креирали тачке за дискусију. Корисници могу кликнути на одређене делове слика да покрену разговоре о тим областима, стварајући визуелне маркере који показују где се дискусије налазе.
Ова функција је идеална за повратне информације о дизајну, рецензије производа, образовне материјале са дијаграмима, фото-галерије са коментарима, и било који сценарио у којем желите контекстуалне дискусије везане за одређена места на слици.
Почетак 
Use Cases
Image Chat odlično funkcioniše za povratne informacije o dizajnu kada timovi treba da diskutuju o određenim elementima u maketama ili snimcima ekrana. Sajtovi za recenzije proizvoda mogu omogućiti kupcima da raspravljaju o određenim karakteristikama vidljivim na fotografijama proizvoda. Obrazovne platforme mogu koristiti Image Chat za diskusiju o dijagramima, mapama ili naučnim slikama. Foto galerije mogu postati interaktivne sa komentarima vezanim za određenu lokaciju na slici. Sajtovi za nekretnine mogu omogućiti posjetiocima da diskutuju o određenim karakteristikama vidljivim na fotografijama nekretnina.
Quick Start
Početak rada sa Image Chat-om je jednostavan. Potrebni su vam FastComments Image Chat skripta, element slike ili kontejner sa slikom, i konfiguracioni objekat sa vašim Tenant ID-jem.
Installation
Add the Image Chat script to your page:
Basic Implementation
Here's a minimal example:
Run 
Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your FastComments dashboard.
How It Works
Once initialized, users can click anywhere on the image. When a click occurs, a visual square marker appears at that location and a chat window opens. Other users can see all the markers and click them to view or participate in those discussions. All discussions sync in real-time across all visitors.
The widget uses percentage-based positioning, so markers stay in the correct location even when the image resizes or is viewed on different screen sizes.
Live Demo
You can see Image Chat in action on our stranici s prikazom uživo.
Next Steps
Now that you have the basics working, you can customize the appearance and behavior in the Configuration Options guide. Check out the Responsive Design guide to understand how percentage-based positioning works. Learn about styling and dark mode support in the Customization guide. For advanced integrations, explore the API Reference.
Frontend Libraries
All FastComments frontend libraries (react, vue, angular, etc) have Image Chat.
Примери
Основни пример
Најједноставнији начин коришћења Image Chat-а је да циљате један елемент слике. Овај пример показује како омогућити интерактивне дискусије на слици:
Run Пример са контејнер елементом
Такође можете проследити контејнер елемент који у себи има слику:
Run Пример са прилагођеним URL ID-јем
Подразумевано, Image Chat користи URL странице у комбинацији са извором слике и координатама да идентификује разговоре. Можете обезбиједити прилагођени urlId:
Run Ово је корисно ако се структура ваших URL-ова промијени, али желите да очувате исте разговоре, или ако желите да дијелите иста мјеста за дискусију на више страница.
Пример са тамним режимом
Ако ваша страница има тамну позадину и видгет је не детектује аутоматски као што би требало, можемо ручно омогућити подршку за тамни режим:
Run Пример са прилагођеном величином квадрата
Можете прилагодити величину кликабилних квадрата који се појављују на слици. Величина се одређује као проценат ширине слике:
Run Пример са повратним позивом за број коментара
Пратите када су коментари додати или ажурирани користећи повратни позив commentCountUpdated:
Пример са више слика
Можете иницијализовати Image Chat на више слика. Свака слика ће имати своје независне тачке за дискусију:
Run Опције конфигурације
Преглед
FastComments Image Chat проширује стандардни FastComments видгет за коментаре, па наследи све опције конфигурације из основног видгета док додаје неколико опција специфичних за анотације слика.
Потребна конфигурација
tenantId
Потребан је ваш FastComments Tenant ID. Можете га пронаћи у вашем FastComments контролном панелу.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Опције специфичне за Image Chat
urlId
По подразумевaњу, Image Chat генерише јединствени идентификатор за сваку конверзацију на основу URL-а странице, извора слике и X/Y координата. Можете то прекрити прилагођеним urlId-ом.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Ово је корисно када структура ваших URL-ова може да се промени али желите да задржите исте конверзације, или када желите да делите анотације преко више страница.
chatSquarePercentage
Контролише величину кликабилних ознака за ћаскање као проценат ширине слике. Подразумевана вредност је 5%, што значи да је свака ознака ширине 5% од ширине слике.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Већи, видљивији маркери
});Мање вредности праве мање инвазивне ознаке које боље функционишу за детаљне слике. Веће вредности чине ознаке лакшим за виђење и кликање на сликама пуним детаља или за кориснике на мобилним уређајима.
hasDarkBackground
Омогућите дизајн у темном режиму када ваша страница има тамну позадину.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Функција повратног позива која се покреће кад год се број коментара промени. Ово је корисно за ажурирање елемената корисничког интерфејса као што су значке или наслови странице.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Наслеђене опције конфигурације
Пошто Image Chat проширује стандардни видгет за коментаре, можете користити било коју опцију конфигурације из основног FastComments видгета. Ево неких често коришћених опција:
locale
Подесите језик корисничког интерфејса видгета. FastComments подржава десетине језика.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Шпански
});readonly
Учини све конверзације само за читање. Корисници могу да прегледају постојеће ознаке и дискусије али не могу да креирају нове или одговарају.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Интегришите са вашим системом аутентификације користећи Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Конфигурација SSO
}
});Погледајте документацију за SSO за детаљна упутства о опцијама аутентификације.
maxReplyDepth
Контролишите колико нивоа дубоко одговори могу да иду. По подразумевaњу, Image Chat подешава ово на 0, што значи да су сви коментари равни (без угнеждених одговора). Можете то променити ако желите нитирану дискусију.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Дозволи 3 нивоа угнеждених одговора
});Интерна конфигурација
Ове опције аутоматски подешава Image Chat и не би требало да их мењате:
Параметар productId се аутоматски поставља на 2 за Image Chat. floating-chat екстензија се аутоматски учитава да обезбеди функционалност прозора за ћаскање. Видгет аутоматски детектује мобилне уређаје (екрани ширине мање од 768px) и прилагођава кориснички интерфејс у складу с тим, са ћаскањем преко целог екрана.
Флексибилност циљног елемента
Први параметар функције FastCommentsImageChat може бити директно <img> елемент или контејнер елемент који у себи садржи слику:
// Директан <img> елемент
FastCommentsImageChat(document.getElementById('my-image'), config);
// Контејнер са сликом унутра
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Видгет ће аутоматски пронаћи слику ако проследите контејнер елемент.
Комплетан пример
Ево примера који показује више опција конфигурације заједно:
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: {
// Ваша SSO конфигурација
},
maxReplyDepth: 1
});За комплетан списак свих доступних опција конфигурације које се наслеђују из основног видгета, погледајте главну FastComments документацију о конфигурацији.
Респонзивни дизајн
Позиционирање засновано на процентима
Image Chat користи координате засноване на процентима уместо пикселских координата за позиционирање ознака за разговоре на сликама. Када корисник кликне на слику, видџет претвара пикселске координате клика у проценат ширине и висине слике. Овај приступ осигурава да ознаке остану на исправној позицији без обзира на то како је слика приказана.
На пример, ако корисник кликне 250 пиксела од леве ивице слике ширине 1000px, видџет то чува као 25% од леве ивице. Када други корисник погледа исту слику ширине 500px на мобилном уређају, ознака се појави на 125 пиксела од леве ивице, што је и даље 25% ширине.
Предности за респонзивне распореде
Овај процентуални систем омогућава да Image Chat беспрекорно ради на свим величинама уређаја и оријентацијама. Ваше слике могу бити приказане у различитим величинама у зависности од ширине екрана, CSS правила или ограничења контејнера, али ознаке се увек поравнавају са намењеним локацијама.
Корисници на десктоп рачунарима са великим монитoрима виде ознаке на истим релативним позицијама као и корисници на паметним телефонима са малим екранима. Означивачи се пропорционално скалирају са самом сликом.
Скалирање слике и аспектни однос
Све док ваша слика задржава аспектни однос приликом скалирања (што је подразумевано понашање прегледача), процентуалне ознаке ће остати савршено поравнате. Видџет претпоставља да се слике скалирају пропорционално и рачуна позиције на основу те претпоставке.
Ако примените CSS који изобличава аспектни однос слике (на пример користећи object-fit: cover са специфичним димензијама), позиције ознака можда неће бити правилно поравнате. За најбоље резултате, дозволите сликама да се природно скалирају или користите object-fit: contain да бисте задржали аспектни однос.
Величина квадрата ознаке разговора
Визуелна величина ознака за разговор такође је заснована на процентима. Опција конфигурације chatSquarePercentage подразумевано је постављена на 5%, што значи да је сваки квадрат 5% ширине слике. Ово обезбеђује конзистентну визуелну тежину на различитим величинама слика.
На слици ширине 1000px са подразумеваном вредношћу од 5%, ознаке су квадратне величине 50px. На слици ширине 500px, исте ознаке су квадратне величине 25px. Оне остају пропорционалне величини слике.
Понашање на мобилним уређајима
На екрану ширине мање од 768px, Image Chat се пребацује на изглед оптимизован за мобилне уређаје. Прозори разговора се отварају преко целог екрана уместо да плутају поред ознаке. Ово омогућава бољу употребљивост на малим екранима где би плавајући прозори заклонили превише слике.
Саме ознаке остају видљиве и кликабилне на позицијама заснованим на процентима. Корисници и даље могу видети где се налазе сви разговори и додирнути ознаке да отворе интерфејс за разговор преко целог екрана.
Динамичко учитавање слика
Процентуални систем ради исправно чак и када се слике учитавају асинхроно или мењају величину након учитавања странице. Видџет прати елемент слике и поново израчунава позиције ознака кад год се промене димензије слике.
Ако користите одложено учитавање слика или имплементирате респонзивне слике са различитим величинама на различитим преломним тачкама, ознаке се аутоматски прилагођавају када се промени величина слике.
Усклађеност између уређаја
Пошто се координате чувају као проценти у бази података, разговор креиран на десктоп рачунару појављује се на потпуно истом релативном месту када се прегледа на таблету или телефону. Корисници могу сарађивати преко уређаја без било каквих нехомогених позиционирања.
Ово функционише у оба смера. Разговор креиран тапом на одређено место на мобилном уређају појављује се на истој релативној позицији када се прегледа на великом десктоп монитору.
Разматрања везана за приказ (viewport)
Видџет израчунава проценте у односу на сам елемент слике, а не у односу на видни прозор. То значи да скроловање странице или мењање величине прозора прегледача не утиче на позиције ознака. Означивачи остају причвршћени за своје локације на слици без обзира на промене видног прозора.
Припрема садржаја за будућност
Поступак заснован на процентима чини ваше дискусије на сликама отпорним на промене распореда, дизајна или екосистема уређаја. Како се појављују нове величине екрана и уређаји, постојеће дискусије ће се и даље исправно приказивати без потребе за ажурирањима или миграцијама.
Прилагођавање
Podrška za tamni režim
Image Chat ima ugrađenu podršku za tamni režim. Kada postavite hasDarkBackground: true u vašoj konfiguraciji, prozori za chat i UI elementi se automatski prilagođavaju da dobro funkcionišu na tamnim pozadinama.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Stilizacija za tamni režim se primjenjuje na prozore chata, kvadrate markera i sve interaktivne elemente. Ako vaš sajt ima prekidač za tamni režim, možete ponovo inicijalizovati widget kada se režim promijeni, 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 automatski poštovati ovo 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 stila 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.
Kvadrati i prozori chata koriste FastComments sistem stilizovanja balončića za komentare, tako da će sve prilagodbe koje ste primijenili na standardni widget za komentare takođe uticati i na Image Chat.
Veličina chat kvadrata
Opcija chatSquarePercentage kontroliše veličinu klikabilnih markera. Podrazumijevano je 5% širine slike:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Veći, vidljiviji kvadrati
});Manje vrijednosti stvaraju diskretnije markere koji se bolje uklapaju u sliku. Veće vrijednosti č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 užim od 768px, Image Chat se automatski prebacuje na izgled optimizovan za mobilne uređaje. Prozori chata se pojavljuju preko cijelog ekrana 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 interfejs chata preko cijelog ekrana. Ovo ponašanje je ugrađeno i ne zahtijeva nikakvu konfiguraciju.
Izgled prozora chata
Prozori chata su široki 300px na desktopu sa strelicom od 16px koja pokazuje na marker. Prozori se pozicioniraju automatski na osnovu 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 komponentnu strukturu kao standardni FastComments widget, pa nasljeđuju sve globalne prilagodbe koje ste primijenili.
Lenja inicijalizacija
Prozori chata se inicijalizuju pri hover-u za desktop korisnike ili odmah kada su kreirani. Ovo smanjuje početno opterećenje učitavanja tako što renderuje interfejs chata samo kada korisnici zaista interaguju sa markerom.
Lenja inicijalizacija se događa transparentno. Korisnici ne primjete kašnjenje, ali browser ne mora renderovati desetine skrivenih prozora chata ako imate mnogo markera na slici.
Lokalizacija
Image Chat podržava iste opcije lokalizacije kao standardni FastComments widget. Postavite 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 upite, dugmad i tekst zamjenskih mjesta.
Naslijeđene opcije prilagođavanja
Pošto Image Chat proširuje standardni widget za komentare, nasljeđuje sve opcije prilagođavanja iz osnovnog widgeta. Ovo uključuje prilagođene CSS klase, prilagođene prevode, prilagođavanje avatara, formatiranje datuma i mnogo više.
Pogledajte glavnu dokumentaciju za prilagođavanje FastComments-a za kompletan spisak dostupnih opcija prilagođavanja.
Rad sa prilagođenim fontovima
Ako vaš sajt koristi prilagođene fontove, Image Chat UI će naslijediti te fontove iz CSS-a vaše stranice. Prozori chata se renderuju unutar DOM-a vaše stranice i poštuju postojeće tipografske postavke.
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 prikaza nestyle-ovanog teksta dok se fontovi učitavaju.
Vizuelni dizajn markera
Kvadratni markeri imaju suptilan vizuelni dizajn koji ih čini uočljivim bez preplavljivanja slike. Možete prilagoditi njihov izgled pomoću CSS-a ako želite drugačiju vizuelnu obradu.
Markeri uključuju hover state-ove koji pružaju povratnu informaciju kada korisnici pomjere miš preko njih. Na uređajima sa touch ekranom, dodir pruža trenutnu povratnu informaciju otvaranjem prozora chata.
Синхронизација уживо
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 označivač, doda komentar ili obriše diskusiju, svi ostali korisnici koji gledaju istu sliku vide ažuriranje odmah bez osvježavanja.
Kako funkcioniše WebSocket sinhronizacija
Kada inicijalizujete Image Chat, vidžet uspostavlja WebSocket konekciju sa FastComments serverima. Ta 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 aktivira kada neko kreira novi marker na slici. Događaj image-chat-updated se aktivira kada neko ažurira postojeću konverzaciju. Događaj deleted-image-chat se aktivira kada neko obriše marker.
Sistem Broadcast ID-a
Da bi se spriječili efekti odjeka u kojima korisnici vide svoje sopstvene akcije vraćene nazad, svako ažuriranje uključuje jedinstveni broadcastId. Kada korisnik kreira ili ažurira marker, njihov klijent generiše UUID za tu operaciju. Kada WebSocket emitira ažuriranje nazad svim klijentima, klijent koji je inicirao operaciju ignoriše to ažuriranje jer se podudara sa njegovim sopstvenim broadcastId.
Ovo osigurava glatku interakciju u kojoj korisnici odmah vide svoje promjene u korisničkom interfejsu bez čekanja za putovanje do servera i nazad, dok istovremeno svi ostali 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 vidjeti ažuriranja od drugih korisnika dok se konekcija ne uspostavi ponovo.
Kada se konekcija ponovo uspostavi, vidžet se ponovo sinhronizuje kako bi osigurao da nijedno ažuriranje nije propušteno. Ovo se dešava transparentno bez potrebe za intervencijom korisnika.
Razmatranja propusnosti
WebSocket poruke su lagane i sadrže samo osnovne informacije potrebne za sinhronizaciju stanja. Kreiranje novog označivača obično koristi manje od 1KB propusnosti. Sistem takođe uključuje inteligentno grupisanje kako bi smanjio frekvenciju poruka tokom perioda velike aktivnosti.
Vaši metrički podaci u FastComments kontrolnoj tabli prate pubSubMessageCount i pubSubBandwidth kako biste mogli pratiti aktivnost real-time sinhronizacije na vašim sajtovima.
Sinhronizacija među karticama
Ako korisnik ima istu stranicu otvorenu u više browser kartica, ažuriranja u jednoj kartici pojavljuju se odmah u ostalim karticama. Ovo radi kroz isti WebSocket mehanizam i ne zahtijeva 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 se pojavljuje instantno na korisnikovom tabletu ako oba uređaja gledaju istu sliku.
Sigurnost
WebSocket poruke se prenose preko sigurnih konekcija (WSS) i uključuju validaciju tenant-a kako bi se osiguralo da korisnici dobijaju samo ažuriranja za konverzacije koje su ovlašćeni da vide. Server validira sve operacije prije nego što ih emituje kako bi spriječio neovlašćeni pristup ili manipulaciju.
Ponašanje u offline režimu
Kada su korisnici potpuno offline, mogu i dalje pregledati postojeće markere ali ne mogu kreirati nove niti vidjeti ažuriranja od drugih. Vidžet detektuje offline stanje i prikazuje odgovarajuću poruku.
Ako korisnik pokuša da kreira marker dok je offline, a zatim se ponovo poveže, operacija će biti neuspešna umjesto da se stavi u red, čime se osigurava konzistentnost podataka. Korisnici bi trebali ponoviti operaciju kada im se veza obnovi.
Uticaj na performanse
WebSocket konekcija ima minimalan uticaj na performanse. Konekcija ostaje u mirovanju kada nema ažuriranja i procesira poruke samo kada se dogode aktivnosti. Na tipičnoj slici sa umjerenom aktivnošću markera, WebSocket koristi manje CPU resursa nego sam rendering slike.
Za stranice sa stotinama istovremenih korisnika i velikom aktivnosti kreiranja markera, sistem se horizontalno skalira kako bi održao performanse bez uticaja na pojedinačne klijentske konekcije.
Kolaborativni slučajevi upotrebe
Sinhronizacija u realnom vremenu čini Image Chat naročito moćnim za kolaborativne tokove rada. Dizajn timovi mogu zajedno pregledati makete uz to da svi vide postavke markera u realnom vremenu. Timovi za korisničku podršku mogu zajednički anotirati snimke ekrana kako bi identifikovali probleme. Edukativne grupe mogu raspravljati o dijagramima pri čemu svi učesnici vide markere drugih kako se kreiraju.
Neposredna povratna informacija stvara angažovanije i produktivnije kolaborativno iskustvo u poređenju sa tradicionalnim sistemima komentara gdje korisnici moraju osvježiti stranicu da bi vidjeli ažuriranja.
Референца API
Преглед API‑ја
Image Chat пружа три REST API ендпоинта за програмско управљање конверзацијама слика. Ови ендпоинти вам омогућавају да преузимате, креирате и бришете маркере без коришћења видгета у прегледачу.
Сви API ендпоинти захтијевају аутентификацију и прате стандардне FastComments API обрасце. Ово су јавни ендпоинти који аутентификују преко колачића прегледача, а не преко API кључева.
Base URL
Сви Image Chat API ендпоинти су под:
https://fastcomments.com/comment-image-chatsАутентификација
Ови ендпоинти аутентификују кориснике преко колачића прегледача. Не користе API кључеве. Корисници морају бити пријављени у FastComments у свом прегледачу да би приступили овим ендпоинтима.
Добијање свих разговора
Преузмите све разговоре везане за одређену слику.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Parameters
tenantId (path parameter, required) је ваш FastComments Tenant ID.
urlId (query parameter, required) је идентификатор слике за који желите да преузмете разговоре.
Response
Одговор садржи статус API‑ја, информацију о тренутној корисничкој сесији ако је аутентификована, низ разговора са њиховим ID-јевима, URL-овима и X/Y координатама, очишћени идентификатор URL-а, ознаку да ли је тренутни корисник администратор сајта или модератор, и детаље WebSocket везе за синхронизацију уживо који укључују tenantIdWS, urlIdWS, и userIdWS.
Example Request
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Example Response
{
"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"
}Креирање разговора
Креирајте нови разговор о слици за одређену локацију на слици.
Endpoint
POST /comment-image-chats/:tenantIdParameters
tenantId (path parameter, required) је ваш FastComments Tenant ID.
Тело захтјева мора бити у JSON формату и садржати следећа обавезна поља.
urlId (string, required) је базни идентификатор странице.
windowUrlId (string, required) је URL у комбинацији са извором слике и координатама, на пример my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, required) је наслов странице.
src (string, required) је URL извор слике.
x (number, required) је X координата као проценат (0-100).
y (number, required) је Y координата као проценат (0-100).
createdFromCommentId (string, required) је ID коментара који је покренуо овај ћаскање.
broadcastId (string, required) је UUID за синхронизацију уживо да би се спречили ефекти еха.
Response
Одговор садржи статус API‑ја и ID управо креираног разговора.
Example Request
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"
}'Example Response
{
"status": "success",
"createdChatId": "conv789"
}Брисање разговора
Избришите постојећи разговор о слици. Овај ендпоинт захтијева дозволе администратора или модератора, или разговор мора бити креиран од стране аутентификованог корисника.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdParameters
tenantId (path parameter, required) је ваш FastComments Tenant ID.
chatId (path parameter, required) је ID разговора који се брише.
broadcastId (request body, required) је UUID за синхронизацију уживо.
Example Request
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"
}'Example Response
{
"status": "success"
}Систем координата
X и Y координате се чувају као проценти димензија слике. X представља хоризонталну позицију од леве ивице (0 = лава ивица, 100 = десна ивица). Y представља вертикалну позицију од врха (0 = врх, 100 = дно).
Ове процентуалне вредности могу садржати децимале за већу прецизност. На пример, x: 25.5 значи 25.5% од леве ивице слике.
Ограничења учесталости захтева
Ови ендпоинти су подложни стандардним FastComments ограничењима учесталости захтева. Middleware за ограничење примењује се по tenant-у да би се спречила злоупотреба, а истовремено допустило нормално коришћење.
Одговори са грешком
Сви ендпоинти враћају стандардне HTTP статус кодове. Одговор 400 означава неважеће параметре захтева. Одговор 401 значи да аутентификација није успела. Одговор 403 указује на недовољна овлашћења. Одговор 404 значи да разговор није пронађен. Одговор 429 означава прелазак лимита захтева.
Одговори са грешком укључују JSON тело са детаљима:
{
"status": "error",
"message": "Conversation not found"
}Праћење коришћења
Креирање разговора повећава вашу употребну метрику conversationCreateCount. Сва активност WebSocket синхронизације повећава pubSubMessageCount и pubSubBandwidth. Ове метрике можете пратити у вашем FastComments контролном панелу под аналитиком коришћења.
Имате питања?
То је све за FastComments Image Chat! Ако имате било каквих питања, потребну помоћ при имплементацији или предлоге за функције, молимо вас да нас обавестите испод или се обратите нашем тиму за подршку.
Погледајте уживо демонстрацију на нашој страници демонстрације да бисте видели Image Chat у акцији.