Para quem cria com IA

Descubra o que as pessoas acham do app que você criou com IA.

Cole uma instrução no Lovable, Bolt, v0 ou Cursor. Em 2 minutos, cada tela pergunta “Isso foi útil?” e as respostas chegam no seu painel. Sem cadastro.

Comece agora, sem cadastro

Você recebe a chave e um painel na hora. Crie uma conta quando quiser gerenciar.

Ver como funciona

Funciona com LovableBoltv0CursorReplitWordPressWebflow

  1. 1A pessoa toca +1 ou −1
  2. 2Conta o que achou, se quiser
  3. 3Você recebe no painel, na hora

Como funciona

Três passos, nenhum código para escrever

  1. Crie seu inbox Dê um nome ao seu app no topo da página. Sem cadastro, você recebe a chave e o painel na hora. Criar agora
  2. Cole a instrução no seu agente de IA No Lovable, Bolt, v0, Cursor ou Replit. Ele coloca a pergunta “Isso foi útil?” nas telas do seu app.
  3. Veja o que as pessoas dizem Cada voto e comentário chega no painel, separado por tela. Você vê qual tela confunde e sabe o que pedir para a IA mudar.

Para quando você…

Lançou e não sabe por que as pessoas saemVeja em qual tela elas votam −1 e o que escrevem.
Está validando uma ideiaPergunte no fim do fluxo principal se o app resolveu o problema delas.
Mudou uma tela e quer saber se melhorouCompare as avaliações daquela tela antes e depois da mudança.

Experimente

Veja como fica no seu app

Saiba se cada tela está ajudando quem usa o que você construiu, em qualquer tipo de aplicação: site, app web, iOS, Android, híbrido ou nativo, e até bots e servidores. A pessoa vota com um toque e, se quiser, deixa um comentário e o WhatsApp para você responder. Tudo chega no mesmo painel.

Instalar eu mesmo

Usa Claude, ChatGPT, Cursor, Lovable, Bolt ou v0? Copie as instruções, cole no chat do seu agente e ele descobre sozinho se o projeto é web, iOS, Android ou outro, e instala do jeito certo. No seu painel, o botão já copia as instruções com a sua chave.

Experimente aqui. Cada exemplo mostra o código que gera o widget: textos, ícones, cores, campos e layout mudam só com atributos ou JavaScript.

Padrão

<div data-tbbc-rating data-section="demo-padrao"
     data-theme="dark"></div>

Emojis, cor e textos próprios

<div data-tbbc-rating data-section="demo-emoji"
     data-theme="dark"
     data-question="Gostou desta página?"
     data-up-icon="😍" data-up-label=""
     data-down-icon="😕" data-down-label=""
     data-accent="#16a34a"
     data-title-up="Que bom! O que mais você curtiu?"
     data-thanks="Valeu demais! 💚"></div>

Sim / Não, empilhado, só comentário

<div data-tbbc-rating data-section="demo-sim-nao"
     data-theme="dark"
     data-layout="stacked"
     data-question="Encontrou o que procurava?"
     data-up-icon="none" data-up-label="Sim"
     data-down-icon="none" data-down-label="Não"
     data-fields="comment"
     data-accent="#7c3aed"
     style="--tbbc-rating-radius:8px"></div>

Em inglês, tema claro

<div data-tbbc-rating data-section="demo-english"
     data-lang="en" data-theme="light"
     data-accent="#0f172a"></div>

Por JavaScript, com ícone SVG

<div id="avaliacao"></div>
<script>
  TBBCRating.mount(document.getElementById('avaliacao'), {
    section: 'demo-js',
    question: 'Valeu a pena?',
    upIconHtml: '<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21s-7-4.4-9.5-8.6C.8 9.3 2.6 5 6.6 5c2.1 0 3.6 1.2 5.4 3 1.8-1.8 3.3-3 5.4-3 4 0 5.8 4.3 4.1 7.4C19 16.6 12 21 12 21z"/></svg>',
    upLabel: 'Amei',
    downIcon: '💤', downLabel: 'Meh',
    accent: '#e11d48',
    fields: 'comment,contact',
    theme: 'dark',
  })
</script>

Para desenvolvedores

Instalar à mão, API e opções

Script, atributos, API para iOS e Android, e exemplos de código. Se você usa um agente de IA, a instrução do passo 2 já cobre tudo isso.

Instalar

Dois caminhos, o mesmo painel

