FastComments.com
Menu Icon

Taal 🇳🇱 Nederlands
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇫🇷 Français (France) 🇩🇪 Deutsch 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇳 हिन्दी 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇷🇸 Srpski (Latinica) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Aan de slag

Aan de slag
Voorbeelden

Configuratie

Configuratieopties
Responsief ontwerp

Aanpassing

Aanpassing

Geavanceerd

Live-synchronisatie
API-referentie

Beeldchat

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 Internal Link

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:

Image Chat-script laden
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3

Basisimplementatie

Hier is een minimaal voorbeeld:

Basisimplementatie van Image Chat
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Image Gallery with Image Chat</title>
6</head>
7<body>
8 <!-- Your image -->
9 <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
10
11 <!-- Load the Image Chat script -->
12 <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
13
14 <!-- Initialize Image Chat -->
15 <script>
16 FastCommentsImageChat(document.getElementById('my-image'), {
17 tenantId: 'demo'
18 });
19 </script>
20</body>
21</html>
22

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 Internal Link

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:

Basisvoorbeeld Image Chat
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>Product Image with Chat</title>
6</head>
7<body>
8 <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
9
10 <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
11 <script>
12 FastCommentsImageChat(document.getElementById('product-image'), {
13 tenantId: 'demo'
14 });
15 </script>
16</body>
17</html>
18

Voorbeeld met container-element

Je kunt ook een containerelement doorgeven dat een afbeelding bevat:

Image Chat met containerelement
Copy CopyRun External Link
1
2<div id="image-container">
3 <img src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="System Diagram" />
4</div>
5
6<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
7<script>
8 FastCommentsImageChat(document.getElementById('image-container'), {
9 tenantId: 'demo'
10 });
11</script>
12

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:

Image Chat met aangepaste URL-ID
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3<script>
4 FastCommentsImageChat(document.getElementById('product-image'), {
5 tenantId: 'demo',
6 urlId: 'product-v2-main-image'
7 });
8</script>
9

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:

Image Chat met donkere modus
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3<script>
4 FastCommentsImageChat(document.getElementById('product-image'), {
5 tenantId: 'demo',
6 hasDarkBackground: true
7 });
8</script>
9

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:

Image Chat met aangepaste vierkantsgrootte
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>Image Chat with Custom Square Size</title>
6</head>
7<body>
8 <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
9
10 <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
11 <script>
12 FastCommentsImageChat(document.getElementById('product-image'), {
13 tenantId: 'demo',
14 chatSquarePercentage: 2, // Kleinere vierkantjes (standaard is 5)
15 });
16 </script>
17</body>
18</html>
19

Voorbeeld met callback voor aantal reacties

Houd bij wanneer reacties worden toegevoegd of bijgewerkt met de commentCountUpdated callback:

Image Chat met callback voor aantal reacties
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3<script>
4 FastCommentsImageChat(document.getElementById('product-image'), {
5 tenantId: 'demo',
6 commentCountUpdated: function(count) {
7 console.log('Total comments:', count);
8 document.getElementById('comment-badge').textContent = count;
9 }
10 });
11</script>
12

Voorbeeld met meerdere afbeeldingen

Je kunt Image Chat op meerdere afbeeldingen initialiseren. Elke afbeelding krijgt zijn eigen onafhankelijke discussiepunten:

Image Chat op meerdere afbeeldingen
Copy CopyRun External Link
1
2<img id="image-1" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 1" />
3<img id="image-2" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 2" />
4
5<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
6<script>
7 // Initialiseer op eerste afbeelding
8 FastCommentsImageChat(document.getElementById('image-1'), {
9 tenantId: 'demo',
10 urlId: 'gallery-photo-1'
11 });
12
13 // Initialiseer op tweede afbeelding
14 FastCommentsImageChat(document.getElementById('image-2'), {
15 tenantId: 'demo',
16 urlId: 'gallery-photo-2'
17 });
18</script>
19

