FastComments Image Chat омогућава интерактивне дискусије на сликама тако што корисницима дозвољава да кликну било где на слици да би створили тачке дискусије. Корисници могу да кликну на одређене делове слика да започну разговоре о тим областима, стварајући визуелне маркере који показују где се налазе дискусије.
Ова функција је идеална за повратне информације о дизајну, рецензије производа, наставни материјал са дијаграмима, фото-галерије са коментарима и било који сценарио у којем желите контекстуалне дискусије везане за одређене локације на слици.
Почетак 
Случајеви употребе
Image Chat одлично функционише за повратне информације о дизајну када тимови треба да дискутују о одређеним елементима у макетама или снимцима екрана. Сајтови за рецензије производа могу омогућити купцима да дискутују о одређеним функцијама видљивим на фотографијама производа. Образовне платформе могу да га користе за дискутовање о дијаграмима, картама или научним сликама. Фотогалерије могу постати интерактивне са коментарима везаним за одређене локације. Сајтови за некретнине могу омогућити посетиоцима да дискутују о одређеним карактеристикама видљивим на фотографијама некретнина.
Брзи почетак
Почетак рада са Image Chat-ом је једноставан. Потребни су вам FastComments Image Chat скрипта, елемент слике или контејнер са сликом, и конфигурациони објекат са вашим Tenant ID-јем.
Инсталација
Додајте Image Chat скрипту на вашу страницу:
Основна имплементација
Ево минималног примера:
Run 
Замените 'demo' својим стварним FastComments Tenant ID-јем ако то већ нисте урадили — можете га пронаћи на контролној табли FastComments.
Како то ради
Када се иницијализује, корисници могу кликнути било где по слици. Када дође до клика, на тој локацији се појављује визуелна квадратна ознака и отвара се чат прозор. Остали корисници могу видети све ознаке и кликнути на њих да би видели или учествовали у тим расправама. Све расправе се синхронизују у реалном времену за све посетиоце.
Видгет користи позиционирање засновано на процентима, тако да ознаке остају на исправној локацији чак и када се слика мења величином или се прегледа на различитим величинама екрана.
Жива демонстрација
Можете видети Image Chat у акцији на нашој страници са живом демонстрацијом.
Следећи кораци
Сада када имате основно функционисање, можете прилагодити изглед и понашање у водичу за опције конфигурације. Погледајте водич о респонзивном дизајну да бисте разумели како ради позиционирање засновано на процентима. Сазнајте о стилизовању и подршци за тамни режим у водичу за прилагођавање. За напредне интеграције, истражите API референцу.
Фронтенд библиотеке
Све FastComments фронтенд библиотеке (react, vue, angular, итд.) имају Image Chat.
Примери
Osnovni primer
Najjednostavniji način korišćenja Image Chat-a je ciljanje jednog elementa slike. Ovaj primer pokazuje kako omogućiti interaktivne diskusije na slici:
Run Primer sa elementom kontejnera
Takođe možete proslediti element kontejnera koji sadrži sliku:
Run Primer sa prilagođenim URL ID-jem
Po defaultu, Image Chat koristi URL stranice kombinovan sa izvorom slike i koordinatama kako bi identifikovao razgovore. 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 detektuje 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 callback-om za broj komentara
Pratite kada se komentari dodaju ili ažuriraju koristeći callback commentCountUpdated:
Primer sa više slika
Možete inicijalizovati Image Chat na više slika. Svaka slika će imati svoje nezavisne tačke diskusije:
Run Опције конфигурације
Преглед
FastComments Image Chat проширује стандардни FastComments видгет за коментаре, тако да наследи све опције конфигурације из основног видгета уз додавање неколико специфичних за анотације слика.
Потребна конфигурација
tenantId
Вам је потребан ваш FastComments Tenant ID. Можете га пронаћи у вашем FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Опције специфичне за Image Chat
urlId
По подразумевaњу, Image Chat генерише јединствeни идентификатор за сваки разговор на основу 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 правила или ограничења контејнера, али маркери ће увек бити правилно усклађени са предвиђеним локацијама.
Корисници на десктоп рачунарима са великим мониторима виде маркере у истим релативним положајима као и корисници на паметним телефонима са малим екранима. Маркери се пропорционално скалирају заједно са самом сликом.
Скалирање слике и аспектни однос
Док год ваша слика задржава однос ширине и висине приликом скалирања (што је подразумевано понашање прегледача), маркери засновани на процентима ће остати савршено усклађени. Виџет претпоставља да се слике скалирају пропорционално и израчунава позиције на основу те претпоставке.
Ако примените CSS који деформише аспектни однос слике (на пример коришћењем object-fit: cover са специфичним димензијама), позиције маркера можда неће бити правилно усклађене. За најбоље резултате, дозволите сликама да се природно скалирају или користите object-fit: contain да бисте одржали аспектни однос.
Величина квадрата маркера
Визуелна величина маркера за разговор такође је заснована на процентима. Опција конфигурације chatSquarePercentage је по подразумеваном 5%, што значи да је сваки квадрат 5% ширине слике. Ово обезбеђује конзистентну визуелну тежину на различитим величинама слика.
На слици ширине 1000px са подразумеваном вредношћу 5%, маркери су квадратни и имају 50px. На слици ширине 500px, исти маркери су квадратни и имају 25px. Они остају пропорционални величини слике.
Понашање на мобилним уређајима
На екранима ширине мање од 768px, Image Chat прелази у мобилно оптимизован распоред. Прозори за разговор се отварају преко целог екрана уместо да леже поред маркера. Ово пружа бољу употребљивост на малим екранима где би плавајући прозори прекрили превише слике.
Сами маркери остају видљиви и кликабилни на својим процентуалним позицијама. Корисници и даље могу видети где су све дискусије и додирнути маркере да би отворили интерфејс за разговор преко целог екрана.
Динамичко учитавање слика
Процентуални систем ради исправно чак и када се слике учитавају асинхроно или мењају величину након учитавања странице. Виџет прати елемент слике и пресликава позиције маркера кад год се димензије слике промене.
Ако користите одложено учитавање (lazy-loading) слика или имплементирате адаптивне слике са различитим величинама на различитим тачкама прелома, маркери се аутоматски прилагођавају када се величина слике промени.
Конзистентност између уређаја
Пошто се координате чувају као проценти у бази података, дискусија створена на десктоп рачунару појављује се на истој релативној локацији када се гледа на таблету или телефону. Корисници могу сарађивати преко уређаја без неусклађености позиционирања.
Ово функционише двосмерно. Дискусија створена додиром на одређену тачку на мобилном уређају појавиће се на истом релативном месту када се прегледа на великом десктоп монитору.
Разматрања везана за viewport
Виџет израчунава проценте у односу на сам елемент слике, а не у односу на viewport. То значи да скроловање странице или мењање величине прозора прегледача не утиче на позиције маркера. Маркери остају причвршћени за своје локације на слици без обзира на промене viewport-а.
Припрема садржаја за будућност
Процентуални приступ чини ваше дискусије о сликама отпорним на измене распореда, дизајна или екосистема уређаја. Како се појављују нове величине екрана и уређаји, постојеће дискусије ће наставити да се исправно приказују без потребе за било каквим ажурирањима или миграцијама.
Прилагођавање
Подршка за тамни режим
Image Chat укључује уграђену подршку за тамни режим. Када у конфигурацији подесите hasDarkBackground: true, прозори четова и UI елементи се аутоматски прилагођавају да добро функционишу на тамним позадинама.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Стилови за тамни режим примењују се на прозоре четова, квадратиће маркера и све интерактивне елементе. Ако ваш сајт има прекидач за тамни режим, можете поново инициализовати видгет када се режим промени, или користити приступ са класом body описан у наставку.
Динамички тамни режим
Ако се тамни режим вашег сајта контролише додавањем класе .dark на body елемент, Image Chat UI ће аутоматски поштовати то без потребе за поновном инициализацијом. Стилови видгета су дизајнирани да реагују на присуство ове класе.
/* Ваш CSS за тамни режим */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Прилагођено стилизовање помоћу CSS-а
Можете прилагодити изглед маркера, прозора четова и других елемената користећи CSS. Видгет додаје специфичне класе које можете циљати у вашем стилском листу.
Квадратићи и прозори четова користе систем стилизације коментарских балона FastComments, тако да ће све прилагођавања која сте применили на стандардни коментарски видгет такође утицати на Image Chat.
Величина квадратића за чет
Опција chatSquarePercentage контролише величину кликабилних маркера. Подразумевана вредност је 5% ширине слике:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Већи, видљивији квадрати
});Мање вредности стварају суптилније маркере који се боље уклапају у слику. Веће вредности чине маркере приметнијим и лакшим за кликање, посебно на мобилним уређајима или у сврху приступачности.
Понашање на мобилним уређајима
На екранима ширине мањој од 768px, Image Chat аутоматски прелази на изглед прилагођен мобилним уређајима. Прозори четова се појављују у пуном екрану уместо да плутају поред маркера, пружајући бољу употребљивост на мањим екранима.
Маркер остају видљиви на својим респонзивним позицијама на слици. Корисници могу додирнути било који маркер да отворе интерфејс за чет у пуном екрану. Ово понашање је уграђено и не захтева конфигурацију.
Изглед прозора за чет
Прозори четова су ширине 300px на десктоп уређајима са стрелицом од 16px усмереном ка маркеру. Прозори се позиционирају аутоматски на основу доступног простора у приказу, користећи позиционирајуће класе као што су to-right, to-left, to-top, и to-bottom.
Можете додати прилагођени CSS да бисте прилагодили боје, фонтове, размаке или друге визуелне особине ових прозора. Прозори четова користе исту компонентну структуру као стандардни FastComments видгет, тако да наслеђују сва глобална прилагођавања која сте применили.
Лења иницијализација
Прозори четова се иницијализују при прелазу мишем за кориснике на десктопу или одмах када се креишу. Ово смањује почетни трошак учитавања тако што рендерује интерфејс за чет само када корисник заиста интерагује са маркером.
Лења иницијализација се дешава транспарентно. Корисници не примећују кашњење, али претраживач не мора да рендерује десетине скривених прозора четова ако имате много маркера на слици.
Локализација
Image Chat подржава све исте опције локализације као стандардни FastComments видгет. Поставите опцију locale да бисте приказали UI текст на различитим језицима:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Француски
});FastComments подржава десетине језика. Поставка locale утиче на сав UI текст укључујући упутства, дугмад и текст места за унос.
Наслеђене опције прилагођавања
Пошто Image Chat проширује стандардни коментарски видгет, он наслеђује све опције прилагођавања из основног видгета. Ово укључује прилагођене CSS класе, прилагођене преводе, прилагођавање аватара, форматирање датума и још много тога.
Погледајте главну FastComments документацију о прилагођавању за комплетну листу опција прилагођавања које су вам доступне.
Рад са прилагођеним фонтовима
Ако ваш сајт користи прилагођене фонтове, Image Chat UI ће наследити те фонтoве из CSS-а ваше странице. Прозори четова рендерују се унутар DOM-а ваше странице и поштују ваше постојеће типографске поставке.
За најбоље резултате, обезбедите да се прилагођени фонтови учитају пре инициализације Image Chat-а, или прихватите да може доћи до кратког трептаја нестилизираног текста док се фонтови учитавају.
Визуелни дизајн маркера
Квадратни маркери имају суптилан визуелни дизајн који их чини приметним без преоптерећења слике. Можете прилагодити њихов изглед помоћу CSS-а ако желите другачији визуелни третман.
Маркер имају стања при прелазу курсором која пружају повратну информацију када корисници помере миш преко њих. На уређајима осетљивим на додир, интеракција додиром пружа тренутну повратну информацију отварањем прозора за чет.
Синхронизација у реалном времену
Ажурирања у реалном времену
Image Chat користи WebSocket везе за синхронизацију свих разговора у реалном времену међу свим повезаним корисницима. Када неко креира нови маркер, дода коментар или обрише дискусију, сви остали корисници који гледају исту слику виде ажурирање одмах без освежавања.
Како функционише WebSocket синхронизација
Када иницијализујете Image Chat, видгет успоставља WebSocket везу са FastComments серверима. Та веза остаје отворена током трајања сесије корисника и слуша ажурирања везана за текућу слику.
WebSocket систем користи три типа broadcast порука за Image Chat. Догађај new-image-chat се покреће када неко креира нови маркер на слици. Догађај image-chat-updated се покреће када неко ажурира постојећи разговор. Догађај deleted-image-chat се покреће када неко обрише маркер.
Систем Broadcast ID
Да би се спречили ефекти одјека где корисници виде своје акције како им се шаљу назад, свако ажурирање садржи јединствени broadcastId. Када корисник креира или ажурира маркер, његов клијент генерише UUID за ту операцију. Када WebSocket емитује ажурирање назад свим клијентима, оригинални клијент игнорише то ажурирање јер се поклапа са његовим broadcastId.
Ово обезбеђује глатку интеракцију у којој корисници виде своје измене одмах у UI без чекања путања тамо-натраг преко сервера, уз истовремено обезбеђивање да сви остали корисници добију ажурирање.
Отпорност везе
Ако WebSocket веза падне због мрежних проблема или одржавања сервера, видгет аутоматски покушава поновно повезивање. Током периода поновног повезивања, корисници и даље могу да интерактују са постојећим маркерима, али неће видети ажурирања у реалном времену од других корисника све док веза не буде поново успостављена.
Када је веза поново успостављена, видгет поново синхронизује да би се осигурало да нису пропуштена ажурирања. То се дешава транспарентно без потребе за интервенцијом корисника.
Разматрања о пропусном опсегу
WebSocket поруке су лаки и садрже само основне информације потребне за синхронизацију стања. Креирање новог маркера обично користи мање од 1KB пропусног опсега. Систем такође укључује интелигентно груписање (batching) како би смањио фреквенцију порука током периода велике активности.
Ваше метрике коришћења у FastComments контролној табли прате pubSubMessageCount и pubSubBandwidth тако да можете пратити активност синхронизације у реалном времену на вашим сајтовима.
Синхронизација између табова
Ако корисник има исту страницу отворену у више прегледачких табова, ажурирања у једном табу појављују се одмах у осталим табовима. Ово ради кроз исти WebSocket механизам синхронизације и не захтева додатну конфигурацију.
Корисници могу имати ваш сајт отворен на више уређаја истовремено, и сви ће остати синхронизовани. Маркер креиран на десктоп рачунару појављује се одмах на корисниковом таблету ако оба уређаја гледају исту слику.
Безбедност
WebSocket поруке се преносе преко сигурних веза (WSS) и садрже валидацију тенанта како би се осигурало да корисници примају само ажурирања за разговоре које су овлашћени да виде. Сервер валида све операције пре него што их емитује како би спречио неовлашћен приступ или манипулацију.
Понашање у офлајну режиму
Када су корисници потпуно ван мреже, и даље могу да прегледају постојеће маркере, али не могу да креирају нове или виде ажурирања од других. Видгет детектује офлајн стање и приказује одговарајуће поруке.
Ако корисник покуша да креира маркер док је офлајн, а затим се врати на мрежу, операција ће пропасти уместо да се стави у ред, чиме се обезбеђује конзистентност података. Корисници би требало поново да покушају операцију када им се веза обнови.
Утицај на перформансе
WebSocket веза има минималан утицај на перформансе. Веза остаје неактивна када нема ажурирања и обрађује поруке само када дође до активности. На типичној слици са умереном активношћу маркера, WebSocket користи мање CPU него само рендеровање слике.
За странице са стотинама истовремених корисника и високом активношћу креирања маркера, систем се хоризонтално скалира да одржи перформансе без утицаја на појединачне клијентске везе.
Сценарији за колаборативно коришћење
Синхронизација у реалном времену чини Image Chat посебно моћним за колаборативне токове рада. Дизајн тимови могу заједно прегледати макете, где сви виде постављање маркера у реалном времену. Тимови корисничке подршке могу заједно означавати снимке екрана да би идентификовали проблеме. Едукативне групе могу дискутовати о дијаграмима при чему сви учесници виде маркере једни других како се креирају.
Одмах повратна информација ствара занимљивије и продуктивније колаборативно искуство у поређењу са традиционалним системима коментара где корисници морају да освежe страницу да би видели ажурирања.
API референца
API Pregled
Image Chat пружа три REST API крајње тачке за управљање разговорима о сликама програмски. Ове крајње тачке омогућавају преузимање, креирање и брисање маркера без коришћења widget-а у прегледачу.
Све API крајње тачке захтевају аутентификацију и прате стандардне FastComments API образце. Ово су јавне крајње тачке које аутентификују преко колачића у прегледачу, а не помоћу API кључева.
Основни URL
Све Image Chat API крајње тачке су под:
https://fastcomments.com/comment-image-chatsАутентификација
Ове крајње тачке аутентификују кориснике преко колачића у прегледачу. Оне не користе API кључеве. Корисници морају бити пријављени у FastComments у свом прегледачу да би приступили овим крајњим тачкама.
Преглед свих разговора
Преузмите све разговоре о слици за одређену слику.
Крајња тачка
GET /comment-image-chats/:tenantId?urlId=<urlId>Параметри
tenantId (path parameter, required) је ваш FastComments Tenant ID.
urlId (query parameter, required) је идентификатор слике за коју желите да преузмете разговоре.
Одговор
Одговор садржи статус API-ја, информације о тренутној сесији корисника ако је аутентификован, низ разговора са њиховим ИД-овима, 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 (path parameter, required) је ваш FastComments Tenant ID.
Тело захтева мора бити у JSON формату и садржати следећа обавезна поља.
urlId (string, required) је основни идентификатор странице.
windowUrlId (string, required) је URL у комбинaciji са извором слике и координатама, на пример 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 за синхронизацију уживо како би се спречили ефекти одјечавања (echo).
Одговор
Одговор садржи статус 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 (path parameter, required) је ваш FastComments Tenant ID.
chatId (path parameter, required) је ID разговора који треба обрисати.
broadcastId (request body, required) је 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 ограничењу броја захтева (rate limiting). Middleware за ограничење примењује се по tenant-у да би се спречила злоупотреба док се дозвољава нормалан образац коришћења.
Одговори са грешком
Све крајње тачке враћају стандардне HTTP статус кодове. Одговор 400 означава неважеће параметре захтева. Одговор 401 значи да аутентификација није успела. Одговор 403 указује на недостатак дозвола. Одговор 404 значи да разговор није пронађен. Одговор 429 означава да је прекорачен лимит захтева.
Одговори са грешком укључују JSON тело са детаљима:
{
"status": "error",
"message": "Conversation not found"
}Праћење употребе
Креирање разговора повећава вашу метрику употребе conversationCreateCount. Сва WebSocket sync активност повећава pubSubMessageCount и pubSubBandwidth. Ове метрике можете пратити на вашем FastComments контролној табли у делу за аналитику употребе.
Имате питања?
То је то за FastComments Image Chat! Ако имате било каква питања, треба вам помоћ са имплементацијом или имате предлоге за функције, молимо вас да нам јавите у наставку или се обратите нашем тиму за подршку.
Погледајте демо уживо на нашој страници са демо приказом да видите Image Chat у акцији.