Crie a chave do seu site em tbbc.app/feedbacks e escolha pelo lugar onde a sua interface roda:

Web e híbrido

Widget em dois passos

  1. Carregue o script uma vez, em todas as páginas

    Antes de </body>, ou no layout comum do site. A chave data-site é obrigatória: crie a sua em tbbc.app/feedbacks (é grátis). Ela leva as respostas para o painel do seu time, e sem ela o widget não aparece. Lá o script já vem pronto para copiar.

    <script src="https://tbbc.app/rating-widget/rating.js" data-site="SUA_CHAVE" data-app="meu-app" async></script>
  2. Coloque a avaliação onde quiser

    Um bloco por tela ou seção. O data-section diz de qual parte do app veio o voto.

    <div data-tbbc-rating data-section="checkout"></div>

    Prefere uma barra fixa no canto de todas as páginas? Pule este passo e use data-floating no script:

    <script src="https://tbbc.app/rating-widget/rating.js" data-site="SUA_CHAVE" data-app="meu-app" data-floating async></script>

No seu framework ou construtor

Qualquer site em que você mexe no HTML: os dois passos acima são tudo. Exemplo de página completa:

<body>
  <h1>Resultado da busca</h1>
  ...
  <div data-tbbc-rating data-section="busca"></div>

  <script src="https://tbbc.app/rating-widget/rating.js" data-site="SUA_CHAVE" data-app="meu-app" async></script>
</body>

Com um agente de IA

Deixe o seu agente instalar

As instruções explicam ao agente o que é a avaliação, como identificar o tipo do projeto, onde colocar em cada framework, como montar a interface nativa no iOS e no Android, o que fazer com cada resposta da API e como testar. Ele pergunta em quais telas você quer a avaliação, se você não disser.

Agentes que leem links carregam o guia certo sozinhos a partir do índice https://tbbc.app/rating-widget/llms.txt. Os guias: web e iOS, Android, nativo e API.

Ver as instruções completas
Carregando…

iOS, Android, nativo, bots e servidores

Use a API

App iOS ou Android, nativo ou em React Native e Flutter, sistema desktop, bot de WhatsApp, totem, e-mail pós-venda: qualquer sistema que faz uma chamada HTTP manda avaliações para o mesmo painel. Você usa a mesma chave do site e monta a pergunta com os componentes do seu app. Sugestão de interface, igual à do widget: “Esta tela foi útil?” com +1 e −1; depois do voto, um formulário opcional com comentário, nome e WhatsApp ou e-mail.

O fluxo

  1. A pessoa vota +1 ou −1. Você envia o voto e recebe um id.
  2. Abra a pergunta “o que você achou?” na hora, sem esperar a resposta do voto. Envie o comentário, o nome e o contato com esse id em até 24 horas. Pode enviar mais de uma vez: cada comentário é acrescentado ao voto.
  3. O voto e o comentário aparecem no painel do seu time, marcados como “via API”.

Endereço base: https://tbbc.app. Envie JSON, com o header Content-Type: application/json. Não há outro login: a chave diz para qual site e time vai a avaliação.

POST/api/rating

Registra um voto.

CampoTipoO que é
sitetexto, obrigatórioSua chave, criada em tbbc.app/feedbacks. Começa com k_.
votenúmero, obrigatório1 (gostou) ou -1 (não gostou).
sectiontextoParte do sistema: pos-venda, app/checkout, bot/suporte. Letras, números e - _ . /. Sem ele: default.
apptextoNome do sistema, para separar projetos com a mesma chave. Até 80 caracteres.
pagetextoA tela ou o passo, como um caminho: /pedido/entregue. Parâmetros depois de ? são descartados.
langtextoIdioma da pessoa, como pt-BR.
originURLSó para sistemas web. Sem ela, o voto fica marcado como “via API”.
curl -X POST https://tbbc.app/api/rating \
  -H "Content-Type: application/json" \
  -d '{"site": "SUA_CHAVE", "vote": -1, "section": "pos-venda", "app": "meu-bot"}'

Resposta de sucesso (201):

{ "ok": true, "id": "3f0c9a52-8a3e-4c4f-9a43-1c2b7d1e5a10" }

O que fazer com a resposta