Configuratieopties Internal Link

Overzicht

FastComments Image Chat breidt de standaard FastComments commenting widget uit, dus het erft alle configuratieopties van de basiswidget over en voegt een paar opties specifiek voor afbeeldingsannotaties toe.

Vereiste Configuratie

tenantId

Je FastComments Tenant ID is vereist. Je kunt deze vinden in je FastComments dashboard.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo'
});

Image Chat Specifieke Opties

urlId

Standaard genereert Image Chat een unieke identificatie voor elk gesprek op basis van de pagina-URL, 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 handig wanneer je URL-structuur mogelijk verandert maar je dezelfde gesprekken wilt behouden, of wanneer je annotaties over meerdere pagina's wilt delen.

chatSquarePercentage

Bepaalt de grootte van de klikbare chat-markers als een percentage van de afbeeldingsbreedte. De standaardwaarde is 5%, wat betekent dat elke marker 5% van de afbeeldingsbreedte is.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 8  // Grotere, beter zichtbare markers
});

Kleinere waarden creëren minder opvallende markers die beter werken voor gedetailleerde afbeeldingen. Grotere waarden maken markers makkelijker te zien en aan te klikken op drukke afbeeldingen of voor gebruikers op mobiele apparaten.

hasDarkBackground

Activeer donkere modus-styling wanneer je pagina een donkere achtergrond heeft.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

commentCountUpdated

Een callback-functie die wordt aangeroepen wanneer het aantal reacties 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;
    }
});

Overgeërfde Configuratieopties

Omdat Image Chat de standaard commenting widget uitbreidt, kun je elke configuratieoptie van de basis FastComments widget gebruiken. Hier zijn 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 gesprekken alleen-lezen. Gebruikers kunnen bestaande markers en discussies bekijken, maar kunnen geen nieuwe maken of reageren.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    readonly: true
});

sso en simpleSSO

Integreer met je authenticatiesysteem met behulp van Single Sign-On.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    sso: {
        // SSO-configuratie
    }
});

Zie de SSO-documentatie voor volledige details over authenticatieopties.

maxReplyDepth

Bepaal hoeveel niveaus diep reacties kunnen gaan. Standaard stelt Image Chat dit in op 0, wat betekent dat alle reacties vlak zijn (geen geneste reacties). Je kunt dit wijzigen als je gesprekken met threads wilt.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // Sta 3 niveaus van nesting toe
});

Interne Configuratie

Deze opties worden automatisch ingesteld door Image Chat en moeten niet worden overschreven:

De productId wordt automatisch ingesteld op 2 voor Image Chat. De floating-chat extensie wordt automatisch geladen om de chatvenster-functionaliteit te bieden. De widget detecteert automatisch mobiele apparaten (schermen smaller dan 768px) en past de UI dienovereenkomstig aan met fullscreen chatvensters.

Flexibiliteit van Doel-element

De eerste parameter van FastCommentsImageChat kan direct een <img>-element 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);

De widget vindt de afbeelding automatisch als je een containerelement doorgeeft.

Volledig Voorbeeld

Hier is een voorbeeld dat meerdere configuratieopties samen toont:

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: {
        // Jouw SSO-configuratie
    },
    maxReplyDepth: 1
});

Zie de hoofddocumentatie van FastComments-configuratie voor een volledige lijst van alle beschikbare configuratieopties die van de basiswidget worden overgeërfd.

Responsief ontwerp Internal Link

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 Internal Link

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 Internal Link

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 Internal Link

API-overzicht

Image Chat biedt drie REST API-endpoints voor het programmatisch beheren van afbeeldingsgesprekken. Met deze endpoints kunt u markers ophalen, aanmaken en verwijderen zonder de browser-widget te gebruiken.

Alle API-endpoints vereisen authenticatie en volgen de standaard FastComments API-patronen. Dit zijn publieke endpoints die via browsercookies worden geauthenticeerd, niet via API-sleutels.

Basis-URL

