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 sur ces zones, créant des marqueurs visuels qui indiquent où se situent les discussions.
Cette fonctionnalité est parfaite pour la rétroaction de design, les critiques de produits, les supports pédagogiques avec des diagrammes, les galeries de photos avec commentaires, et tout scénario où vous souhaitez des discussions contextuelles ancrées à des emplacements précis sur une image.
Premiers pas 
Cas d'utilisation
Image Chat est idéal pour les retours de conception lorsque les équipes doivent discuter d'éléments spécifiques dans des maquettes ou des captures d'écran. Les sites d'avis sur les produits peuvent permettre aux clients de discuter de caractéristiques précises visibles sur des photos de 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 d'éléments visibles sur les photos des propriétés.
Démarrage rapide
Commencer avec Image Chat est simple. Vous avez besoin du script FastComments Image Chat, d'un élément image ou d'un conteneur contenant une image, et d'un objet de configuration avec votre Tenant ID.
Installation
Ajoutez le script Image Chat à votre page :
Implémentation de base
Voici un exemple minimal :
Run 
Remplacez 'demo' par votre véritable FastComments Tenant ID si ce n'est pas déjà fait, que vous pouvez trouver dans votre tableau de bord FastComments.
Comment ça fonctionne
Une fois initialisé, les utilisateurs peuvent cliquer n'importe où sur l'image. Lorsqu'un clic se produit, un marqueur carré visuel apparaît à cet emplacement et une fenêtre de discussion s'ouvre. Les autres utilisateurs peuvent voir tous les marqueurs et cliquer dessus pour voir ou participer à ces discussions. Toutes les discussions se synchronisent en temps réel entre tous les visiteurs.
Le widget utilise un positionnement en pourcentage, donc les marqueurs restent à la bonne position même lorsque l'image redimensionne ou est affichée sur différentes tailles d'écran.
Démo en direct
Vous pouvez voir Image Chat en action sur notre page de démonstration en direct.
Prochaines étapes
Maintenant que vous avez les bases en place, vous pouvez personnaliser l'apparence et le comportement dans le guide des options de configuration. Consultez le guide de conception réactive pour comprendre comment fonctionne le positionnement en pourcentage. Informez-vous sur le style et la prise en charge du mode sombre dans le guide de personnalisation. Pour des intégrations avancées, explorez la Référence de l'API.
Bibliothèques frontend
Toutes les bibliothèques frontend FastComments (react, vue, angular, etc) incluent 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 :
Run Exemple avec un ID 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 fond 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 personnalisée des carrés de chat
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 une fonction de rappel du nombre de commentaires
Suivez quand des commentaires sont ajoutés ou mis à jour en utilisant le rappel 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
Overview
FastComments Image Chat étend le widget de commentaires FastComments standard, donc il hérite de toutes les options de configuration du widget de base tout en ajoutant quelques options spécifiques aux annotations d'images.
Required Configuration
tenantId
Votre ID de locataire FastComments est requis. Vous pouvez le trouver dans votre FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Image Chat Specific Options
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 ceci par un urlId personnalisé.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Ceci est utile lorsque la structure de votre 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 de chat en pourcentage de la largeur de l'image. La valeur par défaut est de 5 %, ce qui signifie que chaque marqueur représente 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 qui conviennent mieux aux images détaillées. Des valeurs plus grandes rendent les marqueurs plus faciles à voir et à cliquer sur des images chargées d'éléments ou pour les utilisateurs sur appareils mobiles.
hasDarkBackground
Active le style en mode sombre lorsque votre page a un fond sombre.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Une fonction de rappel qui se déclenche chaque fois que le nombre de commentaires change. Ceci est utile pour mettre à jour des éléments d'interface utilisateur comme des badges ou les titres de page.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Inherited Configuration Options
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
Rendez 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 votre système d'authentification en utilisant Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Configuration SSO
}
});Consultez la documentation SSO pour les détails complets sur les options d'authentification.
maxReplyDepth
Contrôlez combien de niveaux de réponses peuvent être imbriqués. Par défaut, Image Chat définit ceci à 0, ce qui signifie que tous les commentaires sont plats (pas de réponses imbriquées). Vous pouvez changer ceci si vous souhaitez des conversations en fils.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Autoriser 3 niveaux d'imbrication
});Internal Configuration
Ces options sont définies automatiquement par Image Chat et ne doivent pas être remplacées :
The productId is automatically set to 2 for Image Chat. The floating-chat extension is automatically loaded to provide the chat window functionality. The widget automatically detects mobile devices (screens under 768px wide) and adjusts the UI accordingly with fullscreen chat windows.
Target Element Flexibility
Le premier paramètre de FastCommentsImageChat peut être soit un élément <img> directement, soit un élément conteneur contenant une image :
// Élément image direct
FastCommentsImageChat(document.getElementById('my-image'), config);
// Conteneur contenant l'image
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Le widget trouvera automatiquement l'image si vous passez un élément conteneur.
Complete Example
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.
Conception adaptative
Positionnement basé sur les pourcentages
Image Chat utilise des coordonnées basées sur des pourcentages plutôt que des 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 à l'emplacement correct, peu importe 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% du bord gauche. Lorsqu'un autre utilisateur affiche la même image à 500px de largeur 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 basé sur les pourcentages permet à Image Chat de fonctionner de manière fluide sur toutes les tailles d'appareils et orientations. Vos images peuvent être affichées à des tailles différentes 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 des ordinateurs de bureau avec de grands moniteurs voient les marqueurs aux mêmes positions relatives que les utilisateurs sur des smartphones à petit écran. Les marqueurs s'ajustent proportionnellement à l'image elle-même.
Redimensionnement 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 les pourcentages resteront parfaitement alignés. Le widget suppose que les images sont redimensionnées proportionnellement et calcule les positions en fonction de 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 discussion
La taille visuelle des marqueurs de discussion est également basée sur des pourcentages. L'option de configuration chatSquarePercentage est réglée par défaut sur 5%, ce qui signifie que chaque carré fait 5% de la largeur de l'image. Cela garantit un poids visuel cohérent pour différentes tailles d'image.
Sur une image de 1000px de large avec le réglage par défaut de 5%, les marqueurs mesurent 50px de côté. Sur une image de 500px de large, les mêmes marqueurs mesurent 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. Cela améliore l'utilisabilité sur les petits écrans où les fenêtres flottantes masquereraient 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 trouvent les discussions et appuyer sur les marqueurs pour ouvrir l'interface de discussion en plein écran.
Chargement dynamique des images
Le système basé sur les pourcentages fonctionne correctement même lorsque les images se chargent de façon asynchrone ou changent de taille après le chargement de la page. Le widget surveille l'élément image et recalcule les positions des marqueurs chaque fois que les dimensions de l'image changent.
Si vous chargez les images paresseusement ou implémentez des images réactives avec différentes tailles selon les breakpoints, les marqueurs s'ajustent automatiquement lorsque la taille de l'image change.
Cohérence entre appareils
Étant donné 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 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 tapotant un emplacement précis sur un appareil mobile apparaît au même emplacement relatif lorsqu'elle est consultée sur un grand moniteur de bureau.
Considérations liées au viewport
Le widget calcule les pourcentages par rapport à l'élément image lui‑même, et non par rapport au viewport. Cela signifie que le défilement de la page ou le changement de taille de la fenêtre du navigateur n'affecte pas les positions des marqueurs. Les marqueurs restent ancrés à leurs emplacements sur l'image, quel que soit le changement du viewport.
Pérennisation du contenu
L'approche basée sur les 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 intégrée du mode sombre. Lorsque vous définissez hasDarkBackground: true dans votre configuration, les fenêtres de discussion et les éléments de l'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 discussion, 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 par 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 d'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 avec CSS
Vous pouvez personnaliser l'apparence des marqueurs, des fenêtres de discussion 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 les fenêtres de chat utilisent le système de style de bulles de commentaire de FastComments, donc toutes les personnalisations que vous avez appliquées au widget de commentaires 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 de 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 proéminents 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 discussion 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 réactives sur l'image. Les utilisateurs peuvent taper n'importe quel marqueur pour ouvrir l'interface de discussion en plein écran. Ce comportement est intégré et ne nécessite aucune configuration.
Apparence des fenêtres de discussion
Les fenêtres de discussion mesurent 300px de large sur bureau 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 discussion 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 discussion s'initialisent au survol pour les utilisateurs sur bureau ou immédiatement lorsqu'elles sont créées. Cela réduit la charge initiale en ne rendant l'interface de discussion 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 discussion 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 réglage de la locale affecte tout le texte de l'interface utilisateur, y compris les invites, les boutons et le texte des espaces réservés.
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 d'Image Chat héritera de ces polices depuis le CSS de votre page. Les fenêtres de discussion sont rendues à l'intérieur du 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 stylisé pendant le chargement des polices.
Design visuel des marqueurs
Les marqueurs carrés ont un design visuel subtil qui les rend remarquables sans dominer l'image. Vous pouvez personnaliser leur apparence avec du CSS si vous souhaitez un traitement visuel différent.
Les marqueurs incluent des états au survol qui fournissent un retour visuel lorsque les utilisateurs déplacent leur souris dessus. Sur les appareils tactiles, l'interaction par tapotement fournit un retour immédiat en ouvrant la fenêtre de discussion.
Synchronisation en temps réel
Mises à jour en temps réel
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 qui consultent la même image voient la mise à jour immédiatement sans rafraîchir.
Fonctionnement de la synchronisation WebSocket
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.
Système d'identifiant de diffusion
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 sans attendre l'aller-retour via le serveur, tout en s'assurant que tous les autres utilisateurs reçoivent la mise à jour.
Résilience de la connexion
Si la connexion WebSocket est interrompue en raison de problèmes réseau ou de maintenance du 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 d'intervention de l'utilisateur.
Considérations sur la bande passante
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 groupement 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.
Synchronisation entre onglets
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 requiert 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.
Sécurité
Les messages WebSocket sont transmis via des connexions sécurisées (WSS) et incluent une validation du locataire pour s'assurer 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 pour prévenir tout accès ou manipulation non autorisé.
Comportement hors ligne
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 alors qu'il est 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.
Impact sur les performances
La connexion WebSocket a un impact minimal sur les performances. La connexion reste inactive lorsqu'aucune mise à jour n'a lieu et ne traite des messages que lorsqu'une activité survient. Sur une image typique avec une activité de marqueurs modérée, le WebSocket utilise moins de CPU que le rendu de l'image lui-même.
Pour des pages avec des centaines d'utilisateurs simultanés et une forte activité de création de marqueurs, le système s'échelle horizontalement pour maintenir les performances sans impacter les connexions clients individuelles.
Cas d'utilisation collaboratifs
La synchronisation en temps réel rend Image Chat particulièrement puissant pour les flux de travail collaboratifs. Les équipes de design peuvent réviser des maquettes ensemble avec tout le monde voyant les placements des marqueurs en temps réel. Les équipes de support client peuvent annoter des captures d'écran de manière collaborative pour identifier des problèmes. Les groupes éducatifs peuvent discuter de schémas 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'images de façon programmée. 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 de l'API exigent une authentification et suivent les modèles standard de l'API FastComments. Ce sont des points de terminaison publics qui s'authentifient via les cookies du 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 les cookies du 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érer toutes les conversations d'image pour une image spécifique.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Parameters
tenantId (paramètre de chemin, requis) est votre ID de locataire FastComments.
urlId (paramètre de requête, requis) 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 du site ou modérateur, 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 (paramètre de chemin, requis) est votre ID de locataire FastComments.
Le corps de la requête doit être en JSON et inclure les champs requis suivants.
urlId (string, requis) est l'identifiant de base de la page.
windowUrlId (string, requis) 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, requis) est le titre de la page.
src (string, requis) est l'URL de la source de l'image.
x (number, requis) est la coordonnée X en pourcentage (0-100).
y (number, requis) est la coordonnée Y en pourcentage (0-100).
createdFromCommentId (string, requis) est l'ID du commentaire qui a initié cette discussion.
broadcastId (string, requis) 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
Supprimer une conversation d'image existante. Ce point de terminaison nécessite des permissions d'administrateur ou de modérateur, ou bien la conversation doit avoir été créée par l'utilisateur authentifié.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdParameters
tenantId (paramètre de chemin, requis) est votre ID de locataire FastComments.
chatId (paramètre de chemin, requis) est l'ID de la conversation à supprimer.
broadcastId (corps de la requête, requis) 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 pourcentages des dimensions de l'image. X représente la position horizontale à partir du bord gauche (0 = bord gauche, 100 = bord droit). Y représente la position verticale à partir du 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% à partir du 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 s'applique par locataire afin de prévenir les abus tout en permettant des schémas d'utilisation normaux.
Error Responses
Tous les points de terminaison renvoient les codes d'état 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 est introuvable. 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 les 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 suivre ces métriques dans votre tableau de bord FastComments sous les analyses d'utilisation.
Des questions ?
C'est tout pour FastComments Image Chat ! Si vous avez des questions, besoin d'aide pour l'implémentation ou des suggestions de fonctionnalités, faites-le nous savoir ci-dessous ou contactez notre équipe d'assistance.
Consultez la démo en direct sur notre page de démonstration pour voir Image Chat en action.