O FastComments Image Chat permite discussões interativas em imagens ao permitir que os usuários cliquem em qualquer lugar de uma imagem para criar pontos de discussão. Os usuários podem clicar em partes específicas das imagens para iniciar conversas sobre essas áreas, criando marcadores visuais que mostram onde as discussões estão localizadas.
Esse recurso é perfeito para feedback de design, avaliações de produtos, materiais educacionais com diagramas, galerias de fotos com comentários, e qualquer cenário em que você queira discussões contextuais ancoradas em locais específicos da imagem.
Primeiros Passos 
Use Cases
Image Chat works great for design feedback where teams need to discuss specific elements in mockups or screenshots. Product review sites can let customers discuss specific features visible in product photos. Educational platforms can use it for discussing diagrams, maps, or scientific images. Photo galleries can become interactive with location-specific commentary. Real estate sites can let viewers discuss specific features visible in property photos.
Quick Start
Getting started with Image Chat is simple. You need the FastComments Image Chat script, an image element or container with an image, and a configuration object with your 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 FastComments dashboard.
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 live demo page.
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.
Exemplos
Exemplo Básico
A maneira mais simples de usar o Image Chat é direcionar um único elemento de imagem. Este exemplo mostra como ativar discussões interativas em uma imagem:
Run Exemplo com elemento contêiner
Você também pode passar um elemento contêiner que tenha uma imagem dentro dele:
Run Exemplo com ID de URL personalizado
Por padrão, o Image Chat usa a URL da página combinada com a origem da imagem e as coordenadas para identificar conversas. Você pode fornecer um urlId personalizado:
Run Isto é útil se a estrutura da sua URL mudar, mas você quiser manter as mesmas conversas, ou se você quiser compartilhar os mesmos pontos de discussão em várias páginas.
Exemplo com Modo Escuro
Se o seu site tiver um fundo escuro e o widget não estiver detectando automaticamente como deveria, podemos ativar manualmente o suporte ao modo escuro:
Run Exemplo com Tamanho Personalizado do Quadrado de Chat
Você pode ajustar o tamanho dos quadrados clicáveis que aparecem na imagem. O tamanho é especificado como uma porcentagem da largura da imagem:
Run Exemplo com Callback de Contagem de Comentários
Acompanhe quando comentários são adicionados ou atualizados usando o callback commentCountUpdated:
Exemplo com Múltiplas Imagens
Você pode inicializar o Image Chat em várias imagens. Cada imagem terá seus próprios pontos de discussão independentes:
Run Opções de Configuração
Visão geral
FastComments Image Chat estende o widget de comentários padrão do FastComments, herdando todas as opções de configuração do widget base e adicionando algumas específicas para anotações em imagens.
Configuração necessária
tenantId
Seu Tenant ID do FastComments é obrigatório. Você pode encontrá-lo no painel do FastComments.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Opções específicas do Image Chat
urlId
Por padrão, o Image Chat gera um identificador único para cada conversa com base na URL da página, na origem da imagem e nas coordenadas X/Y. Você pode sobrescrever isso com um urlId personalizado.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Isso é útil quando a estrutura da sua URL pode mudar, mas você quer manter as mesmas conversas, ou quando deseja compartilhar anotações entre várias páginas.
chatSquarePercentage
Controla o tamanho dos marcadores de chat clicáveis como porcentagem da largura da imagem. O padrão é 5%, o que significa que cada marcador tem 5% da largura da imagem.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Marcadores maiores e mais visíveis
});Valores menores criam marcadores menos intrusivos que funcionam melhor para imagens detalhadas. Valores maiores tornam os marcadores mais fáceis de ver e clicar em imagens ocupadas ou para usuários em dispositivos móveis.
hasDarkBackground
Ative o estilo em modo escuro quando sua página tiver um fundo escuro.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Uma função de callback que é executada sempre que a contagem de comentários muda. Isso é útil para atualizar elementos da interface como badges ou títulos da página.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Opções de configuração herdadas
Como o Image Chat estende o widget de comentários padrão, você pode usar qualquer opção de configuração do widget base do FastComments. Aqui estão algumas opções comumente usadas:
locale
Defina o idioma da interface do widget. O FastComments oferece suporte a dezenas de idiomas.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Espanhol
});readonly
Deixe todas as conversas em modo somente leitura. Os usuários podem visualizar marcadores e discussões existentes, mas não podem criar novos nem responder.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Integre com seu sistema de autenticação usando Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// Configuração SSO
}
});Consulte a documentação de SSO para detalhes completos sobre as opções de autenticação.
maxReplyDepth
Controle quantos níveis de profundidade as respostas podem ter. Por padrão, o Image Chat define isso como 0, significando que todos os comentários são planos (sem respostas aninhadas). Você pode alterar isso se quiser conversas encadeadas.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Permite 3 níveis de aninhamento
});Configuração interna
Essas opções são definidas automaticamente pelo Image Chat e não devem ser sobrescritas:
O productId é definido automaticamente como 2 para o Image Chat. A extensão floating-chat é carregada automaticamente para fornecer a funcionalidade da janela de chat. O widget detecta automaticamente dispositivos móveis (telas com menos de 768px de largura) e ajusta a interface com janelas de chat em tela cheia.
Flexibilidade do elemento alvo
O primeiro parâmetro para FastCommentsImageChat pode ser tanto um elemento <img> diretamente quanto um elemento contêiner com uma imagem dentro:
// Elemento de imagem direto
FastCommentsImageChat(document.getElementById('my-image'), config);
// Contêiner com imagem dentro
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);O widget encontrará a imagem automaticamente se você passar um elemento contêiner.
Exemplo completo
Aqui está um exemplo mostrando várias opções de configuração 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: {
// Sua configuração de SSO
},
maxReplyDepth: 1
});Para uma lista completa de todas as opções de configuração disponíveis herdadas do widget base, consulte a documentação principal de configuração do FastComments.
Design Responsivo
Percentage-Based Positioning
Image Chat usa coordenadas baseadas em porcentagem em vez de coordenadas em pixels para posicionar marcadores de conversa nas imagens. Quando um usuário clica em uma imagem, o widget converte as coordenadas em pixels do clique em porcentagens da largura e altura da imagem. Essa abordagem garante que os marcadores permaneçam na posição correta independentemente de como a imagem é exibida.
Por exemplo, se um usuário clicar a 250 pixels da borda esquerda de uma imagem de 1000px de largura, o widget armazena isso como 25% a partir da esquerda. Quando outro usuário visualiza a mesma imagem com 500px de largura em um dispositivo móvel, o marcador aparece a 125 pixels da esquerda, o que ainda é 25% da largura.
Benefits for Responsive Layouts
Esse sistema baseado em porcentagem faz com que o Image Chat funcione perfeitamente em todos os tamanhos e orientações de dispositivo. Suas imagens podem ser exibidas em tamanhos diferentes dependendo da largura da tela, regras de CSS ou restrições do contêiner, mas os marcadores sempre se alinham corretamente com os locais pretendidos.
Usuários em computadores desktop com monitores grandes veem os marcadores nas mesmas posições relativas que usuários em smartphones com telas pequenas. Os marcadores escalam proporcionalmente com a própria imagem.
Image Scaling and Aspect Ratio
Contanto que sua imagem mantenha sua proporção ao escalar (o que é o comportamento padrão do navegador), os marcadores baseados em porcentagem permanecerão perfeitamente alinhados. O widget presume que as imagens escalam proporcionalmente e calcula posições com base nessa suposição.
Se você aplicar CSS que distorce a proporção da imagem (como usar object-fit: cover com dimensões específicas), as posições dos marcadores podem não se alinhar corretamente. Para melhores resultados, permita que as imagens escalem naturalmente ou use object-fit: contain para manter a proporção.
Chat Square Sizing
O tamanho visual dos marcadores de conversa também é baseado em porcentagem. A opção de configuração chatSquarePercentage tem padrão de 5%, o que significa que cada quadrado tem 5% da largura da imagem. Isso garante peso visual consistente entre diferentes tamanhos de imagem.
Em uma imagem de 1000px de largura com a configuração padrão de 5%, os marcadores têm 50px quadrados. Em uma imagem de 500px de largura, os mesmos marcadores têm 25px quadrados. Eles permanecem proporcionais ao tamanho da imagem.
Mobile Behavior
Em telas com menos de 768px de largura, o Image Chat muda para um layout otimizado para dispositivos móveis. As janelas de conversa abrem em tela cheia em vez de flutuarem ao lado do marcador. Isso fornece melhor usabilidade em telas pequenas onde janelas flutuantes poderiam obscurecer grande parte da imagem.
Os próprios marcadores permanecem visíveis e clicáveis em suas posições baseadas em porcentagem. Os usuários ainda podem ver onde todas as discussões estão localizadas e tocar nos marcadores para abrir a interface de conversa em tela cheia.
Dynamic Image Loading
O sistema baseado em porcentagem funciona corretamente mesmo quando as imagens são carregadas de forma assíncrona ou mudam de tamanho após o carregamento da página. O widget monitora o elemento da imagem e recalcula as posições dos marcadores sempre que as dimensões da imagem mudam.
Se você estiver fazendo lazy-loading de imagens ou implementando imagens responsivas com tamanhos diferentes em diferentes breakpoints, os marcadores se ajustam automaticamente quando o tamanho da imagem muda.
Cross-Device Consistency
Como as coordenadas são armazenadas como porcentagens no banco de dados, uma discussão criada em um computador desktop aparece exatamente na mesma localização relativa quando visualizada em um tablet ou telefone. Os usuários podem colaborar entre dispositivos sem inconsistências de posicionamento.
Isso funciona bidirecionalmente. Uma discussão criada ao tocar em um ponto específico em um dispositivo móvel aparece na mesma posição relativa quando visualizada em um monitor de desktop grande.
Viewport Considerations
O widget calcula porcentagens em relação ao próprio elemento da imagem, não ao viewport. Isso significa que rolar a página ou alterar o tamanho da janela do navegador não afeta as posições dos marcadores. Os marcadores permanecem ancorados às suas posições na imagem independentemente das mudanças no viewport.
Future-Proofing Content
A abordagem baseada em porcentagem torna suas discussões em imagens resistentes a mudanças no layout, design ou ecossistema de dispositivos. À medida que novos tamanhos de tela e dispositivos surgirem, as discussões existentes continuarão a ser exibidas corretamente sem exigir atualizações ou migrações.
Personalização
Suporte a Modo Escuro
O Image Chat inclui suporte integrado ao modo escuro. Quando você define hasDarkBackground: true na sua configuração, as janelas de chat e os elementos da UI ajustam-se automaticamente para funcionar bem em fundos escuros.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});O estilo do modo escuro é aplicado às janelas de chat, aos marcadores quadrados e a todos os elementos interativos. Se o seu site possui um alternador de modo escuro, você pode reinicializar o widget quando o modo mudar, ou usar a abordagem de classe no body descrita abaixo.
Modo Escuro Dinâmico
Se o modo escuro do seu site é controlado adicionando a classe .dark ao elemento body, a UI do Image Chat irá respeitar isso automaticamente sem requerer reinicialização. Os estilos do widget são projetados para responder à presença dessa classe.
/* Seu CSS de modo escuro */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Estilização Personalizada com CSS
Você pode personalizar a aparência dos marcadores, das janelas de chat e de outros elementos usando CSS. O widget adiciona classes específicas que você pode direcionar em sua folha de estilos.
Os quadrados e janelas de chat usam o sistema de estilos de balões de comentário do FastComments, então quaisquer personalizações que você aplicou ao widget de comentários padrão também afetarão o Image Chat.
Tamanho do Quadrado de Chat
A opção chatSquarePercentage controla o tamanho dos marcadores clicáveis. O padrão é 5% da largura da imagem:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Quadrados maiores e mais visíveis
});Valores menores criam marcadores mais sutis que se misturam à imagem. Valores maiores tornam os marcadores mais proeminentes e fáceis de clicar, especialmente em dispositivos móveis ou por motivos de acessibilidade.
Comportamento em Dispositivos Móveis
Em telas com largura inferior a 768px, o Image Chat muda automaticamente para um layout otimizado para dispositivos móveis. As janelas de chat aparecem em fullscreen em vez de flutuarem ao lado dos marcadores, proporcionando melhor usabilidade em telas pequenas.
Os marcadores permanecem visíveis em suas posições responsivas na imagem. Os usuários podem tocar em qualquer marcador para abrir a interface de chat em tela cheia. Esse comportamento é integrado e não requer nenhuma configuração.
Aparência da Janela de Chat
As janelas de chat têm 300px de largura no desktop com uma flecha de 16px apontando para o marcador. As janelas se posicionam automaticamente com base no espaço disponível da viewport, usando classes de posicionamento como to-right, to-left, to-top, e to-bottom.
Você pode adicionar CSS personalizado para ajustar cores, fontes, espaçamento ou outras propriedades visuais dessas janelas. As janelas de chat usam a mesma estrutura de componentes do widget padrão do FastComments, portanto herdam quaisquer personalizações globais que você aplicou.
Inicialização Preguiçosa
As janelas de chat são inicializadas ao passar o mouse para usuários de desktop ou imediatamente quando criadas. Isso reduz a sobrecarga de carregamento inicial, renderizando a interface de chat somente quando os usuários realmente interagem com um marcador.
A inicialização preguiçosa ocorre de forma transparente. Os usuários não percebem qualquer atraso, mas o navegador não precisa renderizar dezenas de janelas de chat ocultas se você tiver muitos marcadores em uma imagem.
Localização
O Image Chat suporta todas as mesmas opções de localização que o widget padrão do FastComments. Defina a opção locale para exibir o texto da UI em diferentes idiomas:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Francês
});O FastComments suporta dezenas de idiomas. A configuração de locale afeta todo o texto da UI, incluindo prompts, botões e texto de placeholder.
Opções de Personalização Herdadas
Como o Image Chat estende o widget de comentários padrão, ele herda todas as opções de personalização do widget base. Isso inclui classes CSS personalizadas, traduções personalizadas, customização de avatar, formatação de data e muito mais.
Veja a documentação principal de personalização do FastComments para a lista completa de opções de personalização disponíveis.
Trabalhando com Fontes Personalizadas
Se o seu site usa fontes personalizadas, a UI do Image Chat herdará essas fontes do CSS da sua página. As janelas de chat são renderizadas dentro do DOM da sua página e respeitam as configurações de tipografia existentes.
Para melhores resultados, garanta que suas fontes personalizadas sejam carregadas antes de inicializar o Image Chat, ou aceite que pode haver um breve flash de texto sem estilo enquanto as fontes carregam.
Design Visual dos Marcadores
Os marcadores quadrados têm um design visual sutil que os torna perceptíveis sem sobrecarregar a imagem. Você pode personalizar sua aparência com CSS se quiser um tratamento visual diferente.
Os marcadores incluem estados de hover que fornecem feedback quando os usuários movem o mouse sobre eles. Em dispositivos com touch, a interação por toque fornece feedback imediato abrindo a janela de chat.
Sincronização em Tempo Real
Atualizações em Tempo Real
Image Chat usa conexões WebSocket para sincronizar todas as conversas em tempo real entre todos os usuários conectados. Quando alguém cria um novo marcador, adiciona um comentário ou exclui uma discussão, todos os outros usuários visualizando a mesma imagem veem a atualização imediatamente sem precisar atualizar a página.
Como a sincronização via WebSocket funciona
Quando você inicializa o Image Chat, o widget estabelece uma conexão WebSocket com os servidores do FastComments. Essa conexão permanece aberta durante a sessão do usuário e fica escutando por atualizações relacionadas à imagem atual.
O sistema WebSocket usa três tipos de mensagens de broadcast para o Image Chat. O evento new-image-chat é disparado quando alguém cria um novo marcador na imagem. O evento image-chat-updated é disparado quando alguém atualiza uma conversa existente. O evento deleted-image-chat é disparado quando alguém exclui um marcador.
Sistema de ID de Broadcast
Para evitar efeitos de eco em que os usuários veem suas próprias ações sendo retransmitidas de volta para eles, cada atualização inclui um broadcastId único. Quando um usuário cria ou atualiza um marcador, seu cliente gera um UUID para essa operação. Quando o WebSocket retransmite a atualização para todos os clientes, o cliente de origem ignora a atualização porque ela corresponde ao seu próprio broadcastId.
Isso garante uma interação fluida, onde os usuários veem suas alterações imediatamente na interface sem esperar a viagem de ida e volta pelo servidor, enquanto ainda garante que todos os outros usuários recebam a atualização.
Resiliência da Conexão
Se a conexão WebSocket cair devido a problemas de rede ou manutenção do servidor, o widget tenta reconectar automaticamente. Durante o período de reconexão, os usuários ainda podem interagir com marcadores existentes, mas não verão atualizações em tempo real de outros usuários até que a conexão seja restabelecida.
Uma vez reconectado, o widget ressincroniza para garantir que nenhuma atualização tenha sido perdida. Isso acontece de forma transparente, sem exigir intervenção do usuário.
Considerações sobre Largura de Banda
As mensagens WebSocket são leves e contêm apenas as informações essenciais necessárias para sincronizar o estado. Criar um novo marcador normalmente usa menos de 1KB de largura de banda. O sistema também inclui agrupamento inteligente para reduzir a frequência de mensagens durante períodos de alta atividade.
Suas métricas de uso no painel do FastComments rastreiam pubSubMessageCount e pubSubBandwidth para que você possa monitorar a atividade de sincronização em tempo real em seus sites.
Sincronização entre abas
Se um usuário tiver a mesma página aberta em várias abas do navegador, as atualizações em uma aba aparecem imediatamente nas outras abas. Isso funciona através do mesmo mecanismo de sincronização por WebSocket e não requer qualquer configuração adicional.
Os usuários podem ter seu site aberto em vários dispositivos simultaneamente, e todos eles permanecerão sincronizados. Um marcador criado em um computador desktop aparece instantaneamente no tablet do usuário se ambos os dispositivos estiverem visualizando a mesma imagem.
Segurança
As mensagens WebSocket são transmitidas por conexões seguras (WSS) e incluem validação do tenant para garantir que os usuários recebam apenas atualizações das conversas que estão autorizados a ver. O servidor valida todas as operações antes de transmiti-las para evitar acesso ou manipulação não autorizados.
Comportamento Offline
Quando os usuários estão completamente offline, eles ainda podem visualizar marcadores existentes, mas não podem criar novos nem ver atualizações de outros. O widget detecta o estado offline e exibe mensagens apropriadas.
Se um usuário tentar criar um marcador enquanto estiver offline e depois voltar a ficar online, a operação falhará em vez de ser enfileirada, garantindo consistência dos dados. Os usuários devem tentar novamente a operação assim que a conexão for restaurada.
Impacto no Desempenho
A conexão WebSocket tem impacto mínimo no desempenho. A conexão permanece ociosa quando não há atualizações ocorrendo e só processa mensagens quando há atividade. Em uma imagem típica com atividade moderada de marcadores, o WebSocket usa menos CPU do que renderizar a própria imagem.
Para páginas com centenas de usuários simultâneos e alta atividade de criação de marcadores, o sistema escala horizontalmente para manter o desempenho sem impactar as conexões dos clientes individuais.
Casos de Uso Colaborativos
A sincronização em tempo real torna o Image Chat particularmente poderoso para fluxos de trabalho colaborativos. Equipes de design podem revisar mockups juntas, com todos vendo a colocação dos marcadores em tempo real. Equipes de suporte ao cliente podem anotar screenshots colaborativamente para identificar problemas. Grupos educacionais podem discutir diagramas com todos os participantes vendo os marcadores uns dos outros conforme são criados.
O feedback imediato cria uma experiência colaborativa mais envolvente e produtiva em comparação com sistemas de comentários tradicionais, onde os usuários precisam atualizar a página para ver as atualizações.
Referência da API
API Overview
Image Chat fornece três endpoints REST da API para gerenciar conversas de imagem programaticamente. Esses endpoints permitem recuperar, criar e excluir marcadores sem usar o widget do navegador.
Todos os endpoints da API exigem autenticação e seguem os padrões da API do FastComments. Estes são endpoints públicos que autenticam via cookies do navegador, não por chaves de API.
Base URL
Todos os endpoints da API do Image Chat estão em:
https://fastcomments.com/comment-image-chatsAuthentication
Esses endpoints autenticam usuários via cookies do navegador. Eles não usam chaves de API. Os usuários devem estar logados no FastComments em seu navegador para acessar esses endpoints.
Get All Conversations
Recupere todas as conversas de imagem para uma imagem específica.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Parameters
tenantId (path parameter, required) é o seu FastComments Tenant ID.
urlId (query parameter, required) é o identificador da imagem para a qual você deseja recuperar conversas.
Response
A resposta inclui o status da API, informações da sessão do usuário atual se autenticado, um array de conversas com seus IDs, URLs e coordenadas X/Y, um identificador de URL limpo, uma flag indicando se o usuário atual é administrador do site ou moderador, e detalhes de conexão WebSocket para sincronização ao vivo incluindo tenantIdWS, urlIdWS, e 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
Crie uma nova conversa de imagem para uma localização específica em uma imagem.
Endpoint
POST /comment-image-chats/:tenantIdParameters
tenantId (path parameter, required) é o seu FastComments Tenant ID.
O corpo da requisição deve ser JSON e incluir estes campos obrigatórios.
urlId (string, required) é o identificador base da página.
windowUrlId (string, required) é a URL combinada com a fonte da imagem e as coordenadas, por exemplo my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, required) é o título da página.
src (string, required) é a URL da fonte da imagem.
x (number, required) é a coordenada X em porcentagem (0-100).
y (number, required) é a coordenada Y em porcentagem (0-100).
createdFromCommentId (string, required) é o ID do comentário que iniciou este chat.
broadcastId (string, required) é um UUID para sincronização ao vivo para prevenir efeitos de eco.
Response
A resposta inclui o status da API e o ID da conversa recém-criada.
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
Exclua uma conversa de imagem existente. Este endpoint exige permissões de administrador ou moderador, ou a conversa deve ter sido criada pelo usuário autenticado.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdParameters
tenantId (path parameter, required) é o seu FastComments Tenant ID.
chatId (path parameter, required) é o ID da conversa a ser excluída.
broadcastId (request body, required) é um UUID para sincronização ao vivo.
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
As coordenadas X e Y são armazenadas como porcentagens das dimensões da imagem. X representa a posição horizontal a partir da borda esquerda (0 = borda esquerda, 100 = borda direita). Y representa a posição vertical a partir da borda superior (0 = topo, 100 = parte inferior).
Esses valores percentuais podem incluir casas decimais para maior precisão. Por exemplo, x: 25.5 significa 25.5% a partir da borda esquerda da imagem.
Rate Limiting
Esses endpoints estão sujeitos à limitação de taxa padrão da API do FastComments. O middleware de limite de taxa aplica-se por tenant para prevenir abuso enquanto permite padrões normais de uso.
Error Responses
Todos os endpoints retornam códigos de status HTTP padrão. Uma resposta 400 indica parâmetros de requisição inválidos. Uma resposta 401 significa que a autenticação falhou. Uma resposta 403 indica permissões insuficientes. Uma resposta 404 significa que a conversa não foi encontrada. Uma resposta 429 indica que o limite de taxa foi excedido.
As respostas de erro incluem um corpo JSON com detalhes:
{
"status": "error",
"message": "Conversation not found"
}Usage Tracking
Criar conversas incrementa sua métrica de uso conversationCreateCount. Toda atividade de sincronização via WebSocket incrementa pubSubMessageCount e pubSubBandwidth. Você pode monitorar essas métricas no painel do FastComments em usage analytics.
Dúvidas?
Isso é tudo sobre o FastComments Image Chat! Se você tiver alguma dúvida, precisar de ajuda com a implementação ou tiver sugestões de recursos, por favor, avise-nos abaixo ou entre em contato com nossa equipe de suporte.
Confira a demonstração ao vivo em nossa página de demonstração para ver o Image Chat em ação.