FastComments.com
Menu Icon

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

Kom godt i gang

Kom godt i gang
Eksempler

Konfiguration

Konfigurationsmuligheder
Responsivt design

Tilpasning

Tilpasning

Avanceret

Live-synkronisering
API-reference

Billedchat

FastComments Image Chat muliggør interaktive diskussioner om billeder ved at lade brugere klikke hvor som helst på et billede for at oprette diskussionspunkter. Brugere kan klikke på specifikke dele af billeder for at starte samtaler om de områder, hvilket skaber visuelle markører, der viser, hvor diskussionerne er placeret.

Funktionen er perfekt til designfeedback, produktanmeldelser, undervisningsmateriale med diagrammer, fotogallerier med kommentarer og enhver situation, hvor du ønsker kontekstuelle diskussioner forankret til bestemte placeringer på billeder.

Kom godt i gang Internal Link

Anvendelsestilfælde

Image Chat fungerer godt til designfeedback, hvor teams skal diskutere specifikke elementer i mockups eller skærmbilleder. Produkttestsites kan lade kunder diskutere specifikke funktioner synlige på produktfotos. Uddannelsesplatforme kan bruge det til at diskutere diagrammer, kort eller videnskabelige billeder. Fotogallerier kan blive interaktive med lokationsspecifikke kommentarer. Ejendomssites kan lade besøgende diskutere specifikke træk synlige på boligbilleder.

Kom godt i gang

Det er enkelt at komme i gang med Image Chat. Du skal bruge FastComments Image Chat-scriptet, et billedelement eller en container med et billede og et konfigurationsobjekt med dit Tenant ID.

Installation

Tilføj Image Chat-scriptet til din side:

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

Grundlæggende implementering

Here's a minimal example:

Grundlæggende Image Chat-implementering
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

Erstat 'demo' med dit faktiske FastComments Tenant ID, hvis det ikke allerede er, som du kan finde i dit FastComments dashboard.

Hvordan det virker

Når det er initialiseret, kan brugere klikke hvor som helst på billedet. Når der klikkes, vises en visuel firkantet markør på det sted, og et chatvindue åbnes. Andre brugere kan se alle markørerne og klikke på dem for at se eller deltage i de pågældende diskussioner. Alle diskussioner synkroniseres i realtid på tværs af alle besøgende.

Widget'en bruger procentbaseret placering, så markørerne bliver i den korrekte position, selv når billedet ændrer størrelse eller vises på forskellige skærmstørrelser.

Live-demo

Du kan se Image Chat i aktion på vores live demo-side.

Næste skridt

Nu hvor du har det grundlæggende til at fungere, kan du tilpasse udseendet og adfærden i vejledningen om konfigurationsmuligheder. Tjek vejledningen om responsivt design for at forstå, hvordan procentbaseret placering fungerer. Lær om styling og understøttelse af dark mode i tilpasningsvejledningen. For avancerede integrationer kan du udforske API-referencen.

Frontend-biblioteker

Alle FastComments frontend-biblioteker (react, vue, angular osv.) indeholder Image Chat.

Eksempler Internal Link

Grundlæggende eksempel

Den enkleste måde at bruge Image Chat på er at målrette et enkelt billedelement. Dette eksempel viser, hvordan man aktiverer interaktive diskussioner på et billede:

Grundlæggende Image Chat-eksempel
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

Eksempel med container-element

Du kan også give et container-element, der har et billede indeni:

Image Chat with Container
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

Eksempel med brugerdefineret URL-id

Som standard bruger Image Chat side-URL'en kombineret med billedets kilde og koordinater til at identificere samtaler. Du kan angive et brugerdefineret urlId:

Image Chat with Custom 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

Det er nyttigt, hvis din URL-struktur ændrer sig, men du ønsker at bevare de samme samtaler, eller hvis du vil dele de samme diskussionspunkter på tværs af flere sider.

Eksempel med mørk tilstand

Hvis dit site har en mørk baggrund, og widget'en ikke automatisk registrerer det som den burde, kan vi manuelt aktivere support for mørk tilstand:

Image Chat with Dark Mode
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

Eksempel med brugerdefineret firkantstørrelse

