Como ele é
Começa com um painel branco: à esquerda, a nota média em número grande e cinco estrelas âmbar preenchidas na proporção exata, com o total e o botão Escrever avaliação; à direita, cinco barras âmbar, de 5 a 1 estrela, que crescem quando o bloco entra na tela. Clicar numa barra filtra a lista por aquela nota. Abaixo, cada avaliação mostra as iniciais num círculo, nome, selo verde de compra verificada quando houver, data relativa, estrelas, título, texto e o botão Útil com contador. Um seletor ordena a lista, e Ver mais carrega a próxima página. A demonstração usa avaliações fictícias, marcadas com um selo.
Você pode estar procurando isto se pediu algo assim
- mostrar as avaliações dos clientes com estrelas na página do produto
- nota média com estrelinhas e uma barra para cada nota
- filtrar avaliações por número de estrelas
- deixar o cliente escrever uma avaliação no site
- seção de avaliações igual à dos marketplaces grandes
- botão de útil nas avaliações e selo de compra verificada
- prova social com avaliações reais para a minha loja
- ordenar comentários pelos mais recentes ou pelas notas mais altas
Também chamado de
- avaliações de produto
- estrelas de avaliação
- prova social
- product reviews
- star rating
- review section
- social proof
- rating summary
Quando usar
- Página de produto de loja virtual que já coleta avaliações de compradores
- Landing pages que mostram a nota real de um produto ou serviço
- Marketplaces e catálogos em que a distribuição de notas ajuda a decidir
- Lojas que querem receber avaliações direto no site
Quando evitar
- Lojas ainda sem avaliações reais, já que os textos de exemplo não devem aparecer como se fossem de clientes
- Formulário em produção sem backend, já que a avaliação nova só aparece na tela e não é salva
Como pedir para a sua IA
Crie um bloco de avaliações para a página de produto que exiba as avaliações reais da minha loja: nota média com estrelas fracionárias, barras por nota que filtram a lista, ordenação, botão Útil, selo de compra verificada, formulário acessível pelo teclado e envio para a minha API.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Veredito
Como mostro as avaliações reais dos meus clientes em Veredito?
Passe a prop reviews com as avaliações que você já coleta, cada uma com nome, nota, título, texto, data, se a compra foi verificada e o número de votos úteis. Veredito calcula média, distribuição e filtros a partir delas. Sem a prop, aparece uma lista fictícia, só para testar o layout; com dados reais, tire o selo de demonstração do cabeçalho.
O formulário de Veredito salva a avaliação?
Não sozinho. O formulário de Veredito valida a nota de 1 a 5 e um texto de pelo menos 10 caracteres, coloca a nova avaliação no topo da lista na tela e emite o evento submitReview com os dados. Salvar, moderar e publicar depois fica com o seu backend; o botão Útil também só emite um evento.
Veredito é acessível por teclado e leitor de tela?
Sim. Em Veredito, as estrelas do formulário formam um grupo de opções que se escolhe com as setas, cada barra de nota é um botão que anuncia estrelas, quantidade e porcentagem, a média tem texto alternativo e a ordenação usa um seletor nativo. Com movimento reduzido, as barras aparecem cheias, sem animar.
