FastComments Image Chat permite discusiones interactivas sobre imágenes al permitir que los usuarios hagan clic en cualquier parte de una imagen para crear puntos de discusión. Los usuarios pueden hacer clic en partes específicas de las imágenes para iniciar conversaciones sobre esas áreas, creando marcadores visuales que muestran dónde se ubican las discusiones.
Esta función es perfecta para comentarios de diseño, reseñas de productos, materiales educativos con diagramas, galerías de fotos con comentarios, y cualquier escenario en el que desees discusiones contextuales ancladas a ubicaciones específicas de la imagen.
Primeros pasos 
Casos de uso
Image Chat funciona muy bien para la retroalimentación de diseño cuando los equipos necesitan discutir elementos específicos en maquetas o capturas de pantalla. Los sitios de reseñas de productos pueden permitir que los clientes comenten características específicas visibles en las fotos de productos. Las plataformas educativas pueden usarlo para discutir diagramas, mapas o imágenes científicas. Las galerías de fotos pueden volverse interactivas con comentarios específicos por ubicación. Los sitios inmobiliarios pueden permitir que los visitantes discutan características específicas visibles en las fotos de las propiedades.
Inicio rápido
Empezar con Image Chat es sencillo. Necesitas el script FastComments Image Chat, un elemento de imagen o un contenedor con una imagen, y un objeto de configuración con tu Tenant ID.
Instalación
Agrega el script de Image Chat a tu página:
Implementación básica
Aquí tienes un ejemplo mínimo:
Run 
Reemplaza 'demo' con tu Tenant ID real de FastComments si no lo está ya, que puedes encontrar en tu panel de FastComments.
Cómo funciona
Una vez inicializado, los usuarios pueden hacer clic en cualquier parte de la imagen. Cuando ocurre un clic, aparece un marcador cuadrado visual en esa ubicación y se abre una ventana de chat. Otros usuarios pueden ver todos los marcadores y hacer clic en ellos para ver o participar en esas conversaciones. Todas las discusiones se sincronizan en tiempo real entre todos los visitantes.
El widget usa posicionamiento basado en porcentajes, por lo que los marcadores se mantienen en la ubicación correcta incluso cuando la imagen cambia de tamaño o se visualiza en diferentes tamaños de pantalla.
Demostración en vivo
Puedes ver Image Chat en acción en nuestra página de demostración en vivo.
Próximos pasos
Ahora que tienes lo básico funcionando, puedes personalizar la apariencia y el comportamiento en la guía de Opciones de configuración. Consulta la guía de diseño adaptable para entender cómo funciona el posicionamiento basado en porcentajes. Aprende sobre estilos y soporte de modo oscuro en la guía de personalización. Para integraciones avanzadas, explora la Referencia de la API.
Bibliotecas frontend
Todas las bibliotecas frontend de FastComments (react, vue, angular, etc) incluyen Image Chat.
Ejemplos
Ejemplo básico
La forma más simple de usar Image Chat es apuntar a un único elemento de imagen. Este ejemplo muestra cómo habilitar discusiones interactivas en una imagen:
Run Ejemplo con elemento contenedor
También puedes pasar un elemento contenedor que tenga una imagen dentro:
Run Ejemplo con ID de URL personalizado
Por defecto, Image Chat usa la URL de la página combinada con la fuente de la imagen y las coordenadas para identificar conversaciones. Puedes proporcionar un urlId personalizado:
Run Esto es útil si la estructura de tus URL cambia pero quieres mantener las mismas conversaciones, o si quieres compartir los mismos puntos de discusión en varias páginas.
Ejemplo con modo oscuro
Si tu sitio tiene un fondo oscuro y el widget no lo detecta automáticamente como debería, podemos habilitar manualmente el soporte de modo oscuro:
Run Ejemplo con tamaño personalizado del cuadro de chat
Puedes ajustar el tamaño de los cuadrados clicables que aparecen en la imagen. El tamaño se especifica como un porcentaje del ancho de la imagen:
Run Ejemplo con callback de recuento de comentarios
Haz seguimiento cuando se agregan o actualizan comentarios usando el callback commentCountUpdated:
Ejemplo con múltiples imágenes
Puedes inicializar Image Chat en múltiples imágenes. Cada imagen tendrá sus propios puntos de discusión independientes:
Run Opciones de configuración
Overview
FastComments Image Chat extiende el widget de comentarios estándar de FastComments, por lo que hereda todas las opciones de configuración del widget base mientras añade algunas específicas para anotaciones en imágenes.
Required Configuration
tenantId
Se requiere su Tenant ID de FastComments. Puede encontrar esto en su panel de control de FastComments.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Image Chat Specific Options
urlId
Por defecto, Image Chat genera un identificador único para cada conversación basado en la URL de la página, la fuente de la imagen y las coordenadas X/Y. Puede anular esto con un urlId personalizado.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Esto es útil cuando la estructura de sus URL puede cambiar pero desea mantener las mismas conversaciones, o cuando quiere compartir anotaciones a través de varias páginas.
chatSquarePercentage
Controla el tamaño de los marcadores de chat clicables como un porcentaje del ancho de la imagen. El valor por defecto es 5%, lo que significa que cada marcador tiene el 5% del ancho de la imagen.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Marcadores más grandes y visibles
});Valores más pequeños crean marcadores menos intrusivos que funcionan mejor para imágenes detalladas. Valores más grandes hacen que los marcadores sean más fáciles de ver y de hacer clic en imágenes con mucho contenido o para usuarios en dispositivos móviles.
hasDarkBackground
Active el estilo de modo oscuro cuando su página tiene un fondo oscuro.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Una función de callback que se ejecuta cada vez que cambia el recuento de comentarios. Esto es útil para actualizar elementos de la interfaz de usuario como insignias o títulos de página.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Inherited Configuration Options
Dado que Image Chat extiende el widget de comentarios estándar, puede usar cualquier opción de configuración del widget base de FastComments. Aquí hay algunas opciones de uso común:
locale
Establezca el idioma para la interfaz del widget. FastComments soporta docenas de idiomas.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Español
});readonly
Haga que todas las conversaciones sean de solo lectura. Los usuarios pueden ver los marcadores y las discusiones existentes pero no pueden crear nuevas ni responder.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Integre con su sistema de autenticación usando Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Configuración de SSO
}
});Consulte la documentación de SSO para obtener detalles completos sobre las opciones de autenticación.
maxReplyDepth
Controle cuántos niveles de profundidad pueden tener las respuestas. Por defecto, Image Chat establece esto en 0, lo que significa que todos los comentarios son planos (sin respuestas anidadas). Puede cambiar esto si desea conversaciones en hilos.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Permitir 3 niveles de anidamiento
});Internal Configuration
Estas opciones se establecen automáticamente por Image Chat y no deben ser anuladas:
El productId se establece automáticamente en 2 para Image Chat. La extensión floating-chat se carga automáticamente para proporcionar la funcionalidad de la ventana de chat. El widget detecta automáticamente dispositivos móviles (pantallas de menos de 768px de ancho) y ajusta la interfaz en consecuencia con ventanas de chat a pantalla completa.
Target Element Flexibility
El primer parámetro de FastCommentsImageChat puede ser un elemento <img> directamente o un elemento contenedor con una imagen dentro:
// Elemento de imagen directo
FastCommentsImageChat(document.getElementById('my-image'), config);
// Contenedor con imagen en su interior
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);El widget encontrará la imagen automáticamente si pasa un elemento contenedor.
Complete Example
Aquí hay un ejemplo que muestra múltiples opciones de configuración juntas:
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: {
// Tu configuración de SSO
},
maxReplyDepth: 1
});Para una lista completa de todas las opciones de configuración disponibles heredadas del widget base, consulte la documentación principal de configuración de FastComments.
Diseño adaptable
Posicionamiento basado en porcentajes
Image Chat utiliza coordenadas basadas en porcentajes en lugar de coordenadas en píxeles para posicionar los marcadores de chat en las imágenes. Cuando un usuario hace clic en una imagen, el widget convierte las coordenadas en píxeles del clic en porcentajes respecto al ancho y alto de la imagen. Este enfoque garantiza que los marcadores permanezcan en la ubicación correcta independientemente de cómo se muestre la imagen.
Por ejemplo, si un usuario hace clic a 250 píxeles desde el borde izquierdo de una imagen de 1000px de ancho, el widget lo almacena como 25% desde la izquierda. Cuando otro usuario ve la misma imagen a 500px de ancho en un dispositivo móvil, el marcador aparece a 125 píxeles desde la izquierda, que sigue siendo el 25% del ancho.
Beneficios para diseños responsivos
Este sistema de porcentajes hace que Image Chat funcione sin problemas en todos los tamaños de dispositivo y orientaciones. Sus imágenes pueden mostrarse en tamaños diferentes según el ancho de pantalla, las reglas de CSS o las restricciones del contenedor, pero los marcadores siempre se alinean correctamente con las ubicaciones previstas.
Los usuarios en ordenadores de sobremesa con monitores grandes ven los marcadores en las mismas posiciones relativas que los usuarios en smartphones con pantallas pequeñas. Los marcadores se escalan proporcionalmente con la propia imagen.
Escalado de imagen y relación de aspecto
Siempre que su imagen mantenga su relación de aspecto al escalar (que es el comportamiento predeterminado del navegador), los marcadores basados en porcentajes permanecerán perfectamente alineados. El widget asume que las imágenes se escalan proporcionalmente y calcula las posiciones basándose en esta suposición.
Si aplica CSS que distorsione la relación de aspecto de la imagen (por ejemplo usando object-fit: cover con dimensiones específicas), las posiciones de los marcadores pueden no alinearse correctamente. Para obtener mejores resultados, permita que las imágenes se escalen de forma natural o use object-fit: contain para mantener la relación de aspecto.
Tamaño del cuadrado de chat
El tamaño visual de los marcadores de chat también se basa en porcentajes. La opción de configuración chatSquarePercentage tiene por defecto 5%, lo que significa que cada cuadrado ocupa el 5% del ancho de la imagen. Esto asegura un peso visual consistente entre distintos tamaños de imagen.
En una imagen de 1000px de ancho con la configuración predeterminada del 5%, los marcadores tienen 50px de lado. En una imagen de 500px de ancho, los mismos marcadores tienen 25px de lado. Permanecen proporcionales al tamaño de la imagen.
Comportamiento en móviles
En pantallas de menos de 768px de ancho, Image Chat cambia a un diseño optimizado para móviles. Las ventanas de chat se abren a pantalla completa en vez de flotar junto al marcador. Esto ofrece mejor usabilidad en pantallas pequeñas donde las ventanas flotantes oscurecerían demasiado la imagen.
Los propios marcadores permanecen visibles y clicables en sus posiciones basadas en porcentajes. Los usuarios aún pueden ver dónde están ubicadas todas las discusiones y tocar los marcadores para abrir la interfaz de chat a pantalla completa.
Carga dinámica de imágenes
El sistema basado en porcentajes funciona correctamente incluso cuando las imágenes se cargan de forma asíncrona o cambian de tamaño después de cargar la página. El widget supervisa el elemento de la imagen y recalcula las posiciones de los marcadores cada vez que cambian las dimensiones de la imagen.
Si está usando carga diferida (lazy-loading) de imágenes o implementando imágenes responsivas con diferentes tamaños en distintos puntos de ruptura, los marcadores se ajustan automáticamente cuando cambia el tamaño de la imagen.
Consistencia entre dispositivos
Porque las coordenadas se almacenan como porcentajes en la base de datos, una discusión creada en un equipo de escritorio aparece en la misma ubicación relativa exacta cuando se ve en una tableta o teléfono. Los usuarios pueden colaborar entre dispositivos sin inconsistencias de posicionamiento.
Esto funciona en ambas direcciones. Una discusión creada al tocar un punto específico en un dispositivo móvil aparece en la misma posición relativa cuando se visualiza en un monitor grande de escritorio.
Consideraciones sobre el viewport
El widget calcula los porcentajes en relación con el propio elemento de la imagen, no con el viewport. Esto significa que desplazar la página o cambiar el tamaño de la ventana del navegador no afecta las posiciones de los marcadores. Los marcadores permanecen anclados a sus ubicaciones en la imagen independientemente de los cambios en el viewport.
Preparación para el futuro
El enfoque basado en porcentajes hace que las discusiones sobre sus imágenes sean resistentes a cambios en el diseño, la disposición o el ecosistema de dispositivos. A medida que surjan nuevos tamaños de pantalla y dispositivos, las discusiones existentes seguirán mostrándose correctamente sin requerir actualizaciones o migraciones.
Personalización
Compatibilidad con modo oscuro
Image Chat incluye soporte integrado para modo oscuro. Cuando estableces hasDarkBackground: true en tu configuración, las ventanas de chat y los elementos de la interfaz de usuario se ajustan automáticamente para funcionar bien en fondos oscuros.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});El estilo de modo oscuro se aplica a las ventanas de chat, a los cuadrados marcadores y a todos los elementos interactivos. Si tu sitio tiene un interruptor de modo oscuro, puedes reinicializar el widget cuando cambie el modo, o usar el enfoque de clase en el body descrito más abajo.
Modo oscuro dinámico
Si el modo oscuro de tu sitio se controla añadiendo una clase .dark al elemento body, la interfaz de Image Chat respetará esto automáticamente sin necesidad de reinicializar. Los estilos del widget están diseñados para responder a la presencia de esta clase.
/* Tu CSS de modo oscuro */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Estilizado personalizado con CSS
Puedes personalizar la apariencia de los marcadores, las ventanas de chat y otros elementos usando CSS. El widget añade clases específicas a las que puedes dirigirte en tu hoja de estilos.
Los cuadrados y ventanas de chat usan el sistema de estilo de burbujas de comentarios de FastComments, por lo que cualquier personalización que hayas aplicado al widget de comentarios estándar también afectará a Image Chat.
Tamaño de los cuadrados de chat
La opción chatSquarePercentage controla el tamaño de los marcadores clicables. El valor predeterminado es el 5% del ancho de la imagen:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Cuadrados más grandes y más visibles
});Valores más pequeños crean marcadores más sutiles que se integran en la imagen. Valores más grandes hacen que los marcadores sean más prominentes y más fáciles de pulsar, especialmente en dispositivos móviles o por motivos de accesibilidad.
Comportamiento en móviles
En pantallas de menos de 768px de ancho, Image Chat cambia automáticamente a un diseño optimizado para móviles. Las ventanas de chat aparecen a pantalla completa en lugar de flotar junto a los marcadores, ofreciendo una mejor usabilidad en pantallas pequeñas.
Los marcadores permanecen visibles en sus posiciones responsivas sobre la imagen. Los usuarios pueden tocar cualquier marcador para abrir la interfaz de chat a pantalla completa. Este comportamiento está integrado y no requiere ninguna configuración.
Apariencia de la ventana de chat
Las ventanas de chat tienen 300px de ancho en escritorio con una flecha de 16px apuntando al marcador. Las ventanas se posicionan automáticamente según el espacio disponible en la ventana de visualización, usando clases de posicionamiento como to-right, to-left, to-top y to-bottom.
Puedes añadir CSS personalizado para ajustar colores, fuentes, espaciado u otras propiedades visuales de estas ventanas. Las ventanas de chat usan la misma estructura de componentes que el widget estándar de FastComments, por lo que heredan cualquier personalización global que hayas aplicado.
Inicialización perezosa
Las ventanas de chat se inicializan al pasar el ratón para usuarios de escritorio o inmediatamente cuando se crean. Esto reduce la sobrecarga de carga inicial al solo renderizar la interfaz de chat cuando los usuarios realmente interactúan con un marcador.
La inicialización perezosa ocurre de forma transparente. Los usuarios no notan ningún retraso, pero el navegador no necesita renderizar docenas de ventanas de chat ocultas si tienes muchos marcadores en una imagen.
Localización
Image Chat admite todas las mismas opciones de localización que el widget estándar de FastComments. Establece la opción locale para mostrar el texto de la interfaz en diferentes idiomas:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Francés
});FastComments admite decenas de idiomas. La configuración de locale afecta todo el texto de la interfaz, incluyendo los avisos, botones y texto de marcador de posición.
Opciones de personalización heredadas
Dado que Image Chat extiende el widget de comentarios estándar, hereda todas las opciones de personalización del widget base. Esto incluye clases CSS personalizadas, traducciones personalizadas, personalización de avatares, formato de fechas y mucho más.
Consulta la documentación principal de personalización de FastComments para la lista completa de opciones de personalización disponibles.
Uso de fuentes personalizadas
Si tu sitio usa fuentes personalizadas, la interfaz de Image Chat heredará esas fuentes del CSS de tu página. Las ventanas de chat se renderizan dentro del DOM de tu página y respetan la configuración tipográfica existente.
Para mejores resultados, asegúrate de que tus fuentes personalizadas estén cargadas antes de inicializar Image Chat, o acepta que puede haber un breve parpadeo de texto sin estilo mientras las fuentes se cargan.
Diseño visual de los marcadores
Los marcadores cuadrados tienen un diseño visual sutil que los hace visibles sin abrumar la imagen. Puedes personalizar su apariencia con CSS si deseas un tratamiento visual diferente.
Los marcadores incluyen estados de hover que proporcionan retroalimentación cuando los usuarios mueven el cursor sobre ellos. En dispositivos táctiles, la interacción de toque proporciona retroalimentación inmediata abriendo la ventana de chat.
Sincronización en tiempo real
Actualizaciones en tiempo real
Image Chat utiliza conexiones WebSocket para sincronizar todas las conversaciones en tiempo real entre todos los usuarios conectados. Cuando alguien crea un nuevo marcador, añade un comentario o elimina una discusión, todos los demás usuarios que están viendo la misma imagen ven la actualización inmediatamente sin necesidad de refrescar.
Cómo funciona la sincronización por WebSocket
Al inicializar Image Chat, el widget establece una conexión WebSocket con los servidores de FastComments. Esta conexión permanece abierta durante la sesión del usuario y escucha actualizaciones relacionadas con la imagen actual.
El sistema WebSocket utiliza tres tipos de mensajes de difusión para Image Chat. El evento new-image-chat se dispara cuando alguien crea un nuevo marcador en la imagen. El evento image-chat-updated se dispara cuando alguien actualiza una conversación existente. El evento deleted-image-chat se dispara cuando alguien elimina un marcador.
Sistema de ID de difusión
Para evitar efectos de eco en los que los usuarios ven sus propias acciones retransmitidas, cada actualización incluye un broadcastId único. Cuando un usuario crea o actualiza un marcador, su cliente genera un UUID para esa operación. Cuando el WebSocket retransmite la actualización a todos los clientes, el cliente origen ignora la actualización porque coincide con su propio broadcastId.
Esto asegura una interacción fluida en la que los usuarios ven sus cambios inmediatamente en la interfaz sin esperar el viaje de ida y vuelta al servidor, al mismo tiempo que garantiza que todos los demás usuarios reciban la actualización.
Resiliencia de la conexión
Si la conexión WebSocket se cae debido a problemas de red o mantenimiento del servidor, el widget intenta reconectarse automáticamente. Durante el periodo de reconexión, los usuarios aún pueden interactuar con los marcadores existentes, pero no verán las actualizaciones en tiempo real de otros usuarios hasta que la conexión se restablezca.
Una vez reconectado, el widget vuelve a sincronizarse para asegurar que no se hayan perdido actualizaciones. Esto ocurre de forma transparente sin requerir intervención del usuario.
Consideraciones sobre el ancho de banda
Los mensajes WebSocket son ligeros y contienen solo la información esencial necesaria para sincronizar el estado. Crear un nuevo marcador normalmente utiliza menos de 1KB de ancho de banda. El sistema también incluye agrupamiento inteligente para reducir la frecuencia de mensajes durante periodos de alta actividad.
Las métricas de uso en el panel de FastComments rastrean pubSubMessageCount y pubSubBandwidth para que puedas monitorizar la actividad de sincronización en tiempo real en tus sitios.
Sincronización entre pestañas
Si un usuario tiene la misma página abierta en varias pestañas del navegador, las actualizaciones en una pestaña aparecen inmediatamente en las otras pestañas. Esto funciona mediante el mismo mecanismo de sincronización por WebSocket y no requiere configuración adicional.
Los usuarios pueden tener tu sitio abierto en varios dispositivos simultáneamente, y todos ellos permanecerán sincronizados. Un marcador creado en un ordenador de sobremesa aparece al instante en la tableta del usuario si ambos dispositivos están viendo la misma imagen.
Seguridad
Los mensajes WebSocket se transmiten sobre conexiones seguras (WSS) e incluyen validación de tenant para asegurar que los usuarios solo reciben actualizaciones de las conversaciones que están autorizados a ver. El servidor valida todas las operaciones antes de difundirlas para prevenir acceso o manipulación no autorizada.
Comportamiento sin conexión
Cuando los usuarios están completamente sin conexión, aún pueden ver los marcadores existentes pero no pueden crear nuevos ni ver las actualizaciones de otros. El widget detecta el estado sin conexión y muestra un mensaje apropiado.
Si un usuario intenta crear un marcador estando sin conexión y luego vuelve a conectarse, la operación fallará en lugar de ponerse en cola, asegurando la consistencia de los datos. Los usuarios deben reintentar la operación una vez que su conexión se haya restablecido.
Impacto en el rendimiento
La conexión WebSocket tiene un impacto mínimo en el rendimiento. La conexión permanece inactiva cuando no se producen actualizaciones y solo procesa mensajes cuando hay actividad. En una imagen típica con actividad moderada de marcadores, el WebSocket utiliza menos CPU que el renderizado de la propia imagen.
Para páginas con cientos de usuarios simultáneos y alta actividad de creación de marcadores, el sistema escala horizontalmente para mantener el rendimiento sin afectar las conexiones de clientes individuales.
Casos de uso colaborativos
La sincronización en tiempo real hace que Image Chat sea especialmente potente para flujos de trabajo colaborativos. Los equipos de diseño pueden revisar maquetas juntos, con todos viendo la colocación de marcadores en tiempo real. Los equipos de soporte al cliente pueden anotar capturas de pantalla de forma colaborativa para identificar problemas. Los grupos educativos pueden discutir diagramas con todos los participantes viendo los marcadores de los demás a medida que se crean.
La retroalimentación inmediata crea una experiencia colaborativa más atractiva y productiva en comparación con los sistemas de comentarios tradicionales donde los usuarios necesitan refrescar para ver las actualizaciones.
Referencia de la API
Visión general de la API
Image Chat proporciona tres puntos finales REST para gestionar conversaciones de imagen de forma programática. Estos puntos finales le permiten recuperar, crear y eliminar marcadores sin usar el widget del navegador.
Todos los puntos finales de la API requieren autenticación y siguen los patrones estándar de la API de FastComments. Son puntos finales públicos que autentican mediante cookies del navegador, no con claves de API.
URL base
Todos los endpoints de la API Image Chat están bajo:
https://fastcomments.com/comment-image-chatsAutenticación
Estos endpoints autentican a los usuarios mediante cookies del navegador. No usan claves de API. Los usuarios deben haber iniciado sesión en FastComments en su navegador para acceder a estos endpoints.
Obtener todas las conversaciones
Recupera todas las conversaciones de imagen para una imagen específica.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Parámetros
tenantId (parámetro de ruta, obligatorio) es su ID de Tenant de FastComments.
urlId (parámetro de consulta, obligatorio) es el identificador de la imagen para la que desea recuperar conversaciones.
Respuesta
La respuesta incluye el estado de la API, la información de la sesión del usuario actual si está autenticado, un array de conversaciones con sus IDs, URLs y coordenadas X/Y, un identificador de URL limpio, una bandera que indica si el usuario actual es administrador o moderador del sitio, y detalles de conexión WebSocket para sincronización en vivo incluyendo tenantIdWS, urlIdWS y userIdWS.
Ejemplo de solicitud
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Ejemplo de respuesta
{
"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"
}Crear conversación
Crear una nueva conversación de imagen para una ubicación específica en una imagen.
Endpoint
POST /comment-image-chats/:tenantIdParámetros
tenantId (parámetro de ruta, obligatorio) es su ID de Tenant de FastComments.
El cuerpo de la solicitud debe ser JSON e incluir estos campos obligatorios.
urlId (string, obligatorio) es el identificador base de la página.
windowUrlId (string, obligatorio) es la URL combinada con la fuente de la imagen y las coordenadas, por ejemplo my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, obligatorio) es el título de la página.
src (string, obligatorio) es la URL de origen de la imagen.
x (number, obligatorio) es la coordenada X como porcentaje (0-100).
y (number, obligatorio) es la coordenada Y como porcentaje (0-100).
createdFromCommentId (string, obligatorio) es el ID del comentario que inició este chat.
broadcastId (string, obligatorio) es un UUID para la sincronización en vivo para prevenir efectos de eco.
Respuesta
La respuesta incluye el estado de la API y el ID de la conversación recién creada.
Ejemplo de solicitud
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"
}'Ejemplo de respuesta
{
"status": "success",
"createdChatId": "conv789"
}Eliminar conversación
Eliminar una conversación de imagen existente. Este endpoint requiere permisos de administrador o moderador, o que la conversación haya sido creada por el usuario autenticado.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdParámetros
tenantId (parámetro de ruta, obligatorio) es su ID de Tenant de FastComments.
chatId (parámetro de ruta, obligatorio) es el ID de la conversación que se va a eliminar.
broadcastId (cuerpo de la solicitud, obligatorio) es un UUID para la sincronización en vivo.
Ejemplo de solicitud
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"
}'Ejemplo de respuesta
{
"status": "success"
}Sistema de coordenadas
Las coordenadas X y Y se almacenan como porcentajes de las dimensiones de la imagen. X representa la posición horizontal desde el borde izquierdo (0 = borde izquierdo, 100 = borde derecho). Y representa la posición vertical desde el borde superior (0 = borde superior, 100 = borde inferior).
Estos valores porcentuales pueden incluir decimales para mayor precisión. Por ejemplo, x: 25.5 significa 25.5% desde el borde izquierdo de la imagen.
Limitación de tasa
Estos endpoints están sujetos a la limitación de tasa estándar de la API de FastComments. El middleware de limitación de tasa se aplica por tenant para prevenir abusos permitiendo al mismo tiempo patrones de uso normales.
Respuestas de error
Todos los endpoints devuelven códigos de estado HTTP estándar. Una respuesta 400 indica parámetros de solicitud inválidos. Una respuesta 401 significa que la autenticación falló. Una respuesta 403 indica permisos insuficientes. Una respuesta 404 significa que la conversación no se encontró. Una respuesta 429 indica que se excedió el límite de tasa.
Las respuestas de error incluyen un cuerpo JSON con detalles:
{
"status": "error",
"message": "Conversation not found"
}Seguimiento de uso
La creación de conversaciones incrementa su métrica de uso conversationCreateCount. Toda la actividad de sincronización por WebSocket incrementa pubSubMessageCount y pubSubBandwidth. Puede supervisar estas métricas en el panel de control de FastComments, en la sección de análisis de uso.
¿Tienes preguntas?
¡Eso es todo sobre FastComments Image Chat! Si tienes alguna pregunta, necesitas ayuda con la implementación o tienes sugerencias de funciones, por favor háznoslo saber a continuación o ponte en contacto con nuestro equipo de soporte.
Consulta la demostración en vivo en nuestra página de demostración para ver Image Chat en acción.