Du kan justere størrelsen på de klikbare firkanter, der vises på billedet. Størrelsen angives som en procentdel af billedets bredde:

Image Chat with Custom Square Size
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, // Mindre firkanter (standard er 5)
15 });
16 </script>
17</body>
18</html>
19

Eksempel med kommentarantal-callback

Hold styr på, hvornår kommentarer tilføjes eller opdateres ved hjælp af commentCountUpdated-callback'en:

Image Chat with Comment Count Callback
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

Eksempel med flere billeder

Du kan initialisere Image Chat på flere billeder. Hvert billede får sine egne uafhængige diskussionspunkter:

Image Chat on Multiple Images
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 // Initialiser på første billede
8 FastCommentsImageChat(document.getElementById('image-1'), {
9 tenantId: 'demo',
10 urlId: 'gallery-photo-1'
11 });
12
13 // Initialiser på andet billede
14 FastCommentsImageChat(document.getElementById('image-2'), {
15 tenantId: 'demo',
16 urlId: 'gallery-photo-2'
17 });
18</script>
19

Konfigurationsmuligheder Internal Link

Oversigt

FastComments Image Chat udvider standard FastComments-kommentarwidgetten, så den arver alle konfigurationsmulighederne fra basiswidgetten og samtidig tilføjer et par specifikke for billedannotationer.

Påkrævet konfiguration

tenantId

Dit FastComments Tenant ID er påkrævet. Du kan finde det i dit FastComments dashboard.

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

Image Chat-specifikke indstillinger

urlId

Som standard genererer Image Chat en unik identifikator for hver samtale baseret på sidens URL, billedkilden og X/Y-koordinaterne. Du kan tilsidesætte dette med en brugerdefineret urlId.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    urlId: 'my-custom-image-id'
});

Dette er nyttigt, når din URL-struktur muligvis ændres, men du vil beholde de samme samtaler, eller når du vil dele annotationer på tværs af flere sider.

chatSquarePercentage

Styrer størrelsen af de klikbare chat-markører som en procentdel af billedets bredde. Standardværdien er 5 %, hvilket betyder, at hver markør er 5 % af billedets bredde.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 8  // Større, mere synlige markører
});

Mindre værdier skaber mindre påtrængende markører, der fungerer bedre til detaljerede billeder. Større værdier gør markørerne lettere at se og klikke på travle billeder eller for brugere på mobile enheder.

hasDarkBackground

Aktivér mørk tilstand, når din side har en mørk baggrund.

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

commentCountUpdated

En callback-funktion, der udløses, hver gang antallet af kommentarer ændres. Dette er nyttigt til at opdatere UI-elementer som badges eller sidetitler.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    commentCountUpdated: function(count) {
        console.log('Total comments:', count);
        document.getElementById('badge').textContent = count;
    }
});

Arvede konfigurationsmuligheder

Da Image Chat udvider standardkommentarwidgetten, kan du bruge enhver konfigurationsmulighed fra basis-FastComments-widgetten. Her er nogle almindeligt anvendte indstillinger:

locale

Indstil sproget for widgettens UI. FastComments understøtter snesevis af sprog.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'es'  // Spansk
});

readonly

Gør alle samtaler skrivebeskyttede. Brugere kan se eksisterende markører og diskussioner, men kan ikke oprette nye eller svare.

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

sso og simpleSSO

Integrér med dit autentificeringssystem ved hjælp af Single Sign-On.

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

Se SSO-dokumentationen for fulde detaljer om autentificeringsmuligheder.

maxReplyDepth

Styr, hvor mange niveauer dybe svar kan gå. Som standard sætter Image Chat denne til 0, hvilket betyder, at alle kommentarer er flade (ingen indlejrede svar). Du kan ændre dette, hvis du ønsker trådede samtaler.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // Tillad 3 niveauer af indlejring
});

Intern konfiguration

Disse indstillinger sættes automatisk af Image Chat og bør ikke tilsidesættes:

productId sættes automatisk til 2 for Image Chat. Udvidelsen floating-chat indlæses automatisk for at levere chatvinduesfunktionaliteten. Widgetten registrerer automatisk mobile enheder (skærme under 768px i bredden) og tilpasser UI'en i overensstemmelse hermed med chatvinduer i fuldskærm.

