FastComments Image Chat maakt interactieve discussies over afbeeldingen mogelijk door gebruikers toe te staan overal op een afbeelding te klikken om discussiepunten aan te maken. Gebruikers kunnen op specifieke delen van afbeeldingen klikken om gesprekken over die gebieden te starten, waardoor visuele markeringen worden gemaakt die laten zien waar discussies zich bevinden.
Deze functie is perfect voor ontwerpfeedback, productbeoordelingen, educatief materiaal met diagrammen, fotogalerijen met commentaar, en elke situatie waarin je contextuele discussies wilt die verankerd zijn aan specifieke locaties op afbeeldingen.
Aan de slag 
Gebruiksscenario's
Image Chat is ideaal voor designfeedback waarbij teams specifieke elementen in mockups of schermafbeeldingen moeten bespreken. Productreviewsites kunnen klanten laten discussiëren over specifieke functies die zichtbaar zijn op productfoto's. Educatieve platforms kunnen het gebruiken om diagrammen, kaarten of wetenschappelijke afbeeldingen te bespreken. Fotogalerijen kunnen interactief worden met locatie-specifieke opmerkingen. Vastgoedsites kunnen kijkers laten praten over specifieke kenmerken die zichtbaar zijn op woningfoto's.
Snel aan de slag
Aan de slag gaan met Image Chat is eenvoudig. Je hebt het FastComments Image Chat-script, een image-element of container met een afbeelding, en een configuratieobject met je Tenant ID nodig.
Installatie
Voeg het Image Chat-script toe aan je pagina:
Basisimplementatie
Hier is een minimaal voorbeeld:
Run 
Vervang 'demo' door je daadwerkelijke FastComments Tenant ID als dat nog niet het geval is; die vind je in je FastComments dashboard.
Hoe het werkt
Zodra het geïnitialiseerd is, kunnen gebruikers overal op de afbeelding klikken. Wanneer er geklikt wordt, verschijnt er op die locatie een visuele vierkante markering en wordt er een chatvenster geopend. Andere gebruikers kunnen alle markeringen zien en erop klikken om die discussies te bekijken of eraan deel te nemen. Alle discussies worden in realtime gesynchroniseerd voor alle bezoekers.
De widget gebruikt positionering op basis van percentages, zodat markeringen op de juiste plaats blijven, zelfs wanneer de afbeelding van formaat verandert of op verschillende schermformaten wordt bekeken.
Live-demo
Je kunt Image Chat in actie zien op onze live demo page.
Volgende stappen
Nu de basis werkt, kun je het uiterlijk en gedrag aanpassen in de gids Configuratie-opties. Bekijk de gids Responsief ontwerp om te begrijpen hoe positionering op basis van percentages werkt. Lees over styling en ondersteuning voor donkere modus in de gids Aanpassing. Voor geavanceerde integraties, bekijk de API-referentie.
Frontend-bibliotheken
Alle FastComments-frontendbibliotheken (react, vue, angular, etc) bevatten Image Chat.
Voorbeelden
Basisvoorbeeld
De eenvoudigste manier om Image Chat te gebruiken is door één afbeeldingelement te selecteren. Dit voorbeeld toont hoe je interactieve discussies op een afbeelding inschakelt:
Run Voorbeeld met container-element
Je kunt ook een containerelement doorgeven dat een afbeelding bevat:
Run Voorbeeld met aangepaste URL-ID
Standaard gebruikt Image Chat de pagina-URL gecombineerd met de afbeeldingsbron en coördinaten om gesprekken te identificeren. Je kunt een aangepaste urlId opgeven:
Run Dit is handig als je URL-structuur verandert maar je dezelfde gesprekken wilt behouden, of als je dezelfde discussiepunten over meerdere pagina's wilt delen.
Voorbeeld met donkere modus
Als je site een donkere achtergrond heeft en de widget deze niet automatisch detecteert zoals zou moeten, kun je handmatig ondersteuning voor de donkere modus inschakelen:
Run Voorbeeld met aangepaste vierkantsgrootte
Je kunt de grootte aanpassen van de klikbare vierkantjes die op de afbeelding verschijnen. De grootte wordt opgegeven als een percentage van de afbeeldingsbreedte:
Run Voorbeeld met callback voor aantal reacties
Houd bij wanneer reacties worden toegevoegd of bijgewerkt met de commentCountUpdated callback:
Voorbeeld met meerdere afbeeldingen
Je kunt Image Chat op meerdere afbeeldingen initialiseren. Elke afbeelding krijgt zijn eigen onafhankelijke discussiepunten:
Run Configuratieopties
Overview
FastComments Image Chat breidt de standaard FastComments-reactiewidget uit, waardoor het alle configuratieopties van het basiswidget erft en enkele specifieke opties voor afbeeldingsannotaties toevoegt.
Required Configuration
tenantId
Je FastComments Tenant ID is vereist. Dit vind je in je FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Image Chat Specific Options
urlId
Standaard genereert Image Chat een unieke identifier voor elk gesprek op basis van de paginabestand, de afbeeldingsbron en de X/Y-coördinaten. Je kunt dit overschrijven met een aangepaste urlId.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Dit is nuttig wanneer je URL-structuur kan veranderen maar je dezelfde gesprekken wilt behouden, of wanneer je annotaties over meerdere pagina's wilt delen.
chatSquarePercentage
Bepaalt de grootte van de klikbare chatmarkeringen als percentage van de afbeeldingsbreedte. De standaardwaarde is 5%, wat betekent dat elke markering 5% van de afbeeldingsbreedte is.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Groter, beter zichtbare markeringen
});Kleinere waarden creëren minder opdringerige markeringen die beter werken voor gedetailleerde afbeeldingen. Grotere waarden maken markeringen gemakkelijker te zien en aan te klikken op drukke afbeeldingen of voor gebruikers op mobiele apparaten.
hasDarkBackground
Schakel dark mode-styling in wanneer je pagina een donkere achtergrond heeft.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Een callback-functie die wordt aangeroepen telkens wanneer het aantal opmerkingen verandert. Dit is handig voor het bijwerken van UI-elementen zoals badges of paginatitels.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Inherited Configuration Options
Aangezien Image Chat het standaard reacties-widget uitbreidt, kun je elke configuratieoptie van het basis FastComments-widget gebruiken. Hieronder enkele veelgebruikte opties:
locale
Stel de taal in voor de widget-UI. FastComments ondersteunt tientallen talen.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Spaans
});readonly
Maak alle conversaties alleen-lezen. Gebruikers kunnen bestaande markeringen en discussies bekijken maar geen nieuwe maken of reageren.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Integreer met je authenticatiesysteem met Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// SSO-configuratie
}
});Zie de SSO-documentatie voor volledige details over authenticatieopties.
maxReplyDepth
Beheer hoeveel niveaus diep reacties kunnen gaan. Standaard zet Image Chat dit op 0, wat betekent dat alle opmerkingen vlak zijn (geen geneste antwoorden). Je kunt dit wijzigen als je geneste conversaties wilt.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Sta 3 niveaus van nesteling toe
});Internal Configuration
Deze opties worden automatisch door Image Chat ingesteld en mogen niet worden overschreven:
De productId is automatisch ingesteld op 2 voor Image Chat. De extensie floating-chat wordt automatisch geladen om de chatvensterfunctionaliteit te bieden. Het widget detecteert automatisch mobiele apparaten (schermen onder 768px breed) en past de UI dienovereenkomstig aan met fullscreen chatvensters.
Target Element Flexibility
De eerste parameter van FastCommentsImageChat kan ofwel een <img>-element direct zijn of een containerelement met een afbeelding erin:
// Direct afbeeldingselement
FastCommentsImageChat(document.getElementById('my-image'), config);
// Container met afbeelding erin
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Het widget vindt de afbeelding automatisch wanneer je een containerelement doorgeeft.
Complete Example
Hier is een voorbeeld waarin meerdere configuratieopties samen worden getoond:
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: {
// Je SSO-configuratie
},
maxReplyDepth: 1
});Voor een volledige lijst van alle beschikbare configuratieopties die zijn overgenomen van het basiswidget, zie de hoofd FastComments-configuratiedocumentatie.
Responsief ontwerp
Op percentages gebaseerde positionering
Image Chat gebruikt op percentages gebaseerde coördinaten in plaats van pixelcoördinaten om chatmarkeringen op afbeeldingen te positioneren. Wanneer een gebruiker op een afbeelding klikt, zet de widget de pixelcoördinaten van de klik om in percentages van de afbeeldingsbreedte en -hoogte. Deze aanpak zorgt ervoor dat markeringen op de juiste plaats blijven, ongeacht hoe de afbeelding wordt weergegeven.
Als voorbeeld: als een gebruiker 250 pixels vanaf de linkerrand van een afbeelding van 1000px breed klikt, slaat de widget dit op als 25% vanaf links. Wanneer een andere gebruiker dezelfde afbeelding op een mobiel apparaat op 500px breed bekijkt, verschijnt de markering op 125 pixels vanaf links, wat nog steeds 25% van de breedte is.
Voordelen voor responsieve lay-outs
Dit percentagesysteem zorgt ervoor dat Image Chat naadloos werkt op alle apparaatsgroottes en -oriëntaties. Uw afbeeldingen kunnen afhankelijk van schermbreedte, CSS-regels of containerbeperkingen in verschillende formaten worden weergegeven, maar de markeringen blijven altijd correct uitgelijnd met de bedoelde locaties.
Gebruikers op desktopcomputers met grote monitoren zien markeringen op dezelfde relatieve posities als gebruikers op smartphones met kleine schermen. De markeringen schalen evenredig mee met de afbeelding zelf.
Schaal en beeldverhouding van afbeeldingen
Zolang uw afbeelding zijn beeldverhouding behoudt tijdens het schalen (wat het standaardgedrag van browsers is), blijven de op percentages gebaseerde markeringen perfect uitgelijnd. De widget gaat ervan uit dat afbeeldingen proportioneel schalen en berekent posities op basis van die aanname.
Als u CSS toepast die de beeldverhouding van de afbeelding vervormt (zoals het gebruik van object-fit: cover met specifieke afmetingen), kunnen de markeringen mogelijk niet correct uitgelijnd zijn. Voor de beste resultaten laat u afbeeldingen natuurlijk schalen of gebruikt u object-fit: contain om de beeldverhouding te behouden.
Grootte van chatvierkanten
Het visuele formaat van chatmarkeringen is ook op percentages gebaseerd. De configuratieoptie chatSquarePercentage staat standaard op 5%, wat betekent dat elk vierkant 5% van de afbeeldingsbreedte is. Dit zorgt voor een consistente visuele weging op verschillende afbeeldingsgroottes.
Op een afbeelding van 1000px breed met de standaardinstelling van 5% zijn markeringen 50px vierkant. Op een afbeelding van 500px breed zijn dezelfde markeringen 25px vierkant. Ze blijven evenredig met de afbeelding.
Gedrag op mobiel
Op schermen die smaller zijn dan 768px schakelt Image Chat over naar een mobiel-geoptimaliseerde lay-out. Chatvensters openen in volledig scherm in plaats van zwevend naast de markering. Dit zorgt voor betere bruikbaarheid op kleine schermen waar zwevende vensters te veel van de afbeelding zouden bedekken.
De markeringen zelf blijven zichtbaar en klikbaar op hun op percentages gebaseerde posities. Gebruikers kunnen nog steeds zien waar alle discussies zich bevinden en op markeringen tikken om de volwaardige chatinterface in volledig scherm te openen.
Dynamisch laden van afbeeldingen
Het op percentages gebaseerde systeem werkt correct, zelfs wanneer afbeeldingen asynchroon laden of van grootte veranderen nadat de pagina is geladen. De widget bewaakt het afbeeldings-element en herberekent markeerposities wanneer de afbeeldingsdimensies veranderen.
Als u afbeeldingen lazy-loadt of responsieve afbeeldingen implementeert met verschillende groottes bij verschillende breakpoints, passen de markeringen zich automatisch aan wanneer de afbeeldingsgrootte verandert.
Consistentie tussen apparaten
Omdat coördinaten als percentages in de database worden opgeslagen, verschijnt een discussie die op een desktopcomputer is aangemaakt op exact dezelfde relatieve locatie wanneer deze op een tablet of telefoon wordt bekeken. Gebruikers kunnen samenwerken tussen apparaten zonder positionele inconsistenties.
Dit werkt in twee richtingen. Een discussie die is aangemaakt door op een specifieke plek op een mobiel apparaat te tikken, verschijnt op dezelfde relatieve positie wanneer deze op een grote desktopmonitor wordt bekeken.
Viewport-overwegingen
De widget berekent percentages relatief ten opzichte van het afbeeldings-element zelf, niet ten opzichte van de viewport. Dit betekent dat scrollen op de pagina of het veranderen van de grootte van het browservenster geen invloed heeft op markeerposities. Markeringen blijven verankerd op hun locaties op de afbeelding ongeacht wijzigingen in de viewport.
Toekomstbestendigheid van content
De op percentages gebaseerde aanpak maakt uw afbeeldingsdiscussies bestand tegen veranderingen in lay-out, ontwerp of apparaatecosysteem. Naarmate nieuwe schermformaten en apparaten verschijnen, blijven bestaande discussies correct worden weergegeven zonder dat updates of migraties nodig zijn.
Aanpassing
Ondersteuning voor donkere modus
Image Chat bevat ingebouwde ondersteuning voor donkere modus. Als u hasDarkBackground: true instelt in uw configuratie, passen de chatvensters en UI-elementen zich automatisch aan zodat ze goed werken op donkere achtergronden.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});De styling voor donkere modus geldt voor chatvensters, marker-vierkanten en alle interactieve elementen. Als uw site een schakelaar voor donkere modus heeft, kunt u de widget opnieuw initialiseren wanneer de modus verandert, of de body-class methode gebruiken die hieronder wordt beschreven.
Dynamische donkere modus
Als de donkere modus van uw site wordt geregeld door een .dark-klasse toe te voegen aan het body-element, zal de Image Chat UI dit automatisch respecteren zonder dat herinitialisatie nodig is. De stijlen van de widget zijn ontworpen om te reageren op de aanwezigheid van deze klasse.
/* Uw CSS voor donkere modus */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Aangepaste styling met CSS
U kunt het uiterlijk van markers, chatvensters en andere elementen aanpassen met CSS. De widget voegt specifieke klassen toe die u in uw stylesheet kunt targeten.
De chatvierkanten en vensters gebruiken het FastComments comment bubble-stylingsysteem, dus eventuele aanpassingen die u op de standaard commentaarwidget hebt toegepast, beïnvloeden ook Image Chat.
Grootte van chatvierkanten
De optie chatSquarePercentage regelt de grootte van de aanklikbare markers. Standaard is dit 5% van de afbeeldingsbreedte:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Grotere, beter zichtbare vierkanten
});Kleinere waarden maken subtielere markers die in de afbeelding opgaan. Grotere waarden maken markers prominenter en gemakkelijker aan te klikken, vooral op mobiele apparaten of voor toegankelijkheidsdoeleinden.
Gedrag op mobiel
Op schermen smaller dan 768px schakelt Image Chat automatisch over naar een voor mobiel geoptimaliseerde lay-out. Chatvensters verschijnen in volledig scherm in plaats van naast de markers te zweven, wat betere bruikbaarheid op kleine schermen biedt.
De markers blijven zichtbaar op hun responsieve posities op de afbeelding. Gebruikers kunnen op een marker tikken om de chatinterface in volledig scherm te openen. Dit gedrag is ingebouwd en vereist geen configuratie.
Uiterlijk van het chatvenster
Chatvensters zijn 300px breed op desktop met een pijl van 16px die naar de marker wijst. De vensters positioneren zichzelf automatisch op basis van de beschikbare viewport-ruimte, met positioneringsklassen zoals to-right, to-left, to-top en to-bottom.
U kunt aangepaste CSS toevoegen om kleuren, lettertypen, ruimte of andere visuele eigenschappen van deze vensters aan te passen. De chatvensters gebruiken dezelfde componentstructuur als de standaard FastComments-widget, dus ze erven eventuele globale aanpassingen die u hebt toegepast.
Luie initialisatie
Chatvensters initialiseren bij hover voor desktopgebruikers of onmiddellijk wanneer ze worden aangemaakt. Dit vermindert de initiële laadtijd doordat de chatinterface alleen wordt gerenderd wanneer gebruikers daadwerkelijk met een marker interageren.
De luie initialisatie gebeurt transparant. Gebruikers merken geen vertraging, maar de browser hoeft niet tientallen verborgen chatvensters te renderen als u veel markers op een afbeelding hebt.
Lokalisatie
Image Chat ondersteunt alle dezelfde lokalisatie-opties als de standaard FastComments-widget. Stel de locale-optie in om UI-tekst in verschillende talen weer te geven:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Frans
});FastComments ondersteunt tientallen talen. De locale-instelling beïnvloedt alle UI-tekst, inclusief prompts, knoppen en placeholder-tekst.
Geërfde aanpassingsopties
Omdat Image Chat de standaard commentaarwidget uitbreidt, erft het alle aanpassingsopties van de basiswidget. Dit omvat aangepaste CSS-klassen, aangepaste vertalingen, avatar-aanpassing, datumopmaak en nog veel meer.
Zie de hoofddocumentatie van FastComments voor aanpassingen voor de volledige lijst met beschikbare aanpassingsopties.
Werken met aangepaste lettertypen
Als uw site aangepaste lettertypen gebruikt, erft de Image Chat UI die lettertypen uit de CSS van uw pagina. De chatvensters worden gerenderd binnen de DOM van uw pagina en respecteren uw bestaande typografie-instellingen.
Voor het beste resultaat zorgt u ervoor dat uw aangepaste lettertypen zijn geladen voordat u Image Chat initialiseert, of accepteert u dat er een korte flash van ongestylede tekst kan optreden terwijl de lettertypen laden.
Visueel ontwerp van markers
De vierkante markers hebben een subtiel visueel ontwerp dat ze merkbaar maakt zonder de afbeelding te overheersen. U kunt hun uiterlijk aanpassen met CSS als u een andere visuele behandeling wilt.
De markers bevatten hover-states die feedback geven wanneer gebruikers hun muis erover bewegen. Op aanraakapparaten geeft de tikinteractie directe feedback door het chatvenster te openen.
Live-synchronisatie
Realtime-updates
Image Chat gebruikt WebSocket-verbindingen om alle gesprekken in realtime te synchroniseren voor alle verbonden gebruikers. Wanneer iemand een nieuwe marker maakt, een opmerking toevoegt of een discussie verwijdert, zien alle andere gebruikers die dezelfde afbeelding bekijken de update onmiddellijk zonder te vernieuwen.
Hoe WebSocket-synchronisatie werkt
Wanneer je Image Chat initialiseert, maakt de widget een WebSocket-verbinding met de FastComments-servers. Deze verbinding blijft open voor de duur van de gebruikerssessie en luistert naar updates die betrekking hebben op de huidige afbeelding.
Het WebSocket-systeem gebruikt drie typen broadcast-berichten voor Image Chat. Het new-image-chat event wordt afgevuurd wanneer iemand een nieuwe marker op de afbeelding aanmaakt. Het image-chat-updated event wordt afgevuurd wanneer iemand een bestaand gesprek bijwerkt. Het deleted-image-chat event wordt afgevuurd wanneer iemand een marker verwijdert.
Broadcast-ID-systeem
Om echo-effecten te voorkomen waarbij gebruikers hun eigen acties teruggezien krijgen, bevat elke update een unieke broadcastId. Wanneer een gebruiker een marker aanmaakt of bijwerkt, genereert hun client een UUID voor die bewerking. Wanneer de WebSocket de update terug uitzendt naar alle clients, negeert de oorspronkelijke client de update omdat deze overeenkomt met zijn eigen broadcastId.
Dit zorgt voor een soepele interactie waarbij gebruikers hun wijzigingen onmiddellijk in de UI zien zonder te wachten op de roundtrip via de server, terwijl alle andere gebruikers toch de update ontvangen.
Verbindingsherstel
Als de WebSocket-verbinding wegvalt vanwege netwerkproblemen of serveronderhoud, probeert de widget automatisch opnieuw verbinding te maken. Tijdens de periode van opnieuw verbinden kunnen gebruikers nog steeds met bestaande markers interageren, maar ze zien geen realtime-updates van andere gebruikers totdat de verbinding is hersteld.
Zodra de verbinding is hersteld, synchroniseert de widget opnieuw om zeker te zijn dat er geen updates zijn gemist. Dit gebeurt transparant zonder dat de gebruiker iets hoeft te doen.
Bandbreedte-overwegingen
WebSocket-berichten zijn lichtgewicht en bevatten alleen de essentiële informatie die nodig is om de status te synchroniseren. Het aanmaken van een nieuwe marker gebruikt doorgaans minder dan 1KB aan bandbreedte. Het systeem bevat ook intelligente batching om de frequentie van berichten te verminderen tijdens periodes met veel activiteit.
Je gebruiksstatistieken in het FastComments dashboard volgen pubSubMessageCount en pubSubBandwidth zodat je de realtime-synchronisatie-activiteit over je sites kunt monitoren.
Synchronisatie tussen tabbladen
Als een gebruiker dezelfde pagina in meerdere browsertabbladen open heeft, verschijnen updates in het ene tabblad onmiddellijk in de andere tabbladen. Dit werkt via hetzelfde WebSocket-synchronisatiemechanisme en vereist geen extra configuratie.
Gebruikers kunnen je site ook op meerdere apparaten tegelijk open hebben en al deze apparaten blijven synchroon. Een marker die op een desktopcomputer is gemaakt, verschijnt direct op de tablet van de gebruiker als beide apparaten dezelfde afbeelding bekijken.
Beveiliging
WebSocket-berichten worden verzonden via beveiligde verbindingen (WSS) en bevatten tenant-validatie om ervoor te zorgen dat gebruikers alleen updates ontvangen voor gesprekken waarvoor ze geautoriseerd zijn. De server valideert alle bewerkingen voordat deze worden uitgezonden om ongeautoriseerde toegang of manipulatie te voorkomen.
Offline-gedrag
Wanneer gebruikers volledig offline zijn, kunnen ze bestaande markers nog bekijken maar kunnen ze geen nieuwe aanmaken of updates van anderen zien. De widget detecteert de offline-status en toont gepaste meldingen.
Als een gebruiker probeert een marker aan te maken terwijl hij offline is en daarna weer online komt, zal de bewerking mislukken in plaats van in de wachtrij te worden geplaatst, om gegevensconsistentie te waarborgen. Gebruikers moeten de bewerking opnieuw proberen zodra hun verbinding is hersteld.
Impact op prestaties
De WebSocket-verbinding heeft een minimale impact op de prestaties. De verbinding blijft inactief wanneer er geen updates plaatsvinden en verwerkt alleen berichten wanneer er activiteit is. Bij een typische afbeelding met matige marker-activiteit gebruikt de WebSocket minder CPU dan het renderen van de afbeelding zelf.
Voor pagina's met honderden gelijktijdige gebruikers en veel marker-aanmaakactiviteit schaalt het systeem horizontaal om de prestaties te behouden zonder individuele clientverbindingen te beïnvloeden.
Samenwerkingsscenario's
De realtime-synchronisatie maakt Image Chat bijzonder krachtig voor samenwerkingsworkflows. Ontwerpteams kunnen samen mockups beoordelen waarbij iedereen in realtime ziet waar markers worden geplaatst. Klantenserviceteams kunnen gezamenlijk screenshots annoteren om problemen te identificeren. Onderwijsgroepen kunnen diagrammen bespreken waarbij alle deelnemers elkaars markers zien terwijl ze worden gemaakt.
De directe feedback zorgt voor een meer betrokken en productieve samenwerkingservaring in vergelijking met traditionele reactiesystemen waarbij gebruikers moeten verversen om updates te zien.
API-referentie
API Overzicht
Image Chat biedt drie REST API-eindpunten voor het programatisch beheren van gesprekken bij afbeeldingen. Deze eindpunten stellen je in staat gesprekken op te halen, aan te maken en te verwijderen zonder de browserwidget te gebruiken.
Alle API-eindpunten vereisen authenticatie en volgen de standaard FastComments API-patronen. Dit zijn openbare eindpunten die authenticeren via browsercookies, niet via API-sleutels.
Basis-URL
Alle Image Chat API-eindpunten bevinden zich onder:
https://fastcomments.com/comment-image-chatsAuthenticatie
Deze eindpunten authenticeren gebruikers via browsercookies. Ze gebruiken geen API-sleutels. Gebruikers moeten ingelogd zijn bij FastComments in hun browser om toegang te krijgen tot deze eindpunten.
Alle gesprekken ophalen
Haal alle beeldgesprekken op voor een specifieke afbeelding.
Eindpunt
GET /comment-image-chats/:tenantId?urlId=<urlId>Parameters
tenantId (padparameter, verplicht) is je FastComments Tenant ID.
urlId (queryparameter, verplicht) is de afbeeldingsidentificatie waarvoor je gesprekken wilt ophalen.
Respons
De respons bevat de API-status, informatie over de huidige gebruikerssessie als geauthenticeerd, een array met gesprekken inclusief hun IDs, URL's en X/Y-coördinaten, een opgeschoonde URL-identificatie, een vlag die aangeeft of de huidige gebruiker sitebeheerder of moderator is, en WebSocket-verbindinggegevens voor live-synchronisatie inclusief tenantIdWS, urlIdWS, en userIdWS.
Voorbeeldverzoek
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Voorbeeldrespons
{
"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"
}Gesprek aanmaken
Maak een nieuw beeldgesprek aan voor een specifieke locatie op een afbeelding.
Eindpunt
POST /comment-image-chats/:tenantIdParameters
tenantId (padparameter, verplicht) is je FastComments Tenant ID.
De request body moet JSON zijn en de volgende verplichte velden bevatten.
urlId (string, verplicht) is de basispagina-identificatie.
windowUrlId (string, verplicht) is de URL gecombineerd met de afbeeldingsbron en coördinaten, bijvoorbeeld my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, verplicht) is de titel van de pagina.
src (string, verplicht) is de afbeeldingsbron-URL.
x (number, verplicht) is de X-coördinaat als percentage (0-100).
y (number, verplicht) is de Y-coördinaat als percentage (0-100).
createdFromCommentId (string, verplicht) is de ID van de opmerking die dit gesprek heeft gestart.
broadcastId (string, verplicht) is een UUID voor live-synchronisatie om echo-effecten te voorkomen.
Respons
De respons bevat de API-status en de ID van het nieuw aangemaakte gesprek.
Voorbeeldverzoek
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"
}'Voorbeeldrespons
{
"status": "success",
"createdChatId": "conv789"
}Gesprek verwijderen
Verwijder een bestaand beeldgesprek. Dit eindpunt vereist admin- of moderatorrechten, of het gesprek moet zijn aangemaakt door de geauthenticeerde gebruiker.
Eindpunt
DELETE /comment-image-chats/:tenantId/:chatIdParameters
tenantId (padparameter, verplicht) is je FastComments Tenant ID.
chatId (padparameter, verplicht) is de ID van het gesprek dat verwijderd moet worden.
broadcastId (request body, verplicht) is een UUID voor live-synchronisatie.
Voorbeeldverzoek
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"
}'Voorbeeldrespons
{
"status": "success"
}Coördinatenstelsel
De X- en Y-coördinaten worden opgeslagen als percentages van de afbeeldingsafmetingen. X geeft de horizontale positie vanaf de linkerkant aan (0 = linker rand, 100 = rechter rand). Y geeft de verticale positie vanaf de bovenkant aan (0 = bovenrand, 100 = onderrand).
Deze procentwaarden kunnen decimalen bevatten voor precisie. Bijvoorbeeld, x: 25.5 betekent 25.5% vanaf de linkerrand van de afbeelding.
Rate Limiting
Deze eindpunten vallen onder de standaard FastComments API rate limiting. De rate limit-middleware wordt per tenant toegepast om misbruik te voorkomen en tegelijk normaal gebruik toe te staan.
Foutantwoorden
Alle eindpunten geven standaard HTTP-statuscodes terug. Een 400-respons duidt op ongeldige aanvraagparameters. Een 401-respons betekent dat authenticatie is mislukt. Een 403-respons geeft aan dat de machtigingen onvoldoende zijn. Een 404-respons betekent dat het gesprek niet is gevonden. Een 429-respons geeft aan dat het tarieflimiet is overschreden.
Foutantwoorden bevatten een JSON-body met details:
{
"status": "error",
"message": "Conversation not found"
}Gebruikstracering
Het aanmaken van gesprekken verhoogt je conversationCreateCount gebruiksmetric. Alle WebSocket-synchronisatie-activiteit verhoogt pubSubMessageCount en pubSubBandwidth. Je kunt deze metrics monitoren in je FastComments-dashboard onder gebruiksanalyse.
Vragen?
Dat is alles voor FastComments Image Chat! Als je vragen hebt, hulp nodig hebt bij de implementatie, of suggesties voor functies, laat het ons dan hieronder weten of neem contact op met ons ondersteuningsteam.
Bekijk de live demo op onze demopagina om Image Chat in actie te zien.