Alle Image Chat API-endpoints vallen onder:

https://fastcomments.com/comment-image-chats

Authenticatie

Deze endpoints authenticeren gebruikers via browsercookies. Ze gebruiken geen API-sleutels. Gebruikers moeten in hun browser ingelogd zijn bij FastComments om toegang te krijgen tot deze endpoints.

Alle gesprekken ophalen

Haal alle afbeeldingsgesprekken op voor een specifieke afbeelding.

Endpoint

GET /comment-image-chats/:tenantId?urlId=<urlId>

Parameters

tenantId (padparameter, vereist) is uw FastComments Tenant ID.

urlId (queryparameter, vereist) is de afbeeldingsidentificatie waarvoor u gesprekken wilt ophalen.

Respons

De respons bevat de API-status, informatie over de huidige gebruikerssessie indien geauthenticeerd, een array met gesprekken inclusief hun ID's, URL's en X/Y-coördinaten, een opgeschoonde URL-identificatie, een vlag die aangeeft of de huidige gebruiker een sitebeheerder of moderator is, en WebSocket-verbindingsdetails voor live synchronisatie, waaronder 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 afbeeldingsgesprek aan voor een specifieke locatie op een afbeelding.

Endpoint

POST /comment-image-chats/:tenantId

Parameters

tenantId (padparameter, vereist) is uw FastComments Tenant ID.

De request body moet JSON zijn en deze 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 URL van de afbeeldingsbron.

x (getal, verplicht) is de X-coördinaat als percentage (0-100).

y (getal, verplicht) is de Y-coördinaat als percentage (0-100).

createdFromCommentId (string, verplicht) is de ID van de reactie die deze chat 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 afbeeldingsgesprek. Dit endpoint vereist beheerder- of moderatorrechten, of het gesprek moet zijn aangemaakt door de geauthenticeerde gebruiker.

Endpoint

DELETE /comment-image-chats/:tenantId/:chatId

Parameters

tenantId (padparameter, vereist) is uw FastComments Tenant ID.

chatId (padparameter, vereist) is de ID van het te verwijderen gesprek.

broadcastId (request body, vereist) 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ördinatensysteem

De X- en Y-coördinaten worden opgeslagen als percentages van de afmetingen van de afbeelding. X vertegenwoordigt de horizontale positie vanaf de linkerrand (0 = linkerrand, 100 = rechterrand). Y vertegenwoordigt de verticale positie vanaf de bovenrand (0 = bovenrand, 100 = onderrand).

Deze percentagewaarden kunnen decimalen bevatten voor precisie. Bijvoorbeeld, x: 25.5 betekent 25,5% vanaf de linkerrand van de afbeelding.

Rate limiting

Deze endpoints vallen onder de standaard FastComments API rate limiting. De rate limit-middleware geldt per tenant om misbruik te voorkomen terwijl normaal gebruik mogelijk blijft.

Foutresponsen

Alle endpoints geven standaard HTTP-statuscodes terug. Een 400-respons geeft ongeldige verzoekparameters aan. Een 401-respons betekent dat de authenticatie is mislukt. Een 403-respons geeft onvoldoende rechten aan. Een 404-respons betekent dat het gesprek niet is gevonden. Een 429-respons geeft aan dat de rate limit is overschreden.

Foutresponsen bevatten een JSON-body met details:

{
  "status": "error",
  "message": "Conversation not found"
}

Gebruiksbewaking

Het aanmaken van gesprekken verhoogt uw conversationCreateCount gebruiksstatistiek. Alle WebSocket-synchronisatieactiviteit verhoogt pubSubMessageCount en pubSubBandwidth. U kunt deze statistieken monitoren in uw FastComments-dashboard onder gebruiksanalyse.

Vragen?

Dat was het voor FastComments Image Chat! Als je vragen hebt, hulp nodig hebt bij de implementatie of suggesties voor functies hebt, 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.

Bijdragen aan deze gids