RespostaO que significaO que fazer
201Voto gravado.Guarde o id por até 24 horas, se for pedir um comentário. Senão, pode descartar.
400 site_key_is_requiredFaltou o site.Erro no seu código: envie a chave. Não repita a chamada sem corrigir.
400 unknown_site_keyA chave não existe.Confira a chave no painel. Nada foi gravado.
400 vote_must_be_1_or_-1vote fora de 1 ou -1.Corrija o valor. Envie número, não texto.
500 ou sem respostaFalha do nosso lado ou da rede.Não mostre erro para a pessoa. Guarde o voto numa fila local e tente de novo, esperando cada vez mais (até 1 minuto) e na hora quando a rede voltar. Se a resposta se perdeu depois de gravar, a nova tentativa pode criar um voto duplicado.
POST/api/rating/{id}

Acrescenta o comentário, o nome e o contato ao voto. Envie pelo menos um dos três. Pode chamar mais de uma vez em até 24 horas: cada comentário é somado aos anteriores, e nome e contato são atualizados.

CampoTipoO que é
commenttextoO que a pessoa disse. Até 1.000 caracteres.
nametextoNome, se ela quiser. Até 80 caracteres.
contacttextoWhatsApp com DDD (10 a 15 dígitos, com ou sem +55) ou e-mail. Aparece no painel como link para responder.
noncetextoUm id único por envio (um UUID, por exemplo). Repetir a chamada com o mesmo nonce não duplica o comentário. Use sempre.
curl -X POST https://tbbc.app/api/rating/3f0c9a52-8a3e-4c4f-9a43-1c2b7d1e5a10 \
  -H "Content-Type: application/json" \
  -d '{"comment": "A entrega atrasou dois dias", "name": "Rui", "contact": "+55 44 98818-0252", "nonce": "b7f1c2"}'

Resposta de sucesso (200):

{ "ok": true, "id": "3f0c9a52-8a3e-4c4f-9a43-1c2b7d1e5a10" }

O que fazer com a resposta

RespostaO que significaO que fazer
200Comentário gravado no voto.Mostre o obrigado (de preferência já na hora do envio) e ofereça “Quer dizer mais alguma coisa?”, usando o mesmo id.
400 contact_is_invalidO contato não é um WhatsApp nem um e-mail válido.Peça para a pessoa conferir o número ou o e-mail, ou envie sem o contato.
400 comment_too_long / name_too_longPassou do limite.Limite os campos a 1.000 e 80 caracteres. Somados, os comentários de um voto vão até 5.000.
400 nothing_to_saveOs três campos vieram vazios.Não chame este endpoint quando a pessoa não escreveu nada.
404 not_foundEsse id não existe.Use o id exato que o voto devolveu.
409 too_many_follow_upsO voto já recebeu 20 envios.Descarte: repetir não adianta.
409 too_latePassaram mais de 24 horas desde o voto.Se ainda quiser registrar, envie um voto novo e o comentário em seguida.
500 ou sem respostaFalha do nosso lado ou da rede.Não mostre erro. Mantenha na fila e tente de novo com o mesmo nonce: se já tiver gravado, a resposta é 200 e nada é duplicado.

Exemplos

React Native, Expo, Node 18+, Deno ou Bun. No Flutter, o guia para agentes tem o exemplo em Dart.

const TBBC = 'https://tbbc.app/api/rating'
const SITE = 'SUA_CHAVE'

async function post(url, body) {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  })
  const data = await res.json().catch(() => ({}))
  return { status: res.status, ...data }
}

// 1. O voto: guarde o id se for pedir comentário
export async function vote(value, section) {
  const r = await post(TBBC, { site: SITE, vote: value, section, app: 'meu-app' })
  if (r.status === 201) return r.id
  throw new Error(r.error || `HTTP ${r.status}`) // 400: corrija o código; 500: tente de novo
}

// 2. O comentário (opcional, pode repetir, em até 24 h).
//    Ao tentar de novo, mande o MESMO nonce: o servidor ignora a repetição.
export async function comment(id, { comment, name, contact, nonce = Date.now().toString(36) + Math.random().toString(36).slice(2) }) {
  const r = await post(`${TBBC}/${id}`, { comment, name, contact, nonce })
  if (r.status === 200) return true
  if (r.error === 'contact_is_invalid') return 'peça para conferir o contato'
  throw new Error(r.error || `HTTP ${r.status}`)
}

Bom saber

Opções

Customize tudo

Textos, ícones, cores, campos e layout mudam por código. Coloque as opções no <script> (valem para todos os widgets da página), num bloco data-tbbc-rating (só aquele), ou em JavaScript. Os exemplos em “Experimente aqui” mostram o resultado.

Instalação