Fleksibilitet for målelementet

Den første parameter til FastCommentsImageChat kan enten være et <img>-element direkte eller et containerelement med et billede indeni:

// Direkte billedelement
FastCommentsImageChat(document.getElementById('my-image'), config);

// Container med billede indeni
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);

Widgetten finder billedet automatisk, hvis du sender et containerelement.

Komplet eksempel

Her er et eksempel, der viser flere konfigurationsmuligheder sammen:

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

For en komplet liste over alle tilgængelige konfigurationsmuligheder, der er arvet fra basiswidgetten, se hoveddokumentationen for FastComments-konfiguration.

Responsivt design Internal Link

Procentbaseret Positionering

Image Chat bruger procentbaserede koordinater i stedet for pixelkoordinater til at placere chatmarkører på billeder. Når en bruger klikker på et billede, konverterer widgetten klikkets pixelkoordinater til procenter af billedets bredde og højde. Denne tilgang sikrer, at markører forbliver på det korrekte sted uanset hvordan billedet vises.

For eksempel, hvis en bruger klikker 250 pixels fra venstre kant af et 1000px bredt billede, gemmer widgetten dette som 25% fra venstre. Når en anden bruger ser det samme billede 500px bredt på en mobil enhed, vises markøren 125 pixels fra venstre, hvilket stadig er 25% af bredden.

Fordele ved Responsive Layouts

Dette procentsystem gør, at Image Chat fungerer problemfrit på alle enhedsstørrelser og orienteringer. Dine billeder kan vises i forskellige størrelser afhængigt af skærmbredde, CSS-regler eller containerbegrænsninger, men markørerne justeres altid korrekt i forhold til de tilsigtede placeringer.

Brugere på stationære computere med store skærme ser markørerne i de samme relative positioner som brugere på smartphones med små skærme. Markørerne skalerer proportionalt med selve billedet.

Billedskalering og Aspektforhold

Så længe dit billede bevarer sit aspektforhold ved skalering (hvilket er browserens standardadfærd), forbliver de procentbaserede markører perfekt justeret. Widgetten antager, at billeder skalerer proportionalt, og beregner positioner ud fra denne antagelse.

Hvis du anvender CSS, der forvrider billedets aspektforhold (som at bruge object-fit: cover med specifikke dimensioner), stemmer markørpositionerne muligvis ikke overens. For de bedste resultater, lad billeder skalere naturligt eller brug object-fit: contain for at bevare aspektforholdet.

Størrelse af Chatkvadrater

Den visuelle størrelse af chatmarkørerne er også procentbaseret. Konfigurationsindstillingen chatSquarePercentage er som standard 5%, hvilket betyder, at hvert kvadrat er 5% af billedets bredde. Dette sikrer en ensartet visuel vægt på tværs af forskellige billedstørrelser.

På et 1000px bredt billede med standardindstillingen på 5% er markørerne 50px i kvadrat. På et 500px bredt billede er de samme markører 25px i kvadrat. De forbliver proportionale med billedstørrelsen.

Mobiladfærd

På skærme under 768px brede skifter Image Chat til et mobiloptimeret layout. Chatvinduer åbnes i fuldskærm i stedet for at flyde ved siden af markøren. Dette giver bedre brugervenlighed på små skærme, hvor flydende vinduer ville skjule for meget af billedet.

Markørerne selv forbliver synlige og klikbare på deres procentbaserede positioner. Brugere kan stadig se, hvor alle diskussioner er placeret, og trykke på markører for at åbne chatgrænsefladen i fuldskærm.

Dynamisk Billedindlæsning

Det procentbaserede system fungerer korrekt, selv når billeder indlæses asynkront eller ændrer størrelse, efter at siden er indlæst. Widgetten overvåger billedelementet og genberegner markørpositioner, når billedets dimensioner ændres.

Hvis du lazy-loader billeder eller implementerer responsive billeder med forskellige størrelser ved forskellige breakpoints, justeres markørerne automatisk, når billedstørrelsen ændres.

