FastComments Image Chat омогућава интерактивне дискусије на сликама тиме што корисницима омогућава да кликну било гдје на слику да би креирали тачке за дискусију. Корисници могу кликнути на специфичне делове слика да започну разговоре о тим областима, стварајући визуелне маркере који показују гдје се дискусије налазе.
Ова функција је идеална за повратне информације о дизајну, прегледе производа, образовне материјале са дијаграмима, фото-галерије са коментарима и било који сценарио у којем желите контекстуалне дискусије везане за одређене локације на слици.
Како почети 
Use Cases
Image Chat je odličan za povratne informacije o dizajnu kada timovi trebaju diskutovati o specifičnim elementima u maketama ili snimkama ekrana. Sajtovi za recenzije proizvoda mogu omogućiti korisnicima da raspravljaju o specifičnim karakteristikama vidljivim na fotografijama proizvoda. Obrazovne platforme mogu ga koristiti za raspravu o dijagramima, mapama ili naučnim slikama. Foto galerije mogu postati interaktivne uz komentare vezane za određene lokacije na slici. Nekretninski sajtovi mogu omogućiti posjetiocima da raspravljaju o specifičnim značajkama vidljivim na fotografijama nekretnina.
Quick Start
Početi sa Image Chat-om je jednostavno. Potreban vam je FastComments Image Chat script, element slike ili kontejner sa slikom, i konfiguracijski objekt sa vašim Tenant ID.
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 kontrolna ploča.
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 demo verzijom 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
По подразумевању, 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 // Veći, vidljiviji markeri
});Мање вриједности креирају мање упадљиве маркере који боље раде за детаљне слике. Веће вриједности чине маркере лакшим за видјети и кликање на густим сликама или за кориснике на мобилним уређајима.
hasDarkBackground
Омогућите тамни режим стилова када ваша страница има тамну позадину.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Функција повратног позива која се покреће кад год се број коментара промijени. Ово је корисно за ажурирање UI елемената попут значки или наслова странице.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Наслеђене опције конфигурације
Пошто Image Chat проширује стандардни коментаторски видгет, можете користити било коју опцију конфигурације из базног FastComments видгета. Ево неколико често кориштених опција:
locale
Подесите језик за UI видгета. FastComments подржава десетине језика.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Španski
});readonly
Учините све разговоре само за читање. Корисници могу видјети постојеће маркере и дискусије али не могу креирати нове или одговарати.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso i simpleSSO
Интегришите са вашим системом аутентификације користећи Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Konfiguracija SSO
}
});Погледајте документацију о SSO за пунa детаље о опцијама аутентификације.
maxReplyDepth
Контролишите колико нивоа дубоко одговори могу ићи. По подразумевању, Image Chat поставља ово на 0, што значи да су сви коментари равни (без угнежђених одговора). Ово можете промијенити ако желите темељне разговоре.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Dozvoli 3 nivoa ugnježđivanja
});Интерна конфигурација
Ове опције аутоматски поставља Image Chat и не би требало да се надјеђују:
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.
Флексибилност циљног елемента
Први параметар за FastCommentsImageChat може бити или <img> елемент директно или контејнерски елемент са сликом унутра:
// Direktan <img> element
FastCommentsImageChat(document.getElementById('my-image'), config);
// Kontejner sa slikom unutra
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 документацију о конфигурацији.
Респонзивни дизајн
Percentage-Based Positioning
Image Chat користи координате засноване на процентима уместо пикселских координата за позиционирање маркера ћаскања на сликама. Када корисник кликне на слику, видгет конвертује пикселске координате клика у проценат ширине и висине слике. Овај приступ осигурава да маркери остану на исправној локацији без обзира на то како је слика приказана.
На пример, ако корисник кликне 250 пиксела од леве ивице слике ширине 1000px, видгет то чува као 25% од леве ивице. Када други корисник погледа исту слику ширине 500px на мобилном уређају, маркер ће се појавити на 125 пиксела од леве ивице, што је и даље 25% ширине.
Benefits for Responsive Layouts
Овај систем процената омогућава да Image Chat беспрекорно ради на свим величинама уређаја и оријентацијама. Ваше слике могу бити приказане у различитим величинама у зависности од ширине екрана, CSS правила или ограничења контејнера, али маркери се увек правилно поравнавају са предвиђеним локацијама.
Корисници на десктоп рачунарима са великим мониторима виде маркере на истим релативним позицијама као и корисници на паметним телефонима са малим екранима. Маркери се мењају пропорционално са самом сликом.
Image Scaling and Aspect Ratio
Док год ваша слика одржава аспект рацио приликом скалирања (што је подразумевано понашање прегледача), маркери засновани на процентима ће остати савршено поравнати. Видгет претпоставља да се слике скалирају пропорционално и израчунава позиције на основу те претпоставке.
Ако примените CSS који деформише аспект рацио слике (на пример коришћењем object-fit: cover са специфичним димензијама), позиције маркера можда неће бити правилно поравнате. За најбоље резултате, дозволите сликама да се скалирају природно или користите object-fit: contain да одржите аспект рацио.
Chat Square Sizing
Визуелна величина маркера ћаскања је такође заснована на процентима. Опција конфигурације chatSquarePercentage је подразумевано постављена на 5%, што значи да је сваки квадрат 5% ширине слике. Ово осигурава конзистентну визуелну тежину на различитим величинама слика.
На слици ширине 1000px са подразумеваном вредношћу 5%, маркери су квадрати 50px. На слици ширине 500px, исти маркери су квадрати 25px. Они остају пропорционални величини слике.
Mobile Behavior
На екранима ширине мање од 768px, Image Chat прелази на мобилно оптимизован распорeд. Прозори ћаскања се отварају преко целог екрана уместо да плутају поред маркера. Ово пружа бољу употребљивост на малим екранима где би плутајући прозори преоптеретили превише слике.
Сами маркери остају видљиви и кликабилни на својим позицијама заснованим на процентима. Корисници и даље могу видети где се све дискусије налазе и тапнути на маркере да отворе интерфејс за ћаскање преко целог екрана.
Dynamic Image Loading
Систем заснован на процентима ради исправно чак и када се слике учитавају асинхроно или мењају величину након учитавања странице. Видгет прати елемент слике и реизрачунава позиције маркера када год се димензије слике промене.
Ако користите одложено учитавање слика или имплементирате респонзивне слике различитих величина на различитим преломним тачкама, маркери се аутоматски прилагођавају када се величина слике промени.
Cross-Device Consistency
Пошто се координате чувају као проценти у бази података, дискусија створена на десктоп рачунару појављује се на истој релативној локацији када се гледа на таблету или телефону. Корисници могу сарађивати на различитим уређајима без било каквих неусклађености у позиционирању.
Ово ради у оба правца. Дискусија креирана тапкањем на одређено место на мобилном уређају појављује се на истој релативној позицији када се гледа на великом десктоп монитору.
Viewport Considerations
Видгет израчунава проценте у односу на сам елемент слике, а не у односу на видну област (viewport). То значи да прелицање странице или мењање величине прозора прегледача не утиче на позиције маркера. Маркери остају причвршћени за своје локације на слици без обзира на промене видне области.
Future-Proofing Content
Приступ заснован на процентима чини ваше дискусије о сликама отпорним на промене у распореду, дизајну или екосистему уређаја. Како се појављују нове величине екрана и уређаји, постојеће дискусије ће се наставити правилно приказивати без потребе за икаквим ажурирањима или миграцијама.
Прилагођавање
Подршка за тамни режим
Image Chat има уграђену подршку за тамни режим. Када у конфигурацији подесите hasDarkBackground: true, прозори чета и UI елементи се аутоматски прилагођавају да добро функционишу на тамним позадинама.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Стилови за тамни режим се примјењују на прозоре чата, квадратиће маркера и све интерактивне елементе. Ако ваша сајт има прекидач за тамни режим, можете поново иницијализовати видгет када се режим промијени, или користити приступ са класом на body елементу опisan испод.
Динамички тамни режим
Ако је тамни режим на вашем сајту контролисан додавањем .dark класе на body елемент, Image Chat UI ће аутоматски поштовати то без потребе за поновном иницијализацијом. Стилови видгета су дизајнирани да реагују на присуство ове класе.
/* Ваш CSS за тамни режим */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Прилагођавање стила помоћу CSS-а
Можете прилагодити изглед маркера, прозора чата и других елемената помоћу CSS-а. Видгет додаје специфичне класе које можете cilати у вашем стилском листу.
Квадратићи и прозори чата користе систем стилизовања балона коментара FastComments-а, тако да било каква прилагођавања која сте примјенили на стандардни видгет за коментаре ће такође утицати на Image Chat.
Величина квадрата чата
Опција chatSquarePercentage контролише величину кликабилних маркера. Подразумјевана вриједност је 5% ширине слике:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Већи, видљивији квадрати
});Мање вриједности креирају суптилније маркере који се боље уклапају у слику. Веће вриједности чине маркере упадљивијим и лакшим за кликање, нарочито на мобилним уређајима или из разлога приступачности.
Понашање на мобилним уређајима
На екранима ширине мање од 768px, Image Chat аутоматски прелази на мобилну оптимизовану распореда. Прозори чата се појављују преко цијелог екрана уместо да плутају поред маркера, пружајући бољу употребљивост на малим екранским величинама.
Маркери остају видљиви на својим респонзивним позицијама на слици. Корисници могу додирнути било који маркер да отворе интерфејс чата преко цијелог екрана. Ово понашање је уграђено и не захтијева додатну конфигурацију.
Изглед прозора чата
Прозори чата су ширине 300px на десктопу са стрелицом од 16px која показује на маркер. Прозори се аутоматски позиционирају у зависности од доступног простора у viewport-у, користећи позиционирајуће класе као што су to-right, to-left, to-top, и to-bottom.
Можете додати прилагођени CSS да подесите боје, фонтове, размаке или друге визуелне особине ових прозора. Прозори чата користе исту компонентну структуру као стандардни FastComments видгет, тако да наслеђују сва глобална прилагођавања која сте примјенили.
Одложена иницијализација
Прозори чата се иницијализују при hover-у за кориснике на десктопу или одмах када се креирају. Ово смањује почетно оптерећење учитавања тако што рендерује интерфејс чата само када корисници заиста интерагују са маркером.
Одложена иницијализација се догоди прозирно. Корисници не примјете кашњење, али претраживачу није потребно да рендерује десетине скривених прозора чата ако имате много маркера на слици.
Локализација
Image Chat подржава све исте опције локализације као и стандардни FastComments видгет. Подесите опцију locale да прикажете UI текст на различитим језицима:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Француски
});FastComments подржава десетине језика. Подешавање локала утиче на сав UI текст укључујући упите, дугмад и текст места за упис.
Насљедне опције прилагођавања
Пошто Image Chat проширује стандардни видгет за коментаре, насљедује све опције прилагођавања из базног видгета. Ово укључује прилагођене CSS класе, прилагођене преводе, прилагођавање аватара, форматирање датума и још много тога.
Погледајте главну FastComments документацију о прилагођавању за комплетну листу опција прилагођавања које су доступне.
Рад са прилагођеним фонтовима
Ако ваш сајт користи прилагођене фонтове, Image Chat UI ће насљедити те фонтове из CSS-а ваше странице. Прозори чата се рендерују у DOM-у ваше странице и поштују ваше постојеће типографске поставке.
За најбоље резултате, осигурајте да су ваши прилагођени фонтови учитани прије иницијализације Image Chat-а, или прихватите да може доћи до краткотрајног појављивања неформатираног текста док се фонтови учитавају.
Визуелни дизајн маркера
Квадратни маркери имају суптилан визуелни дизајн који их чини уочљивим без преоптерећења слике. Можете прилагодити њихов изглед помоћу CSS-а ако желите другачији визуелни третман.
Маркери укључују hover стања која пружају повратну информацију када корисници помјере миш преко њих. На уређајима на додир, интеракција додира пружа тренутну повратну информацију отварањем прозора чата.
Синхронизација уживо
Real-Time Updates
Image Chat koristi WebSocket veze za sinhronizaciju svih razgovora u stvarnom 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.
How WebSocket Sync Works
Kada inicijalizujete Image Chat, widget uspostavlja WebSocket vezu sa FastComments serverima. Ova veza ostaje otvorena tokom trajanja korisničke sesije i sluša 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 označivač 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 označivač.
Broadcast ID System
Da bi se spriječili echo efekti gdje korisnici vide svoje vlastite akcije kako im se ponovo emituju, svako ažuriranje uključuje jedinstveni broadcastId. Kada korisnik kreira ili ažurira označivač, njihov klijent generiše UUID za tu operaciju. Kada WebSocket emituje ažuriranje nazad svim klijentima, izvornući klijent ignoriše ažuriranje jer se podudara sa njegovim broadcastId.
Ovo osigurava glatku interakciju gdje korisnici vide svoje promjene odmah u UI bez čekanja na povratni put preko servera, dok istovremeno svi ostali korisnici dobijaju ažuriranje.
Connection Resilience
Ako WebSocket veza padne zbog problema sa mrežom ili održavanja servera, widget automatski pokušava ponovo da se poveže. Tokom perioda ponovnog povezivanja, korisnici i dalje mogu da rade sa postojećim označivačima, ali neće vidjeti ažuriranja od drugih korisnika dok se veza ne uspostavi ponovo.
Kada se veza ponovo uspostavi, widget ponovo sinhronizuje kako bi osigurao da nijedno ažuriranje nije propušteno. Ovo se dešava transparentno bez potrebe za intervencijom korisnika.
Bandwidth Considerations
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 propusnog opsega. Sistem takođe uključuje inteligentno grupisanje poruka kako bi smanjio frekvenciju poruka tokom perioda visoke aktivnosti.
Vaše metrike upotrebe u FastComments nadzornoj ploči prate pubSubMessageCount i pubSubBandwidth tako da možete pratiti aktivnost real-time sinhronizacije na vašim sajtovima.
Cross-Tab Synchronization
Ako korisnik ima istu stranicu otvorenu u više tabova preglednika, ažuriranja u jednom tabu se pojavljuju odmah u ostalim tabovima. Ovo funkcioniše kroz isti WebSocket mehanizam sinhronizacije i ne zahtijeva dodatnu konfiguraciju.
Korisnici mogu imati vaš sajt otvoren na više uređaja istovremeno i svi će ostati sinhronizovani. Oznaka kreirana na desktop računaru 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 zakupca kako bi se osiguralo da korisnici dobijaju samo ažuriranja za konverzacije koje su ovlašteni vidjeti. Server validira sve operacije prije nego što ih emituje kako bi spriječio neovlašten pristup ili manipulaciju.
Offline Behavior
Kada su korisnici potpuno van mreže, i dalje mogu pregledavati postojeće označivače, ali ne mogu kreirati nove niti vidjeti ažuriranja od drugih. Widget detektuje offline stanje i prikazuje odgovarajuću poruku.
Ako korisnik pokuša kreirati označivač dok je offline, a zatim se vrati online, operacija će biti neuspješna umjesto da se stavlja u red, čime se osigurava konzistentnost podataka. Korisnici bi trebali ponoviti operaciju kada se veza obnovi.
Performance Impact
WebSocket veza ima minimalan uticaj na performanse. Veza ostaje u stanju mirovanja kada se ne dešavaju ažuriranja i obrađuje poruke samo kada ima aktivnosti. Na tipičnoj slici sa umjerenom aktivnošću označivača, WebSocket koristi manje CPU-a nego prikaz same slike.
Za stranice sa stotinama simultanih korisnika i velikom aktivnošću kreiranja označivača, sistem se horizontalno skaluje kako bi održao performanse bez uticaja na pojedinačne klijentske veze.
Collaborative Use Cases
Real-time sinhronizacija čini Image Chat posebno moćnim za kolaborativne tokove rada. Dizajnerski timovi mogu zajedno pregledavati mockup-e uz to da svi vide postavke označivača u stvarnom vremenu. Timovi korisničke podrške mogu zajednički anotirati screenshot-ove kako bi identificirali probleme. Edukativne grupe mogu diskutovati dijagrame uz to da svi učesnici vide označivače 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 референца
Pregled API-ja
Image Chat пружа три REST API крајње тачке за програмско управљање конверзацијама везаним за слике. Ове крајње тачке омогућавају да преузмете, креирате и бришете маркере без коришћења widget-а у прегледнику.
Све API крајње тачке захтевају аутентификацију и прате стандардне FastComments API обрасце. Ово су јавне крајње тачке које се аутентификују путем колачића у прегледнику, а не API кључева.
Основни URL
Све Image Chat API крајње тачке се налазе на:
https://fastcomments.com/comment-image-chatsАутентикација
Ове крајње тачке аутентификују кориснике путем колачића у прегледнику. Оне не користе API кључеве. Корисници морају бити пријављени на FastComments у свом прегледнику да би приступили овим крајњим тачкама.
Преузимање свих конверзација
Дohватите све конверзације везане за слику за одређену слику.
Крајња тачка
GET /comment-image-chats/:tenantId?urlId=<urlId>Параметри
tenantId (параметар пута, обавезно) је ваш FastComments Tenant ID.
urlId (параметар упита, обавезно) је идентификатор слике за коју желите да преузмете конверзације.
Одговор
Одговор садржи статус API-ја, информације о тренутној корисничкој сесији ако је аутентификована, низ конверзација са њиховим ID-јевима, URL-овима и X/Y координатама, очишћени идентификатор URL-а, ознаку која показује да ли је тренутни корисник администратор сајта или модератор, и детаље везе за WebSocket за синхронизацију уживо укључујући tenantIdWS, urlIdWS, и userIdWS.
Пример захтева
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Пример одговора
{
"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"
}Креирање конверзације
Креирајте нову конверзацију везану за слику за одређену позицију на слици.
Крајња тачка
POST /comment-image-chats/:tenantIdПараметри
tenantId (параметар пута, обавезно) је ваш FastComments Tenant ID.
Тело захтева мора бити JSON и садржати следећа обавезна поља.
urlId (string, обавезно) је основни идентификатор странице.
windowUrlId (string, обавезно) је URL комбинован са извором слике и координатама, на пример my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, обавезно) је наслов странице.
src (string, обавезно) је URL извора слике.
x (number, обавезно) је X координата као проценат (0-100).
y (number, обавезно) је Y координата као проценат (0-100).
createdFromCommentId (string, обавезно) је ID коментара који је иницирао овај разговор.
broadcastId (string, обавезно) је UUID за синхронизацију уживо како би се спречили ефекти одјека.
Одговор
Одговор садржи статус API-ја и ID новокреиране конверзације.
Пример захтева
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"
}'Пример одговора
{
"status": "success",
"createdChatId": "conv789"
}Брисање конверзације
Обришите постојећу конверзацију везану за слику. Ова крајња тачка захтева дозволе администратора или модератора, или конверзација мора бити креирана од стране аутентификованог корисника.
Крајња тачка
DELETE /comment-image-chats/:tenantId/:chatIdПараметри
tenantId (параметар пута, обавезно) је ваш FastComments Tenant ID.
chatId (параметар пута, обавезно) је ID конверзације која се брише.
broadcastId (тело захтева, обавезно) је UUID за синхронизацију уживо.
Пример захтева
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"
}'Пример одговора
{
"status": "success"
}Систем координата
X и Y координате се чувају као проценти димензија слике. X представља хоризонталну позицију од леве ивице (0 = лева ивица, 100 = десна ивица). Y представља вертикалну позицију од горње ивице (0 = горња ивица, 100 = доња ивица).
Ове процентуалне вредности могу садржати децимале за већу прецизност. На пример, x: 25.5 значи 25.5% од леве ивице слике.
Ограничење броја захтева
Ове крајње тачке су подложне стандардном ограничењу броја захтева FastComments API-ја. 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 у акцији.