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 
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:
Grundlæggende implementering
Here's a minimal example:
Run 
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
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:
Run Eksempel med container-element
Du kan også give et container-element, der har et billede indeni:
Run 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:
Run 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:
Run 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:
Run Eksempel med kommentarantal-callback
Hold styr på, hvornår kommentarer tilføjes eller opdateres ved hjælp af commentCountUpdated-callback'en:
Eksempel med flere billeder
Du kan initialisere Image Chat på flere billeder. Hvert billede får sine egne uafhængige diskussionspunkter:
Run Konfigurationsmuligheder
Oversigt
FastComments Image Chat udvider den standard FastComments-kommentar-widget, så den arver alle konfigurationsmuligheder fra base-widget'en samtidig med, at den tilføjer nogle få, som er specifikke for billedannoteringer.
Påkrævet konfiguration
tenantId
Din FastComments Tenant ID er påkrævet. Du kan finde denne i dit FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Image Chat-specifikke indstillinger
urlId
Som standard genererer Image Chat et unikt id for hver samtale baseret på side-URL'en, billedkilden og X/Y-koordinaterne. Du kan tilsidesætte dette med et brugerdefineret urlId.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Dette er nyttigt, når din URL-struktur kan ændre sig, men du ønsker at bevare de samme samtaler, eller når du ønsker at dele annotationer på tværs af flere sider.
chatSquarePercentage
Kontrollerer størrelsen af de klikbare chatmarkører som en procentdel af billedets bredde. Standard 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, som fungerer bedre til detaljerede billeder. Større værdier gør markørerne lettere at se og klikke på for travle billeder eller for brugere på mobile enheder.
hasDarkBackground
Aktivér mørk tilstand-styling, når din side har en mørk baggrund.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
En callback-funktion, der udløses, når antallet af kommentarer ændres. Dette er nyttigt til at opdatere UI-elementer som badges eller sidenavne.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Arvede konfigurationsmuligheder
Da Image Chat udvider den standard kommentar-widget, kan du bruge enhver konfigurationsmulighed fra base FastComments-widget'en. Her er nogle almindeligt brugte muligheder:
locale
Indstil sproget for widget-UI'en. FastComments understøtter adskillige 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 and simpleSSO
Integrer 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
Kontroller, hvor mange niveauer dybt svar kan gå. Som standard sætter Image Chat dette 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 overskrives:
productId bliver automatisk sat til 2 for Image Chat. floating-chat-udvidelsen indlæses automatisk for at levere chatvinduets funktionalitet. Widget'en registrerer automatisk mobile enheder (skærme under 768px i bredden) og tilpasser UI'en tilsvarende med chatvinduer i fuldskærm.
Fleksibilitet for mål-elementet
Første parameter til FastCommentsImageChat kan være enten et <img>-element direkte eller et container-element med et billede indeni:
// Direkte billedelement
FastCommentsImageChat(document.getElementById('my-image'), config);
// Container med billede indeni
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Widget'en finder billedet automatisk, hvis du sender et container-element.
Komplet eksempel
Her er et eksempel, der viser flere konfigurationsmuligheder samlet:
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 arvet fra base-widget'en, se hoveddokumentationen for FastComments-konfiguration.
Responsivt design
Percentage-Based Positioning
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 pixelkoordinaterne for klikket til procenter af billedets bredde og højde. Denne tilgang sikrer, at markørerne forbliver korrekt placeret 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 ved 500px bredde på en mobil enhed, vises markøren 125 pixels fra venstre, hvilket stadig er 25% af bredden.
Benefits for Responsive Layouts
Dette procent-system får Image Chat til at fungere problemfrit på tværs af alle enhedsstørrelser og orienteringer. Dine billeder kan blive vist i forskellige størrelser afhængigt af skærmbredden, CSS-regler eller containerbegrænsninger, men markørerne aligner altid korrekt med 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.
Image Scaling and Aspect Ratio
Så længe dit billede bevarer sit billedforhold ved skalering (hvilket er standardadfærden i browseren), forbliver de procentbaserede markører perfekt justerede. Widgetten antager, at billeder skalerer proportionalt og beregner positioner baseret på denne antagelse.
Hvis du anvender CSS, der fordrejer billedets billedforhold (som ved brug af object-fit: cover med specifikke dimensioner), kan markørpositionerne muligvis ikke alignere korrekt. For bedst resultat, lad billederne skalere naturligt eller brug object-fit: contain for at bevare billedforholdet.
Chat Square Sizing
Den visuelle størrelse af chatmarkørerne er også procentbaseret. The chatSquarePercentage configuration option defaults to 5%, meaning each square is 5% of the image width. Dette sikrer en konsekvent visuel vægt på tværs af forskellige billedstørrelser.
På et 1000px bredt billede med standardindstillingen på 5% er markørerne 50px kvadratiske. På et 500px bredt billede er de samme markører 25px kvadratiske. De forbliver proportionale i forhold til billedets størrelse.
Mobile Behavior
På skærme under 768px bredde skifter Image Chat til et mobiloptimeret layout. Chatvinduer åbnes i fuld skærm i stedet for at flyde ved siden af markøren. Dette giver bedre brugervenlighed på små skærme, hvor flydende vinduer ville dække for meget af billedet.
Selve markørerne 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 fuld skærm.
Dynamic Image Loading
Det procentbaserede system fungerer korrekt selv når billeder indlæses asynkront eller ændrer størrelse efter siden er indlæst. Widgetten overvåger billedelementet og genberegner markørpositioner hver gang billedets dimensioner ændrer sig.
Hvis du bruger lazy-loading af billeder eller implementerer responsive billeder med forskellige størrelser ved forskellige brudpunkter, justerer markørerne sig automatisk, når billedets størrelse ændres.
Cross-Device Consistency
Fordi koordinater gemmes som procenter i databasen, vises en diskussion oprettet 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 positioneringsinkonsistenser.
Dette virker tovejssikkert. En diskussion oprettet ved at trykke på et specifikt sted på en mobil enhed vises på samme relative position, når den ses på en stor desktopskærm.
Viewport Considerations
Widgetten beregner procenter relativt til selve billedelementet, ikke visningsområdet. Det betyder, at scrolling af siden eller ændring af browservinduesstørrelse ikke påvirker markørpositionerne. Markørerne forbliver forankrede til deres placeringer på billedet uanset ændringer i visningsområdet.
Future-Proofing Content
Den procentbaserede tilgang gør dine billeddiskussioner robuste over for ændringer i layout, design eller enhedsøkosystemet. Efterhånden som nye skærmstørrelser og enheder dukker op, vil de eksisterende diskussioner fortsætte med at blive vist korrekt uden at kræve opdateringer eller migreringer.
Tilpasning
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
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
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-chatsAutentificering
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/:tenantIdParametre
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/:chatIdParametre
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 det for FastComments Image Chat! Hvis du har spørgsmål, har brug for hjælp til implementering eller har forslag til funktioner, så giv os besked nedenfor eller kontakt vores supportteam.
Se live-demoen på vores demo-side for at se Image Chat i aktion.