Konsistens på Tværs af Enheder

Fordi koordinaterne gemmes som procenter i databasen, vises en diskussion, der oprettes på en stationær computer, på præcis samme relative placering, når den ses på en tablet eller telefon. Brugere kan samarbejde på tværs af enheder uden nogen positioneringsinkonsistenser.

Dette fungerer i begge retninger. En diskussion, der oprettes ved at trykke på et bestemt sted på en mobil enhed, vises på samme relative position, når den ses på en stor stationær skærm.

Betragtninger om Viewport

Widgetten beregner procenter i forhold til selve billedelementet, ikke viewporten. Det betyder, at rulning på siden eller ændring af browserens vinduesstørrelse ikke påvirker markørpositionerne. Markørerne forbliver forankret til deres placeringer på billedet uanset ændringer i viewporten.

Fremtidssikring af Indhold

Den procentbaserede tilgang gør dine billedediskussioner modstandsdygtige over for ændringer i layout, design eller enhedsøkosystemet. Efterhånden som nye skærmstørrelser og enheder opstår, vil de eksisterende diskussioner fortsætte med at vises korrekt uden at kræve opdateringer eller migreringer.

Tilpasning Internal Link

Understøttelse af mørk tilstand

Image Chat inkluderer indbygget understøttelse af mørk tilstand. Når du sætter hasDarkBackground: true i din konfiguration, justerer chatvinduerne og UI-elementerne sig automatisk, så de fungerer godt på mørke baggrunde.

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

Stilen for mørk tilstand gælder for chatvinduer, markeringsfirkanter og alle interaktive elementer. Hvis dit site har en skiftefunktion for mørk tilstand, kan du geninitialisere widget'en, når tilstanden ændres, eller bruge body-klasse-tilgangen beskrevet nedenfor.

Dynamisk mørk tilstand

Hvis dit sites mørke tilstand styres ved at tilføje en .dark klasse til body-elementet, vil Image Chat UI automatisk respektere dette uden at kræve geninitialisering. Widget'ens styles er designet til at reagere på tilstedeværelsen af denne klasse.

/* Din CSS til mørk tilstand */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

Tilpasset styling med CSS

Du kan tilpasse udseendet af markører, chatvinduer og andre elementer ved hjælp af CSS. Widget'en tilføjer specifikke klasser, som du kan målrette i dit stylesheet.

Chat-firkanterne og vinduerne bruger FastComments' kommentarboble-styling, så eventuelle tilpasninger, du har anvendt på den standard kommenteringswidget, også vil påvirke Image Chat.

Størrelse på chat-firkanter

Optionen chatSquarePercentage kontrollerer størrelsen på de klikbare markører. Standardværdien er 5% af billedets bredde:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 7  // Større, mere synlige firkanter
});

Mindre værdier skaber mere diskrete markører, der blander sig med billedet. Større værdier gør markørerne mere fremtrædende og lettere at klikke på, især på mobile enheder eller med henblik på tilgængelighed.

Mobiladfærd

På skærme under 768px i bredden skifter Image Chat automatisk til et mobiloptimeret layout. Chatvinduer vises i fuld skærm i stedet for at flyde ved siden af markørerne, hvilket giver bedre brugervenlighed på små skærme.

Markørerne forbliver synlige på deres responsive positioner på billedet. Brugere kan trykke på en vilkårlig markør for at åbne den fulde chatgrænseflade. Denne adfærd er indbygget og kræver ingen konfiguration.

Udseende af chatvinduer

Chatvinduer er 300px brede på desktop med en 16px pil, der peger på markøren. Vinduerne positionerer sig automatisk baseret på tilgængelig plads i viewporten ved hjælp af positioneringsklasser som to-right, to-left, to-top og to-bottom.

Du kan tilføje brugerdefineret CSS for at justere farver, skrifttyper, afstande eller andre visuelle egenskaber af disse vinduer. Chatvinduerne bruger samme komponentstruktur som den standard FastComments-widget, så de arver alle globale tilpasninger, du har anvendt.

Forsinket initialisering