AtributoOndeO que faz
data-sitescriptObrigatório. A chave do app, criada em tbbc.app/feedbacks. Leva as respostas para o painel do seu time.
data-appscriptNome do sistema, para separar projetos com a mesma chave.
data-sectionblocoParte do app: letras, números e - _ . /. Sem ele: default.
data-floatingscriptBarra fixa no canto inferior direito, em todas as páginas.

Textos

Qualquer texto pode ser trocado, no bloco ou no script. Para tirar o rótulo de um botão e deixar só o ícone, use vazio: data-up-label="".

AtributoPadrão
data-questionEsta tela foi útil?
data-up-label / data-down-label+1 / −1
data-title-up / data-title-downQue bom! O que você gostou? / O que podemos melhorar?
data-placeholderConte em poucas palavras (opcional)
data-name-label / data-contact-labelSeu nome (opcional) / WhatsApp ou e-mail (opcional)
data-contact-hintSó para responder você, se precisar.
data-send / data-skipEnviar / Agora não
data-thanks / data-moreRecebido, obrigado! / Quer dizer mais alguma coisa?
data-voted / data-leave-commentObrigado pelo voto! / Deixar um comentário
data-langSegue o idioma da página. pt-BR ou en troca todos os textos padrão.

Ícones, cores, campos e layout

AtributoO que faz
data-up-icon / data-down-iconUm emoji ou texto no lugar do polegar, como 😍. none tira o ícone. Para SVG, use JavaScript (abaixo).
data-accentCor do botão escolhido, do Enviar e dos links. Qualquer cor CSS.
data-themelight ou dark. Sem ele, segue o sistema.
data-layoutinline (padrão, em uma linha) ou stacked (pergunta em cima, botões embaixo).
data-fieldsCampos do formulário, separados por vírgula: comment,name,contact (padrão), qualquer parte deles, ou none para só votar.

Mais ajustes com variáveis CSS no bloco:

[data-tbbc-rating] {
  --tbbc-rating-accent: #16a34a;       /* destaque */
  --tbbc-rating-accent-text: #ffffff;  /* texto sobre o destaque */
  --tbbc-rating-bg: #ffffff;           /* fundo */
  --tbbc-rating-text: #111111;         /* texto */
  --tbbc-rating-muted: #6b7280;        /* textos secundários */
  --tbbc-rating-border: #e5e7eb;       /* bordas */
  --tbbc-rating-radius: 8px;           /* cantos (padrão: pílula) */
  --tbbc-rating-font: Inter, sans-serif;
  --tbbc-rating-font-size: 15px;
}

Em JavaScript

As mesmas opções, com os nomes em camelCase. TBBCRating.configure() vale para todos os widgets montados depois; TBBCRating.mount() monta um elemento com opções próprias. Só pelo JavaScript dá para usar ícones em HTML ou SVG (upIconHtml, downIconHtml).

TBBCRating.configure({ accent: '#16a34a', thanks: 'Valeu!' })

TBBCRating.mount(document.getElementById('avaliacao'), {
  section: 'checkout',
  question: 'Deu tudo certo com o pagamento?',
  upIconHtml: '<svg ...></svg>',
  upLabel: 'Sim',
  downLabel: 'Não',
  fields: 'comment',
})

Apps de uma página

Se a tela é montada depois do carregamento (troca de rota sem recarregar), chame window.TBBCRating.scan() depois que o bloco aparecer. Os componentes de React e Vue acima já fazem isso.

Content-Security-Policy

Se o seu site tem CSP, libere script-src https://tbbc.app e connect-src https://tbbc.app.

Dados

O que é guardado

Se o seu site tem política de privacidade, inclua que as avaliações enviadas são guardadas pela TBBC.

Respostas

Veja o que as pessoas disseram

No painel você vê quantas avaliações cada seção recebeu, a porcentagem de positivas e cada comentário. Marque o que já resolveu, dê uma categoria e anote o que fez. Cada site pertence a um time: todos os membros veem e organizam os mesmos feedbacks.

Fale com a gente

Instalamos com você.

Conte o que você está construindo: um site, um app iOS ou Android, um bot. A gente abre um chamado e continua a conversa no WhatsApp.

  • Você recebe um número de chamado assim que enviar.
  • A conversa segue no WhatsApp, já com o número e o seu pedido na mensagem.
  • Ajudamos a escolher as telas, as perguntas e o visual do widget.

Usamos o seu contato só para responder este chamado.