FastComments Image Chat permet des discussions interactives sur des images en permettant aux utilisateurs de cliquer n'importe où sur une image pour créer des points de discussion. Les utilisateurs peuvent cliquer sur des parties spécifiques des images pour lancer des conversations à propos de ces zones, créant des repères visuels qui montrent où se situent les discussions.
Cette fonctionnalité est idéale pour les retours de conception, les avis sur les produits, les supports pédagogiques contenant des schémas, les galeries de photos avec commentaires, et tout scénario où vous souhaitez des discussions contextuelles ancrées à des emplacements spécifiques d'une image.
Prise en main 
Use Cases
Image Chat fonctionne très bien pour les retours de conception où les équipes doivent discuter d'éléments spécifiques dans des maquettes ou des captures d'écran. Les sites d'avis produits peuvent permettre aux clients de discuter des fonctionnalités visibles sur les photos des produits. Les plateformes éducatives peuvent l'utiliser pour discuter de diagrammes, de cartes ou d'images scientifiques. Les galeries photo peuvent devenir interactives avec des commentaires localisés. Les sites immobiliers peuvent permettre aux visiteurs de discuter des caractéristiques visibles sur les photos des biens.
Quick Start
Commencer avec Image Chat est simple. Vous avez besoin du script FastComments Image Chat, d'un élément d'image ou d'un conteneur avec une image, et d'un objet de configuration contenant votre Tenant ID.
Installation
Add the Image Chat script to your page:
Basic Implementation
Here's a minimal example:
Run 
Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your tableau de bord FastComments.
How It Works
Once initialized, users can click anywhere on the image. When a click occurs, a visual square marker appears at that location and a chat window opens. Other users can see all the markers and click them to view or participate in those discussions. All discussions sync in real-time across all visitors.
The widget uses percentage-based positioning, so markers stay in the correct location even when the image resizes or is viewed on different screen sizes.
Live Demo
You can see Image Chat in action on our page de démonstration en direct.
Next Steps
Now that you have the basics working, you can customize the appearance and behavior in the Configuration Options guide. Check out the Responsive Design guide to understand how percentage-based positioning works. Learn about styling and dark mode support in the Customization guide. For advanced integrations, explore the API Reference.
Frontend Libraries
All FastComments frontend libraries (react, vue, angular, etc) have Image Chat.
Exemples
Exemple de base
La façon la plus simple d'utiliser Image Chat est de cibler un seul élément image. Cet exemple montre comment activer des discussions interactives sur une image :
Run Exemple avec un élément conteneur
Vous pouvez également passer un élément conteneur qui contient une image à l'intérieur :
Run Exemple avec un ID d'URL personnalisé
Par défaut, Image Chat utilise l'URL de la page combinée avec la source de l'image et les coordonnées pour identifier les conversations. Vous pouvez fournir un urlId personnalisé :
Run Ceci est utile si la structure de vos URL change mais que vous souhaitez conserver les mêmes conversations, ou si vous voulez partager les mêmes points de discussion sur plusieurs pages.
Exemple avec le mode sombre
Si votre site a un arrière-plan sombre et que le widget ne le détecte pas automatiquement comme il le devrait, nous pouvons activer manuellement la prise en charge du mode sombre :
Run Exemple avec une taille de carré de chat personnalisée
Vous pouvez ajuster la taille des carrés cliquables qui apparaissent sur l'image. La taille est spécifiée en pourcentage de la largeur de l'image :
Run Exemple avec rappel du compteur de commentaires
Suivez lorsque des commentaires sont ajoutés ou mis à jour en utilisant le callback commentCountUpdated :
Exemple avec plusieurs images
Vous pouvez initialiser Image Chat sur plusieurs images. Chaque image aura ses propres points de discussion indépendants :
Run Options de configuration
Aperçu
FastComments Image Chat étend le widget de commentaires standard FastComments, donc il hérite de toutes les options de configuration du widget de base tout en ajoutant quelques-unes spécifiques aux annotations d'image.
Configuration requise
tenantId
Votre Tenant ID FastComments est requis. Vous pouvez le trouver dans votre FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Options spécifiques à Image Chat
urlId
Par défaut, Image Chat génère un identifiant unique pour chaque conversation basé sur l'URL de la page, la source de l'image et les coordonnées X/Y. Vous pouvez remplacer cela avec un urlId personnalisé.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Ceci est utile lorsque la structure de vos URL peut changer mais que vous souhaitez conserver les mêmes conversations, ou lorsque vous voulez partager des annotations entre plusieurs pages.
chatSquarePercentage
Contrôle la taille des marqueurs cliquables en pourcentage de la largeur de l'image. La valeur par défaut est 5 %, ce qui signifie que chaque marqueur occupe 5 % de la largeur de l'image.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Marqueurs plus grands et plus visibles
});Des valeurs plus petites créent des marqueurs moins intrusifs, mieux adaptés aux images détaillées. Des valeurs plus grandes rendent les marqueurs plus faciles à voir et à cliquer sur des images chargées ou pour les utilisateurs sur appareils mobiles.
hasDarkBackground
Active le style en mode sombre lorsque votre page a un arrière-plan foncé.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Une fonction de rappel qui est déclenchée chaque fois que le nombre de commentaires change. Cela est utile pour mettre à jour des éléments d'interface tels que des badges ou le titre de la page.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Options de configuration héritées
Puisque Image Chat étend le widget de commentaires standard, vous pouvez utiliser n'importe quelle option de configuration du widget FastComments de base. Voici quelques options couramment utilisées :
locale
Définissez la langue de l'interface du widget. FastComments prend en charge des dizaines de langues.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Espagnol
});readonly
Rendre toutes les conversations en lecture seule. Les utilisateurs peuvent voir les marqueurs et discussions existants mais ne peuvent pas en créer de nouveaux ni répondre.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Intégrez-vous à votre système d'authentification en utilisant l'authentification unique (SSO).
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Configuration SSO
}
});Consultez la documentation SSO pour tous les détails sur les options d'authentification.
maxReplyDepth
Contrôlez combien de niveaux de profondeur les réponses peuvent atteindre. Par défaut, Image Chat définit ceci à 0, ce qui signifie que tous les commentaires sont plats (pas de réponses en fil). Vous pouvez changer cela si vous souhaitez des conversations en thread.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Autoriser 3 niveaux d'imbrication
});Configuration interne
Ces options sont automatiquement définies par Image Chat et ne doivent pas être remplacées :
Le productId est automatiquement défini sur 2 pour Image Chat. L'extension floating-chat est automatiquement chargée pour fournir la fonctionnalité de fenêtre de discussion. Le widget détecte automatiquement les appareils mobiles (écrans de moins de 768px de large) et ajuste l'interface en conséquence avec des fenêtres de discussion en plein écran.
Flexibilité de l'élément cible
Le premier paramètre de FastCommentsImageChat peut être soit un élément <img> directement, soit un élément conteneur contenant une image :
// Élément <img> direct
FastCommentsImageChat(document.getElementById('my-image'), config);
// Conteneur contenant une image
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Le widget trouvera automatiquement l'image si vous passez un élément conteneur.
Exemple complet
Voici un exemple montrant plusieurs options de configuration ensemble :
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: {
// Votre configuration SSO
},
maxReplyDepth: 1
});Pour une liste complète de toutes les options de configuration disponibles héritées du widget de base, consultez la documentation principale de configuration FastComments.
Design réactif
Positionnement basé sur des pourcentages
Image Chat utilise des coordonnées basées sur des pourcentages au lieu de coordonnées en pixels pour positionner les marqueurs de discussion sur les images. Lorsqu'un utilisateur clique sur une image, le widget convertit les coordonnées en pixels du clic en pourcentages de la largeur et de la hauteur de l'image. Cette approche garantit que les marqueurs restent à la bonne position quelle que soit la façon dont l'image est affichée.
Par exemple, si un utilisateur clique à 250 pixels du bord gauche d'une image de 1000px de large, le widget enregistre cela comme étant à 25% depuis la gauche. Quand un autre utilisateur affiche la même image à 500px de large sur un appareil mobile, le marqueur apparaît à 125 pixels du bord gauche, ce qui représente toujours 25% de la largeur.
Avantages pour les mises en page adaptatives
Ce système en pourcentage permet à Image Chat de fonctionner de manière fluide sur toutes les tailles d'appareils et orientations. Vos images peuvent être affichées à différentes tailles selon la largeur de l'écran, les règles CSS ou les contraintes du conteneur, mais les marqueurs s'alignent toujours correctement avec les emplacements prévus.
Les utilisateurs sur ordinateurs de bureau avec de grands écrans voient les marqueurs aux mêmes positions relatives que les utilisateurs sur smartphones. Les marqueurs se redimensionnent proportionnellement avec l'image elle-même.
Mise à l'échelle de l'image et rapport d'aspect
Tant que votre image conserve son rapport d'aspect lors du redimensionnement (ce qui est le comportement par défaut du navigateur), les marqueurs basés sur des pourcentages resteront parfaitement alignés. Le widget part du principe que les images se redimensionnent proportionnellement et calcule les positions en se basant sur cette hypothèse.
Si vous appliquez du CSS qui déforme le rapport d'aspect de l'image (comme en utilisant object-fit: cover avec des dimensions spécifiques), les positions des marqueurs peuvent ne pas s'aligner correctement. Pour de meilleurs résultats, laissez les images se redimensionner naturellement ou utilisez object-fit: contain pour conserver le rapport d'aspect.
Taille des carrés de chat
La taille visuelle des marqueurs de chat est également basée sur des pourcentages. L'option de configuration chatSquarePercentage est par défaut à 5%, ce qui signifie que chaque carré représente 5% de la largeur de l'image. Cela garantit un poids visuel cohérent sur différentes tailles d'images.
Sur une image de 1000px de large avec le paramètre par défaut de 5%, les marqueurs font 50px de côté. Sur une image de 500px de large, les mêmes marqueurs font 25px de côté. Ils restent proportionnels à la taille de l'image.
Comportement sur mobile
Sur les écrans de moins de 768px de large, Image Chat passe à une disposition optimisée pour mobile. Les fenêtres de discussion s'ouvrent en plein écran au lieu de flotter à côté du marqueur. Ceci offre une meilleure utilisabilité sur les petits écrans où les fenêtres flottantes cacheraient trop l'image.
Les marqueurs eux-mêmes restent visibles et cliquables à leurs positions basées sur des pourcentages. Les utilisateurs peuvent toujours voir où se situent toutes les discussions et toucher les marqueurs pour ouvrir l'interface de chat en plein écran.
Chargement dynamique des images
Le système basé sur des pourcentages fonctionne correctement même lorsque les images se chargent de manière asynchrone ou changent de taille après le chargement de la page. Le widget surveille l'élément image et recalculera les positions des marqueurs chaque fois que les dimensions de l'image changent.
Si vous chargez les images paresseusement (lazy-loading) ou si vous mettez en œuvre des images responsives avec différentes tailles selon les points d'arrêt, les marqueurs s'ajusteront automatiquement lorsque la taille de l'image changera.
Cohérence entre appareils
Parce que les coordonnées sont stockées en pourcentages dans la base de données, une discussion créée sur un ordinateur de bureau apparaît exactement au même emplacement relatif lorsqu'elle est consultée sur une tablette ou un téléphone. Les utilisateurs peuvent collaborer entre appareils sans incohérences de positionnement.
Cela fonctionne dans les deux sens. Une discussion créée en touchant un emplacement précis sur un appareil mobile apparaîtra au même emplacement relatif lorsqu'elle sera consultée sur un grand écran d'ordinateur de bureau.
Considérations liées à la zone d'affichage
Le widget calcule les pourcentages par rapport à l'élément image lui-même, et non par rapport à la zone d'affichage. Cela signifie que faire défiler la page ou modifier la taille de la fenêtre du navigateur n'affecte pas les positions des marqueurs. Les marqueurs restent ancrés à leurs emplacements sur l'image, indépendamment des changements de la zone d'affichage.
Préparation du contenu pour l'avenir
L'approche basée sur des pourcentages rend vos discussions sur les images résilientes aux changements de mise en page, de design ou d'écosystème d'appareils. À mesure que de nouvelles tailles d'écran et de nouveaux appareils apparaissent, les discussions existantes continueront de s'afficher correctement sans nécessiter de mises à jour ou de migrations.
Personnalisation
Prise en charge du mode sombre
Image Chat inclut une prise en charge du mode sombre intégrée. Lorsque vous définissez hasDarkBackground: true dans votre configuration, les fenêtres de chat et les éléments d'interface s'ajustent automatiquement pour bien fonctionner sur des arrière-plans sombres.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Le style du mode sombre s'applique aux fenêtres de chat, aux carrés marqueurs et à tous les éléments interactifs. Si votre site dispose d'un commutateur de mode sombre, vous pouvez réinitialiser le widget lorsque le mode change, ou utiliser l'approche de classe body décrite ci-dessous.
Mode sombre dynamique
Si le mode sombre de votre site est contrôlé en ajoutant une classe .dark à l'élément body, l'interface Image Chat respectera automatiquement cela sans nécessiter de réinitialisation. Les styles du widget sont conçus pour répondre à la présence de cette classe.
/* Votre CSS pour le mode sombre */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Personnalisation via CSS
Vous pouvez personnaliser l'apparence des marqueurs, des fenêtres de chat et d'autres éléments en utilisant du CSS. Le widget ajoute des classes spécifiques que vous pouvez cibler dans votre feuille de style.
Les carrés et fenêtres de chat utilisent le système de style de bulles de commentaire FastComments, donc toutes les personnalisations que vous avez appliquées au widget de commentaire standard affecteront également Image Chat.
Taille des carrés de chat
L'option chatSquarePercentage contrôle la taille des marqueurs cliquables. La valeur par défaut est 5 % de la largeur de l'image :
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Carrés plus grands et plus visibles
});Des valeurs plus petites créent des marqueurs plus subtils qui se fondent dans l'image. Des valeurs plus grandes rendent les marqueurs plus visibles et plus faciles à cliquer, notamment sur les appareils mobiles ou pour des raisons d'accessibilité.
Comportement sur mobile
Sur les écrans de moins de 768px de large, Image Chat bascule automatiquement vers une mise en page optimisée pour mobile. Les fenêtres de chat apparaissent en plein écran au lieu de flotter à côté des marqueurs, offrant une meilleure utilisabilité sur les petits écrans.
Les marqueurs restent visibles à leurs positions adaptatives sur l'image. Les utilisateurs peuvent toucher un marqueur pour ouvrir l'interface de chat en plein écran. Ce comportement est intégré et ne nécessite aucune configuration.
Apparence des fenêtres de chat
Les fenêtres de chat mesurent 300px de large sur desktop avec une flèche de 16px pointant vers le marqueur. Les fenêtres se positionnent automatiquement en fonction de l'espace disponible dans la fenêtre d'affichage, en utilisant des classes de positionnement comme to-right, to-left, to-top et to-bottom.
Vous pouvez ajouter du CSS personnalisé pour ajuster les couleurs, les polices, les espacements ou d'autres propriétés visuelles de ces fenêtres. Les fenêtres de chat utilisent la même structure de composant que le widget FastComments standard, elles héritent donc de toutes les personnalisations globales que vous avez appliquées.
Initialisation différée
Les fenêtres de chat s'initialisent au survol pour les utilisateurs desktop ou immédiatement lorsqu'elles sont créées. Cela réduit la charge initiale en ne rendant l'interface de chat que lorsque les utilisateurs interagissent réellement avec un marqueur.
L'initialisation différée se produit de manière transparente. Les utilisateurs ne remarquent aucun délai, mais le navigateur n'a pas besoin de rendre des dizaines de fenêtres de chat cachées si vous avez de nombreux marqueurs sur une image.
Localisation
Image Chat prend en charge toutes les mêmes options de localisation que le widget FastComments standard. Définissez l'option locale pour afficher le texte de l'interface dans différentes langues :
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Français
});FastComments prend en charge des dizaines de langues. Le paramètre locale affecte tous les textes de l'interface, y compris les invites, les boutons et le texte des champs d'espace réservé.
Options de personnalisation héritées
Puisque Image Chat étend le widget de commentaires standard, il hérite de toutes les options de personnalisation du widget de base. Cela inclut les classes CSS personnalisées, les traductions personnalisées, la personnalisation des avatars, le formatage des dates, et bien plus encore.
Consultez la documentation principale de personnalisation de FastComments pour la liste complète des options de personnalisation disponibles.
Utilisation de polices personnalisées
Si votre site utilise des polices personnalisées, l'interface Image Chat héritera de ces polices depuis le CSS de votre page. Les fenêtres de chat sont rendues dans le DOM de votre page et respectent vos paramètres typographiques existants.
Pour de meilleurs résultats, assurez-vous que vos polices personnalisées sont chargées avant d'initialiser Image Chat, ou acceptez qu'il puisse y avoir un bref flash de texte non stylé pendant le chargement des polices.
Design visuel des marqueurs
Les marqueurs carrés ont un design visuel subtil qui les rend remarquables sans surcharger l'image. Vous pouvez personnaliser leur apparence avec du CSS si vous souhaitez un traitement visuel différent.
Les marqueurs incluent des états de survol qui fournissent un retour visuel lorsque les utilisateurs déplacent leur souris dessus. Sur les appareils tactiles, l'interaction par toucher fournit un retour immédiat en ouvrant la fenêtre de chat.
Synchronisation en temps réel
Real-Time Updates
Image Chat utilise des connexions WebSocket pour synchroniser toutes les conversations en temps réel entre tous les utilisateurs connectés. Lorsqu'une personne crée un nouveau marqueur, ajoute un commentaire ou supprime une discussion, tous les autres utilisateurs visualisant la même image voient la mise à jour immédiatement sans recharger.
How WebSocket Sync Works
Lorsque vous initialisez Image Chat, le widget établit une connexion WebSocket avec les serveurs FastComments. Cette connexion reste ouverte pendant la durée de la session de l'utilisateur et écoute les mises à jour liées à l'image en cours.
Le système WebSocket utilise trois types de messages de diffusion pour Image Chat. L'événement new-image-chat se déclenche lorsqu'une personne crée un nouveau marqueur sur l'image. L'événement image-chat-updated se déclenche lorsqu'une personne met à jour une conversation existante. L'événement deleted-image-chat se déclenche lorsqu'une personne supprime un marqueur.
Broadcast ID System
Pour éviter les effets d'écho où les utilisateurs voient leurs propres actions leur être renvoyées, chaque mise à jour inclut un broadcastId unique. Lorsqu'un utilisateur crée ou met à jour un marqueur, son client génère un UUID pour cette opération. Lorsque le WebSocket diffuse la mise à jour à tous les clients, le client d'origine ignore la mise à jour parce qu'elle correspond à son propre broadcastId.
Cela garantit une interaction fluide où les utilisateurs voient leurs modifications immédiatement dans l'interface utilisateur sans attendre l'aller-retour via le serveur, tout en assurant que tous les autres utilisateurs reçoivent la mise à jour.
Connection Resilience
Si la connexion WebSocket est interrompue en raison de problèmes réseau ou de maintenance serveur, le widget tente automatiquement de se reconnecter. Pendant la période de reconnexion, les utilisateurs peuvent toujours interagir avec les marqueurs existants, mais ils ne verront pas les mises à jour en temps réel des autres utilisateurs tant que la connexion n'est pas rétablie.
Une fois reconnecté, le widget resynchronise pour s'assurer qu'aucune mise à jour n'a été manquée. Cela se produit de manière transparente sans nécessiter l'intervention de l'utilisateur.
Bandwidth Considerations
Les messages WebSocket sont légers et contiennent uniquement les informations essentielles nécessaires pour synchroniser l'état. La création d'un nouveau marqueur utilise généralement moins de 1 Ko de bande passante. Le système inclut également un regroupement intelligent pour réduire la fréquence des messages pendant les périodes d'activité élevée.
Vos métriques d'utilisation dans le tableau de bord FastComments suivent pubSubMessageCount et pubSubBandwidth afin que vous puissiez surveiller l'activité de synchronisation en temps réel sur vos sites.
Cross-Tab Synchronization
Si un utilisateur a la même page ouverte dans plusieurs onglets du navigateur, les mises à jour dans un onglet apparaissent immédiatement dans les autres onglets. Cela fonctionne via le même mécanisme de synchronisation WebSocket et ne nécessite aucune configuration supplémentaire.
Les utilisateurs peuvent avoir votre site ouvert sur plusieurs appareils simultanément, et tous resteront synchronisés. Un marqueur créé sur un ordinateur de bureau apparaît instantanément sur la tablette de l'utilisateur si les deux appareils affichent la même image.
Security
Les messages WebSocket sont transmis sur des connexions sécurisées (WSS) et incluent une validation du locataire pour garantir que les utilisateurs ne reçoivent que les mises à jour des conversations qu'ils sont autorisés à voir. Le serveur valide toutes les opérations avant de les diffuser afin d'empêcher tout accès ou manipulation non autorisée.
Offline Behavior
Lorsque les utilisateurs sont complètement hors ligne, ils peuvent toujours consulter les marqueurs existants mais ne peuvent pas en créer de nouveaux ni voir les mises à jour des autres. Le widget détecte l'état hors ligne et affiche un message approprié.
Si un utilisateur tente de créer un marqueur en étant hors ligne puis revient en ligne, l'opération échouera plutôt que d'être mise en file d'attente, garantissant la cohérence des données. Les utilisateurs doivent réessayer l'opération une fois leur connexion rétablie.
Performance Impact
La connexion WebSocket a un impact minimal sur les performances. La connexion reste en veille lorsqu'aucune mise à jour n'a lieu et ne traite les messages que lorsqu'il y a de l'activité. Sur une image typique avec une activité modérée de marqueurs, le WebSocket utilise moins de CPU que le rendu de l'image lui‑même.
Pour les pages avec des centaines d'utilisateurs simultanés et une forte création de marqueurs, le système s'étend horizontalement pour maintenir les performances sans impacter les connexions des clients individuels.
Collaborative Use Cases
La synchronisation en temps réel rend Image Chat particulièrement puissant pour les flux de travail collaboratifs. Les équipes de conception peuvent revoir des maquettes ensemble en voyant tous les emplacements de marqueurs en temps réel. Les équipes d'assistance client peuvent annoter des captures d'écran de manière collaborative pour identifier des problèmes. Les groupes éducatifs peuvent discuter de diagrammes avec tous les participants voyant les marqueurs des autres au fur et à mesure de leur création.
Le retour immédiat crée une expérience collaborative plus engageante et productive comparée aux systèmes de commentaires traditionnels où les utilisateurs doivent rafraîchir pour voir les mises à jour.
Référence de l'API
API Overview
Image Chat fournit trois points de terminaison REST API pour gérer les conversations d'image de manière programmatique. Ces points de terminaison vous permettent de récupérer, créer et supprimer des marqueurs sans utiliser le widget du navigateur.
Tous les points de terminaison API requièrent une authentification et suivent les modèles standard de l'API FastComments. Ce sont des points de terminaison publics qui s'authentifient via des cookies de navigateur, et non via des clés API.
Base URL
Tous les points de terminaison de l'API Image Chat se trouvent sous :
https://fastcomments.com/comment-image-chatsAuthentication
Ces points de terminaison authentifient les utilisateurs via des cookies de navigateur. Ils n'utilisent pas de clés API. Les utilisateurs doivent être connectés à FastComments dans leur navigateur pour accéder à ces points de terminaison.
Get All Conversations
Récupère toutes les conversations d'image pour une image donnée.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Parameters
tenantId (path parameter, required) est votre FastComments Tenant ID.
urlId (query parameter, required) est l'identifiant de l'image pour lequel vous souhaitez récupérer les conversations.
Response
La réponse inclut le statut de l'API, les informations de session de l'utilisateur courant si authentifié, un tableau de conversations avec leurs IDs, URLs et coordonnées X/Y, un identifiant d'URL nettoyé, un indicateur précisant si l'utilisateur courant est administrateur ou modérateur du site, et les détails de connexion WebSocket pour la synchronisation en direct incluant tenantIdWS, urlIdWS et userIdWS.
Example Request
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Example Response
{
"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"
}Create Conversation
Créer une nouvelle conversation d'image pour un emplacement spécifique sur une image.
Endpoint
POST /comment-image-chats/:tenantIdParameters
tenantId (path parameter, required) est votre FastComments Tenant ID.
Le corps de la requête doit être en JSON et inclure les champs requis suivants.
urlId (string, required) est l'identifiant de la page de base.
windowUrlId (string, required) est l'URL combinée avec la source de l'image et les coordonnées, par exemple my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, required) est le titre de la page.
src (string, required) est l'URL source de l'image.
x (number, required) est la coordonnée X en pourcentage (0-100).
y (number, required) est la coordonnée Y en pourcentage (0-100).
createdFromCommentId (string, required) est l'ID du commentaire qui a initié ce chat.
broadcastId (string, required) est un UUID pour la synchronisation en direct afin d'éviter les effets d'écho.
Response
La réponse inclut le statut de l'API et l'ID de la conversation nouvellement créée.
Example Request
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"
}'Example Response
{
"status": "success",
"createdChatId": "conv789"
}Delete Conversation
Supprime une conversation d'image existante. Ce point de terminaison nécessite des permissions d'administrateur ou de modérateur, ou la conversation doit avoir été créée par l'utilisateur authentifié.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdParameters
tenantId (path parameter, required) est votre FastComments Tenant ID.
chatId (path parameter, required) est l'ID de la conversation à supprimer.
broadcastId (request body, required) est un UUID pour la synchronisation en direct.
Example Request
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"
}'Example Response
{
"status": "success"
}Coordinate System
Les coordonnées X et Y sont stockées en tant que pourcentages des dimensions de l'image. X représente la position horizontale depuis le bord gauche (0 = bord gauche, 100 = bord droit). Y représente la position verticale depuis le bord supérieur (0 = bord supérieur, 100 = bord inférieur).
Ces valeurs en pourcentage peuvent inclure des décimales pour plus de précision. Par exemple, x: 25.5 signifie 25.5% depuis le bord gauche de l'image.
Rate Limiting
Ces points de terminaison sont soumis à la limitation de débit standard de l'API FastComments. Le middleware de limitation de débit s'applique par tenant pour prévenir les abus tout en permettant des schémas d'utilisation normaux.
Error Responses
Tous les points de terminaison renvoient des codes de statut HTTP standards. Une réponse 400 indique des paramètres de requête invalides. Une réponse 401 signifie que l'authentification a échoué. Une réponse 403 indique des permissions insuffisantes. Une réponse 404 signifie que la conversation n'a pas été trouvée. Une réponse 429 indique que la limite de débit a été dépassée.
Les réponses d'erreur incluent un corps JSON avec des détails :
{
"status": "error",
"message": "Conversation not found"
}Usage Tracking
La création de conversations incrémente votre métrique d'utilisation conversationCreateCount. Toute activité de synchronisation WebSocket incrémente pubSubMessageCount et pubSubBandwidth. Vous pouvez surveiller ces métriques dans votre tableau de bord FastComments sous usage analytics.
Des questions ?
Voilà pour FastComments Image Chat ! Si vous avez des questions, besoin d'aide pour la mise en œuvre, ou des suggestions de fonctionnalités, faites-le nous savoir ci-dessous ou contactez notre équipe d'assistance.
Découvrez la démo en direct sur notre page de démonstration pour voir Image Chat en action.