Chatvinduer initialiseres ved hover for desktop-brugere eller øjeblikkeligt, når de oprettes. Dette reducerer den indledende load-overhead ved kun at rendere chatgrænsefladen, når brugere rent faktisk interagerer med en markør.

Den forsinkede initialisering sker transparent. Brugerne bemærker ikke nogen forsinkelse, men browseren behøver ikke at rende snesevis af skjulte chatvinduer, hvis du har mange markører på et billede.

Lokalisering

Image Chat understøtter alle de samme lokaliseringsmuligheder som den standard FastComments-widget. Sæt optionen locale for at vise UI-tekst på forskellige sprog:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'fr'  // Fransk
});

FastComments understøtter dusinvis af sprog. Locale-indstillingen påvirker al UI-tekst inklusive prompts, knapper og pladsholdertekst.

Arvede tilpasningsmuligheder

Da Image Chat udvider den standard kommenteringswidget, arver den alle tilpasningsmuligheder fra basiswidget'en. Dette inkluderer brugerdefinerede CSS-klasser, tilpassede oversættelser, avatartilpasning, datoformattering og meget mere.

Se hoveddokumentationen for FastComments-tilpasning for den komplette liste over tilpasningsmuligheder, der er tilgængelige.

Arbejde med tilpassede skrifttyper

Hvis dit site bruger tilpassede skrifttyper, arver Image Chat UI disse skrifttyper fra din sides CSS. Chatvinduerne renderes inde i din sides DOM og respekterer dine eksisterende typografiske indstillinger.

For bedste resultat, sørg for at dine tilpassede skrifttyper er indlæst, før du initialiserer Image Chat, eller accepter at der kan forekomme et kort øjeblik med ustylet tekst, mens skrifttyperne indlæses.

Visuelt design af markører

De firkantede markører har et subtilt visuelt design, der gør dem bemærkelsesværdige uden at overvælde billedet. Du kan tilpasse deres udseende med CSS, hvis du ønsker en anden visuel behandling.

Markørerne inkluderer hover-tilstande, der giver feedback, når brugere bevæger musen over dem. På touch-enheder giver trykinteraktionen øjeblikkelig feedback ved at åbne chatvinduet.

Live-synkronisering Internal Link

Opdateringer i realtid

Image Chat bruger WebSocket-forbindelser til at synkronisere alle samtaler i realtid på tværs af alle tilsluttede brugere. Når nogen opretter en ny markør, tilføjer en kommentar eller sletter en diskussion, ser alle andre brugere, der ser det samme billede, opdateringen med det samme uden at opdatere siden.

Hvordan WebSocket-synkronisering fungerer

Når du initialiserer Image Chat, etablerer widget'en en WebSocket-forbindelse til FastComments-serverne. Denne forbindelse forbliver åben i hele brugerens session og lytter efter opdateringer relateret til det aktuelle billede.

WebSocket-systemet bruger tre typer broadcast-beskeder til Image Chat. new-image-chat-begivenheden udløses, når nogen opretter en ny markør på billedet. image-chat-updated-begivenheden udløses, når nogen opdaterer en eksisterende samtale. deleted-image-chat-begivenheden udløses, når nogen sletter en markør.

Broadcast ID-system

For at forhindre ekkoeffekter, hvor brugere ser deres egne handlinger blive sendt tilbage til dem, indeholder hver opdatering et unikt broadcastId. Når en bruger opretter eller opdaterer en markør, genererer deres klient en UUID til den handling. Når WebSocket'en udsender opdateringen tilbage til alle klienter, ignorerer den oprindelige klient opdateringen, fordi den matcher sit eget broadcastId.

Dette sikrer en glidende interaktion, hvor brugere ser deres ændringer med det samme i brugergrænsefladen uden at skulle vente på rundturen gennem serveren, samtidig med at alle andre brugere får opdateringen.

Forbindelsesrobusthed

Hvis WebSocket-forbindelsen falder på grund af netværksproblemer eller servervedligeholdelse, forsøger widget'en automatisk at genoprette forbindelsen. I genoprettelsesperioden kan brugerne stadig interagere med eksisterende markører, men de vil ikke se realtidsopdateringer fra andre brugere, før forbindelsen er genoprettet.

