FastComments Image Chat позволява интерактивни дискусии върху изображения, като дава възможност на потребителите да кликват навсякъде върху изображение, за да създадат точки за обсъждане. Потребителите могат да кликват върху конкретни части от изображенията, за да започнат разговори за тези области, създавайки визуални маркери, които показват къде се намират обсъжданията.
Тази функция е идеална за обратна връзка по дизайна, ревюта на продукти, образователни материали с диаграми, галерии със снимки с коментари и всеки сценарий, в който искате контекстуални дискусии, закрепени към конкретни места в изображението.
Първи стъпки 
Сценарии на използване
Image Chat е отличен за обратна връзка по дизайна, когато екипите трябва да обсъждат конкретни елементи в макети или екранни снимки. Сайтовете за продуктови ревюта могат да позволят на клиентите да обсъждат конкретни характеристики, видими в продуктовите снимки. Образователните платформи могат да го използват за обсъждане на диаграми, карти или научни изображения. Фотогалериите могат да станат интерактивни с коментари, свързани с конкретни места в изображението. Сайтовете за недвижими имоти могат да позволят на преглеждащите да обсъждат конкретни характеристики, видими в снимките на имоти.
Бърз старт
Стартирането с Image Chat е просто. Трябват ви скриптът FastComments Image Chat, елемент или контейнер с изображение и конфигурационен обект с вашия Tenant ID.
Инсталация
Добавете скрипта Image Chat към вашата страница:
Основна имплементация
Ето един минимален пример:
Run 
Заменете 'demo' с вашия реален FastComments Tenant ID, ако все още не е, който можете да намерите в вашия контролен панел на FastComments.
Как работи
След инициализация потребителите могат да кликнат навсякъде върху изображението. При клик на това място се появява визуален квадратен маркер и се отваря прозорец за чат. Другите потребители могат да видят всички маркери и да кликнат върху тях, за да разгледат или участват в тези дискусии. Всички дискусии се синхронизират в реално време за всички посетители.
Уиджетът използва позициониране на база проценти, така че маркерите остават на правилното място дори когато изображението се преоразмерява или се гледа на различни размери на екрана.
Демонстрация на живо
Можете да видите Image Chat в действие на нашата страница с демонстрация на живо.
Следващи стъпки
Сега, когато основите работят, можете да персонализирате външния вид и поведението в Ръководството за опции на конфигурацията. Разгледайте ръководството за адаптивен дизайн, за да разберете как работи позиционирането на база проценти. Научете за стилизирането и поддръжката на тъмен режим в ръководството за персонализиране. За напреднали интеграции разгледайте API Reference.
Фронтенд библиотеки
Всички frontend библиотеки на FastComments (react, vue, angular, etc) включват Image Chat.
Примери
Основен пример
Най-простият начин да използвате Image Chat е да насочите към един елемент изображение. Този пример показва как да активирате интерактивни дискусии върху изображение:
Run Пример с контейнерен елемент
Можете също да предадете контейнерен елемент, който съдържа изображение вътре в него:
Run Пример с персонализиран URL ID
По подразбиране Image Chat използва URL на страницата в комбинация с източника на изображението и координатите, за да идентифицира разговорите. Можете да зададете персонализиран urlId:
Run Това е полезно, ако структурата на вашите URL адреси се променя, но искате да запазите същите разговори, или ако искате да споделите едни и същи точки за обсъждане между няколко страници.
Пример с тъмен режим
Ако вашият сайт има тъмен фон и джаджата не го открива автоматично, както би трябвало, можем ръчно да активираме поддръжка за тъмен режим:
Run Пример с персонализиран размер на чат-квадрата
Можете да регулирате размера на кликващите квадрати, които се появяват върху изображението. Размерът се задава като процент от ширината на изображението:
Run Пример с callback за брой коментари
Проследявайте кога коментарите са добавени или обновени, използвайки commentCountUpdated callback:
Пример с няколко изображения
Можете да инициализирате Image Chat на няколко изображения. Всяко изображение ще има свои собствени независими точки за дискусия:
Run Опции за конфигуриране
Преглед
FastComments Image Chat разширява стандартната джаджа за коментари на FastComments, така че наследява всички опции за конфигуриране от базовата джаджа, като добавя няколко, специфични за анотации върху изображения.
Задължителна конфигурация
tenantId
Необходими е вашият FastComments Tenant ID. Можете да го намерите в FastComments dashboard.
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 // По-големи, по-видими маркери
});По-малките стойности създават по-малко натрапчиви маркери, които работят по-добре за детайлни изображения. По-големите стойности правят маркерите по-лесни за виждане и кликване при натоварени изображения или за потребители на мобилни устройства.
hasDarkBackground
Активирайте стилизиране в тъмен режим, когато вашата страница има тъмен фон.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Функция за обратно извикване (callback), която се изпълнява всеки път, когато броят коментари се промени. Това е полезно за обновяване на UI елементи като значки или заглавия на страницата.
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
Integrate with your authentication system using Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Конфигурация на SSO
}
});Вижте документацията за SSO за пълни подробности относно опциите за удостоверяване.
maxReplyDepth
Контролира колко нива дълбоко могат да бъдат отговорите. По подразбиране Image Chat задава това на 0, което означава, че всички коментари са плоски (без вложени отговори). Можете да промените това, ако искате нишки от разговори.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Позволява 3 нива на вложеност
});Вътрешна конфигурация
Тези опции се задават автоматично от 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> директно, или контейнерен елемент с изображение вътре:
// Директен елемент на изображението
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
});For a complete list of all available configuration options inherited from the base widget, see the main FastComments configuration documentation.
Адаптивен дизайн
Позициониране, базирано на проценти
Image Chat използва координати, базирани на проценти, вместо пикселни координати за позициониране на маркери в изображенията. Когато потребител кликне върху изображение, widget-ът преобразува пикселните координати на клика в проценти от ширината и височината на изображението. Този подход гарантира, че маркерите остават на правилното място независимо от начина, по който изображението се показва.
Например, ако потребителят кликне на 250 пиксела от левия ръб на изображение с ширина 1000px, widget-ът съхранява това като 25% отляво. Когато друг потребител види същото изображение с ширина 500px на мобилно устройство, маркерът се появява на 125 пиксела отляво, което все още е 25% от ширината.
Предимства за адаптивни оформления
Тази процентна система прави Image Chat безпроблемно работещ на всички размери и ориентации на устройства. Вашите изображения може да се показват с различни размери в зависимост от ширината на екрана, CSS правилата или ограниченията на контейнера, но маркерите винаги се подравняват правилно с предвидените местоположения.
Потребителите на настолни компютри с големи монитори виждат маркерите в същите относителни позиции като потребителите на смартфони с малки екрани. Маркерите се оразмеряват пропорционално на самото изображение.
Оразмеряване на изображението и съотношение на страните
Докато изображението ви запазва своето съотношение на страните при мащабиране (което е подразбиращото се поведение на браузъра), процентните маркери ще останат перфектно подравнени. Widget-ът предполага, че изображенията се мащабират пропорционално и изчислява позициите въз основа на това предположение.
Ако приложите CSS, което деформира съотношението на страните на изображението (например при използване на object-fit: cover със специфични размери), позициите на маркерите може да не се подравнят правилно. За най-добри резултати, позволявайте на изображенията да се мащабират естествено или използвайте object-fit: contain, за да запазите съотношението на страните.
Размер на чат квадратите
Визуалният размер на маркерите за чат също е базиран на проценти. Опцията за конфигурация chatSquarePercentage по подразбиране е 5%, което означава, че всяко квадратно поле е 5% от ширината на изображението. Това гарантира последователно визуално тегло при различни размери на изображенията.
На изображение с ширина 1000px с настройка по подразбиране 5%, маркерите са 50px квадратни. На изображение с ширина 500px същите маркери са 25px квадратни. Те остават пропорционални на размера на изображението.
Поведение на мобилни устройства
На екрани с ширина под 768px, Image Chat преминава към оформление, оптимизирано за мобилни устройства. Чат прозорците се отварят на цял екран вместо да плават до маркера. Това осигурява по-добра използваемост на малки екрани, където плаващите прозорци биха закрили твърде голяма част от изображението.
Самите маркери остават видими и кликваеми на своите позиции, базирани на проценти. Потребителите все още могат да видят къде се намират всички дискусии и да докоснат маркери, за да отворят интерфейса за чат на цял екран.
Динамично зареждане на изображения
Процентната система работи правилно дори когато изображенията се зареждат асинхронно или променят размера си след зареждането на страницата. Widget-ът наблюдава елемента изображение и преизчислява позициите на маркерите всеки път, когато размерите на изображението се променят.
Ако използвате lazy-loading на изображения или прилагате адаптивни изображения с различни размери при различни breakpoint-и, маркерите автоматично се нагласяват, когато размерът на изображението се промени.
Консистентност между устройства
Понеже координатите се съхраняват като проценти в базата данни, дискусия, създадена на настолен компютър, се появява на точно същото относително място, когато бъде преглеждана на таблет или телефон. Потребителите могат да си сътрудничат между устройства без несъответствия в позиционирането.
Това работи в двете посоки. Дискусия, създадена чрез докосване на конкретно място на мобилно устройство, се появява на същото относително място при преглед на голям настолен монитор.
Съображения за изгледа (viewport)
Widget-ът изчислява процентите спрямо самия елемент изображение, а не спрямо viewport-а. Това означава, че превъртането на страницата или промяната на размера на прозореца на браузъра не влияят на позициите на маркерите. Маркерите остават закрепени към местата си върху изображението независимо от промените в изгледа.
Осигуряване на бъдеща съвместимост на съдържанието
Подходът, базиран на проценти, прави вашите дискусии върху изображения устойчиви на промени в оформлението, дизайна или екосистемата от устройства. С появата на нови размери екрани и устройства, съществуващите дискусии ще продължат да се показват правилно без необходимост от обновления или миграции.
Персонализиране
Поддръжка на тъмен режим
Image Chat включва вградена поддръжка на тъмен режим. Когато зададете hasDarkBackground: true във вашата конфигурация, чат прозорците и елементите на потребителския интерфейс автоматично се адаптират, за да работят добре върху тъмни фонове.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Стилизирането за тъмен режим се прилага към чат прозорците, маркиращите квадратчета и всички интерактивни елементи. Ако вашият сайт има превключвател за тъмен режим, можете да презаредите (reinitialize) уиджета при смяна на режима или да използвате подхода с клас на body, описан по-долу.
Динамичен тъмен режим
Ако тъмният режим на вашия сайт се контролира чрез добавяне на .dark клас към елемента body, потребителският интерфейс на Image Chat автоматично ще го уважава, без да е необходимо повторно инициализиране. Стиловете на уиджета са проектирани да реагират на наличието на този клас.
/* Вашият 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 стрелка, сочеща към маркера. Прозорците се позиционират автоматично в зависимост от наличното пространство във viewport-а, използвайки позициониращи класове като to-right, to-left, to-top и to-bottom.
Можете да добавите персонализиран CSS, за да коригирате цветовете, шрифтовете, разстоянията или други визуални свойства на тези прозорци. Чат прозорците използват същата компонентна структура като стандартния уиджет на FastComments, така че наследяват всички глобални персонализации, които сте приложили.
Отложено инициализиране
Чат прозорците се инициализират при задържане на мишката (hover) за потребители на настолни компютри или незабавно при създаване. Това намалява началното натоварване, като рендерира интерфейса за чат само когато потребителите реално взаимодействат с маркер.
Отложеното инициализиране се случва прозрачно. Потребителите не усещат забавяне, но браузърът не трябва да рендерира десетки скрити чат прозорци, ако имате много маркери върху изображение.
Локализация
Image Chat поддържа същите опции за локализация като стандартния уиджет на FastComments. Задайте опцията locale, за да показвате текстовете на потребителския интерфейс на различни езици:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Френски
});FastComments поддържа десетки езици. Настройката на locale влияе на всички текстове в интерфейса, включително подсказки, бутони и текстовете на placeholder полетата.
Наследени опции за персонализиране
Тъй като Image Chat разширява стандартния уиджет за коментари, той наследява всички опции за персонализиране от базовия уиджет. Това включва персонализирани CSS класове, персонализирани преводи, персонализиране на аватари, форматиране на дати и много други.
Вижте основната документация за персонализиране на FastComments за пълен списък на наличните опции за персонализиране.
Работа с потребителски шрифтове
Ако вашият сайт използва потребителски шрифтове, потребителският интерфейс на Image Chat ще наследи тези шрифтове от CSS-а на вашата страница. Чат прозорците се рендерират в DOM-а на страницата и уважават вашите съществуващи настройки за типография.
За най-добри резултати се уверете, че вашите потребителски шрифтове са заредени преди инициализирането на Image Chat, или приемете, че може да има кратко мигане със неформатиран текст, докато шрифтовете се зареждат.
Визуален дизайн на маркерите
Квадратните маркери имат деликатен визуален дизайн, който ги прави забележими, без да натоварват изображението. Можете да персонализирате тяхната визия с CSS, ако желаете различно визуално оформление.
Маркерите включват hover състояния, които дават обратна връзка, когато потребителите преместят мишката върху тях. На тъч устройства, взаимодействието чрез докосване дава незабавна обратна връзка чрез отваряне на прозореца за чат.
Синхронизация в реално време
Актуализации в реално време
Image Chat използва WebSocket връзки за синхронизиране на всички разговори в реално време между всички свързани потребители. Когато някой създаде нов маркер, добави коментар или изтрие обсъждане, всички останали потребители, които гледат същото изображение, виждат обновлението незабавно без презареждане.
Как работи синхронизацията чрез WebSocket
Когато инициализирате Image Chat, widget-ът установява WebSocket връзка със сървърите на FastComments. Тази връзка остава отворена за продължителността на сесията на потребителя и слуша за обновления, свързани с настоящото изображение.
WebSocket системата използва три вида broadcast съобщения за Image Chat. Събитието new-image-chat се задейства, когато някой създаде нов маркер върху изображението. Събитието image-chat-updated се задейства, когато някой обнови съществуващ разговор. Събитието deleted-image-chat се задейства, когато някой изтрие маркер.
Система за Broadcast ID
За да се предотврати ефект на ехо, при който потребителите виждат своите собствени действия върнати обратно към тях, всяко обновление включва уникален broadcastId. Когато потребител създава или обновява маркер, неговият клиент генерира UUID за тази операция. Когато WebSocket излъчи обновлението обратно към всички клиенти, произходният клиент игнорира обновлението, защото то съвпада с неговия собствен broadcastId.
Това гарантира плавно взаимодействие, при което потребителите виждат промените си незабавно в интерфейса без да чакат пътуването до сървъра и обратно, като същевременно всички останали потребители получават обновлението.
Устойчивост на връзката
Ако WebSocket връзката прекъсне поради мрежови проблеми или поддръжка на сървъра, widget-ът автоматично опитва да се свърже отново. По време на периода на повторно свързване потребителите все още могат да взаимодействат със съществуващите маркери, но няма да виждат актуализации в реално време от други потребители, докато връзката не бъде възстановена.
След възстановяване на връзката widget-ът се синхронизира повторно, за да гарантира, че не са пропуснати обновления. Това се случва прозрачно, без да се изисква намеса от страна на потребителя.
Съображения относно честотната лента
WebSocket съобщенията са леки и съдържат само необходимата информация за синхронизиране на състоянието. Създаването на нов маркер обикновено използва по-малко от 1KB честотна лента. Системата включва и интелигентно пакетиране, за да намали честотата на съобщенията по време на периоди с висока активност.
Метриките за използване в таблото на FastComments проследяват pubSubMessageCount и pubSubBandwidth, така че да можете да наблюдавате активността на синхронизацията в реално време по вашите сайтове.
Синхронизация между раздели
Ако потребителят има една и съща страница отворена в няколко раздела на браузъра, обновленията в един раздел се появяват незабавно и в другите раздели. Това работи чрез същия механизъм за WebSocket синхронизация и не изисква допълнителна конфигурация.
Потребителите могат да имат вашия сайт отворен на няколко устройства едновременно и всички те ще останат синхронизирани. Маркер, създаден на настолен компютър, се появява незабавно на таблета на потребителя, ако и двете устройства разглеждат едно и също изображение.
Сигурност
WebSocket съобщенията се предават по защитени връзки (WSS) и включват проверка на наемателя, за да се гарантира, че потребителите получават само обновления за разговори, които имат право да виждат. Сървърът валидира всички операции преди да ги излъчи, за да предотврати неоторизиран достъп или манипулация.
Поведение при офлайн режим
Когато потребителите са напълно офлайн, те все още могат да виждат съществуващите маркери, но не могат да създават нови или да виждат обновления от други. Widget-ът открива офлайн състоянието и показва подходящо съобщение.
Ако потребител се опита да създаде маркер докато е офлайн и след това се върне онлайн, операцията ще се провали вместо да бъде поставена в опашка, гарантирайки консистентност на данните. Потребителите трябва да опитат отново операцията, след като връзката им бъде възстановена.
Влияние върху производителността
WebSocket връзката има минимално въздействие върху производителността. Връзката остава неактивна, когато няма обновления, и обработва съобщения само при възникване на активност. При типично изображение със средна активност на маркерите, WebSocket използва по-малко CPU, отколкото самото изобразяване на изображението.
За страници със стотици едновременно потребители и висока активност по създаване на маркери, системата се мащабира хоризонтално, за да поддържа производителността без да влияе на отделните клиентски връзки.
Сценарии за съвместна работа
Синхронизацията в реално време прави Image Chat особено мощен за съвместни работни процеси. Дизайн екипи могат да преглеждат макети заедно, като всички виждат позициите на маркерите в реално време. Екипи за поддръжка на клиенти могат съвместно да анотират скрийншотове, за да идентифицират проблеми. Образователни групи могат да обсъждат диаграми, като всички участници виждат маркерите на другите в момента на тяхното създаване.
Незабавната обратна връзка създава по-ангажиращо и продуктивно съвместно изживяване в сравнение с традиционните системи за коментари, където потребителите трябва да презареждат, за да видят обновления.
Справочник за API
Преглед на API
Чат за изображения (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 (параметър в пътя, задължителен) е вашият FastComments Tenant ID.
urlId (query параметър, задължителен) е идентификаторът на изображението, за което искате да извлечете разговорите.
Отговор
Отговорът включва статуса на 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 (параметър в пътя, задължителен) е вашият 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 в действие.