Når forbindelsen er genoprettet, resynkroniserer widget'en for at sikre, at ingen opdateringer er gået tabt. Dette sker transparent uden at kræve brugerindgriben.

Overvejelser om båndbredde

WebSocket-beskeder er lette og indeholder kun de nødvendige oplysninger til at synkronisere tilstanden. Oprettelse af en ny markør bruger typisk mindre end 1KB båndbredde. Systemet inkluderer også intelligent batching for at reducere beskedfrekvensen i perioder med høj aktivitet.

Dine brugermålinger i FastComments-dashboardet sporer pubSubMessageCount og pubSubBandwidth, så du kan overvåge realtids-synkroniseringsaktivitet på tværs af dine sites.

Synkronisering på tværs af faner

Hvis en bruger har samme side åben i flere browserfaner, vises opdateringer i én fane med det samme i de andre faner. Dette fungerer gennem den samme WebSocket-synkroniseringsmekanisme og kræver ingen yderligere konfiguration.

Brugere kan have dit site åbent på flere enheder samtidigt, og alle vil forblive synkroniserede. En markør oprettet på en stationær computer vises øjeblikkeligt på brugerens tablet, hvis begge enheder ser det samme billede.

Sikkerhed

WebSocket-beskeder sendes over sikre forbindelser (WSS) og inkluderer tenant-validering for at sikre, at brugere kun modtager opdateringer til samtaler, de er autoriserede til at se. Serveren validerer alle handlinger, før de udsendes, for at forhindre uautoriseret adgang eller manipulation.

Offline-adfærd

Når brugere er helt offline, kan de stadig se eksisterende markører, men de kan ikke oprette nye eller se opdateringer fra andre. Widget'en registrerer offline-tilstanden og viser passende beskeder.

Hvis en bruger forsøger at oprette en markør, mens vedkommende er offline, og senere går online igen, vil handlingen fejle i stedet for at blive køet, for at sikre datakonsistens. Brugere bør prøve handlingen igen, når deres forbindelse er gendannet.

Indvirkning på ydeevnen

WebSocket-forbindelsen har minimal indvirkning på ydeevnen. Forbindelsen forbliver inaktiv, når der ikke sker opdateringer, og behandler kun beskeder, når der er aktivitet. På et typisk billede med moderat markøraktivitet bruger WebSocket'en mindre CPU end selve gengivelsen af billedet.

For sider med hundredevis af samtidige brugere og høj aktivitet i oprettelse af markører skalerer systemet horisontalt for at opretholde ydeevnen uden at påvirke individuelle klientforbindelser.

Samarbejdsbrugstilfælde

Realtidssynkroniseringen gør Image Chat særligt stærkt til samarbejdsarbejdsgange. Designteams kan gennemgå mockups sammen, hvor alle ser markørplaceringer i realtid. Kundesupportteams kan i fællesskab annotere skærmbilleder for at identificere problemer. Undervisningsgrupper kan diskutere diagrammer, hvor alle deltagere ser hinandens markører, efterhånden som de oprettes.

Den umiddelbare feedback skaber en mere engagerende og produktiv samarbejdsoplevelse sammenlignet med traditionelle kommentarsystemer, hvor brugere skal opdatere siden for at se opdateringer.

API-reference Internal Link

API Oversigt

Image Chat tilbyder tre REST API-endepunkter til at administrere billedsamtaler programmatisk. Disse endepunkter gør det muligt at hente, oprette og slette markører uden at bruge browser-widget'en.

Alle API-endepunkter kræver autentificering og følger de standard FastComments API-mønstre. Dette er offentlige endepunkter, der godkender via browser-cookies, ikke API-nøgler.

Base-URL

Alle Image Chat API-endepunkter findes under:

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

Autentificering

Disse endepunkter godkender brugere via browser-cookies. De bruger ikke API-nøgler. Brugere skal være logget ind på FastComments i deres browser for at få adgang til disse endepunkter.

Hent alle samtaler

Hent alle billedsamtaler for et bestemt billede.

Endepunkt

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

Parametre

tenantId (sti-parameter, påkrævet) er dit FastComments Tenant ID.

urlId (query-parameter, påkrævet) er billedidentifikatoren, du vil hente samtaler for.

Respons

Responsen indeholder API-status, oplysninger om den aktuelle brugers session hvis autentificeret, et array af samtaler med deres ID'er, URL'er og X/Y-koordinater, en renset URL-identifikator, et flag der angiver om den aktuelle bruger er site-admin eller moderator, samt WebSocket-forbindelsesoplysninger til live-synkronisering inklusive tenantIdWS, urlIdWS, og userIdWS.

Eksempel på forespørgsel

curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
  --cookie "your-session-cookie"

Eksempel på svar

{
  "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"
}

Opret samtale

Opret en ny billedsamtale for en bestemt placering på et billede.

Endepunkt

POST /comment-image-chats/:tenantId

Parametre

tenantId (sti-parameter, påkrævet) er dit FastComments Tenant ID.

Request-body'en skal være JSON og indeholde disse påkrævede felter.

urlId (string, påkrævet) er den grundlæggende sideidentifikator.

windowUrlId (string, påkrævet) er URL'en kombineret med billedkilden og koordinaterne, for eksempel my-page:/images/photo.jpg:25.5:30.2.

pageTitle (string, påkrævet) er sidens titel.

src (string, påkrævet) er billedets kilde-URL.

x (number, påkrævet) er X-koordinaten som en procent (0-100).

y (number, påkrævet) er Y-koordinaten som en procent (0-100).

createdFromCommentId (string, påkrævet) er ID'et på kommentaren, der initierede denne chat.

broadcastId (string, påkrævet) er en UUID til live-synkronisering for at forhindre ekko-effekter.

Respons

Responsen indeholder API-status og ID'et for den nyoprettede samtale.

Eksempel på forespørgsel

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"
  }'

Eksempel på svar

{
  "status": "success",
  "createdChatId": "conv789"
}

Slet samtale

Slet en eksisterende billedsamtale. Dette endepunkt kræver admin- eller moderatorrettigheder, eller samtalen skal være oprettet af den autentificerede bruger.

Endepunkt

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

Parametre

tenantId (sti-parameter, påkrævet) er dit FastComments Tenant ID.

chatId (sti-parameter, påkrævet) er ID'et på samtalen, der skal slettes.

broadcastId (request body, påkrævet) er en UUID til live-synkronisering.

Eksempel på forespørgsel

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"
  }'

Eksempel på svar

{
  "status": "success"
}

Koordinatsystem

X- og Y-koordinaterne gemmes som procenter af billedets dimensioner. X repræsenterer den vandrette position fra venstre kant (0 = venstre kant, 100 = højre kant). Y repræsenterer den lodrette position fra øverste kant (0 = øverste kant, 100 = nederste kant).

Disse procentværdier kan inkludere decimaler for præcision. For eksempel betyder x: 25.5 25.5% fra billedets venstre kant.

Ratebegrænsning

Disse endepunkter er underlagt standard FastComments API-ratebegrænsning. Rate-limit middleware'et anvendes per-tenant for at forhindre misbrug samtidig med at normale brugsmønstre tillades.

Fejlresponser

Alle endepunkter returnerer standard HTTP-statuskoder. Et 400-svar indikerer ugyldige forespørgselsparametre. Et 401-svar betyder, at autentificering mislykkedes. Et 403-svar indikerer utilstrækkelige rettigheder. Et 404-svar betyder, at samtalen ikke blev fundet. Et 429-svar angiver, at rategrænsen er overskredet.

Fejlresponser inkluderer en JSON-body med detaljer:

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

Brugssporing

Oprettelse af samtaler øger din brugsmåling conversationCreateCount. Al WebSocket-synkroniseringsaktivitet øger pubSubMessageCount og pubSubBandwidth. Du kan overvåge disse målinger i dit FastComments-dashboard under brugsanalyse.

Har du spørgsmål?

Det var alt for FastComments Image Chat! Hvis du har spørgsmål, har brug for hjælp til implementeringen eller har forslag til funktioner, så lad os det vide nedenfor eller kontakt vores supportteam.

Se live-demoen på vores demo-side for at se Image Chat i aktion.

Bidrag til denne guide