For people building with AI

Find out what people think of the app you built with AI.

Paste one instruction into Lovable, Bolt, v0 or Cursor. In 2 minutes, every screen asks “Was this helpful?” and the answers land in your dashboard. No sign-up.

Start now, no sign-up

You get the key and a dashboard right away. Create an account when you want to manage it.

See how it works

Works with LovableBoltv0CursorReplitWordPressWebflow

  1. 1They tap +1 or −1
  2. 2They say what they think, if they want
  3. 3You get it in your dashboard, right away

How it works

Three steps, no code to write

  1. Create your inbox Name your app at the top of the page. No sign-up: you get the key and the dashboard right away. Create now
  2. Paste the instruction into your AI agent In Lovable, Bolt, v0, Cursor or Replit. It adds the “Was this helpful?” question to your app’s screens.
  3. See what people say Every vote and comment lands in the dashboard, split by screen. You see which screen confuses people and know what to ask your AI to change.

For when you…

Launched and don’t know why people leaveSee which screen gets −1 votes and what people write.
Are validating an ideaAsk at the end of the main flow whether the app solved their problem.
Changed a screen and want to know if it got betterCompare that screen’s ratings before and after the change.

Try it

See how it looks in your app

Find out whether each screen is helping the people who use what you built, in any kind of application: website, web app, iOS, Android, hybrid or native, even bots and servers. People vote with one tap and, if they want, leave a comment and their WhatsApp so you can reply. Everything lands in the same dashboard.

Install it myself

Using Claude, ChatGPT, Cursor, Lovable, Bolt or v0? Copy the instructions, paste them into your agent's chat and it works out whether the project is web, iOS, Android or something else, and installs it the right way. In your dashboard, the button copies the instructions with your key already in them.

Try it here. Each example shows the code behind the widget: texts, icons, colors, fields and layout change with attributes or JavaScript alone.

Default

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

Emojis, color and your own texts

<div data-tbbc-rating data-section="demo-emoji"
     data-theme="dark"
     data-question="Did you like this page?"
     data-up-icon="😍" data-up-label=""
     data-down-icon="😕" data-down-label=""
     data-accent="#16a34a"
     data-title-up="Great! What did you enjoy most?"
     data-thanks="Thanks a lot! 💚"></div>

Yes / No, stacked, comment only

<div data-tbbc-rating data-section="demo-sim-nao"
     data-theme="dark"
     data-layout="stacked"
     data-question="Did you find what you were looking for?"
     data-up-icon="none" data-up-label="Yes"
     data-down-icon="none" data-down-label="No"
     data-fields="comment"
     data-accent="#7c3aed"
     style="--tbbc-rating-radius:8px"></div>

In Portuguese, light theme

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

With JavaScript, SVG icon

<div id="avaliacao"></div>
<script>
  TBBCRating.mount(document.getElementById('avaliacao'), {
    section: 'demo-js',
    question: 'Was it worth it?',
    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: 'Love it',
    downIcon: '💤', downLabel: 'Meh',
    accent: '#e11d48',
    fields: 'comment,contact',
    theme: 'dark',
  })
</script>

For developers

Manual install, API and options

Script, attributes, API for iOS and Android, and code samples. If you use an AI agent, the instruction from step 2 already covers all of this.

Instalar

Two ways in, one dashboard

Create your site key at tbbc.app/feedbacks and choose by where your interface runs:

Web and hybrid

Widget in two steps

  1. Load the script once, on every page

    Before </body>, or in your site's shared layout. The key data-site is required: create yours at tbbc.app/feedbacks (it's free). It sends the answers to your team's dashboard, and without it the widget does not show. The script is ready to copy there.

    <script src="https://tbbc.app/rating-widget/rating.js" data-site="SUA_CHAVE" data-app="meu-app" async></script>
  2. Put the rating wherever you want

    One block per screen or section. The data-section says which part of the app the vote came from.

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

    Prefer a fixed bar in the corner of every page? Skip this step and use data-floating on the script:

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

In your framework or site builder

Any site where you can edit the HTML: the two steps above are all it takes. A complete page:

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

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

With an AI agent

Let your agent install it

The instructions tell the agent what the rating is, how to identify the kind of project, where to put it in each framework, how to build the native interface on iOS and Android, what to do with each API response and how to test it. It asks which screens you want the rating on, if you don't say.

Agents that read links load the right guide on their own from the index https://tbbc.app/rating-widget/llms.txt. The guides: web and iOS, Android, native and API.

See the full instructions
Loading…

iOS, Android, native, bots and servers

Use the API

iOS or Android app, native or built with React Native and Flutter, desktop software, WhatsApp bot, kiosk, post-purchase e-mail: any system that can make an HTTP call sends ratings to the same dashboard. You use the same site key and build the question with your app's components. A suggested interface, the same as the widget: “Was this helpful?” with +1 and −1; after the vote, an optional form with comment, name and WhatsApp or e-mail.

The flow

  1. The person votes +1 or −1. You send the vote and get an id.
  2. Open the “what did you think?” question right away, without waiting for the vote's response. Send the comment, name and contact with that id within 24 hours. You can send more than once: each comment is added to the vote.
  3. The vote and the comment show up in your team's dashboard, marked “via API”.

Base URL: https://tbbc.app. Send JSON, with the header Content-Type: application/json. There is no other login: the key says which site and team the rating goes to.

POST/api/rating

Records a vote.

FieldTypeWhat it is
sitetext, requiredYour key, created at tbbc.app/feedbacks. Starts with k_.
votenumber, required1 (liked it) or -1 (did not like it).
sectiontextPart of the system: pos-venda, app/checkout, bot/suporte. Letters, numbers and - _ . /. Without it: default.
apptextName of the system, to tell projects with the same key apart. Up to 80 characters.
pagetextThe screen or step, as a path: /pedido/entregue. Parameters after ? are dropped.
langtextThe person's language, such as pt-BR.
originURLWeb systems only. Without it, the vote is marked “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"}'

Success response (201):

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

What to do with the response

ResponseWhat it meansWhat to do
201Vote saved.Keep the id for up to 24 hours if you will ask for a comment. Otherwise you can drop it.
400 site_key_is_requiredMissing site.A bug in your code: send the key. Do not repeat the call without fixing it.
400 unknown_site_keyThe key does not exist.Check the key in the dashboard. Nothing was saved.
400 vote_must_be_1_or_-1vote not 1 or -1.Fix the value. Send a number, not text.
500 or no responseA failure on our side or in the network.Do not show an error to the person. Keep the vote in a local queue and try again, waiting longer each time (up to 1 minute), and right away when the network comes back. If the response was lost after saving, the retry may create a duplicate vote.
POST/api/rating/{id}

Adds the comment, name and contact to the vote. Send at least one of the three. You can call it more than once within 24 hours: each comment is added to the previous ones, and name and contact are updated.

FieldTypeWhat it is
commenttextWhat the person said. Up to 1,000 characters.
nametextTheir name, if they want. Up to 80 characters.
contacttextWhatsApp with area code (10 to 15 digits, with or without +55) or e-mail. Shows in the dashboard as a link to reply.
noncetextA unique id per submission (a UUID, for example). Repeating the call with the same nonce does not duplicate the comment. Always send it.
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"}'

Success response (200):

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

What to do with the response

ResponseWhat it meansWhat to do
200Comment saved on the vote.Show the thank-you (ideally right when they submit) and offer “Anything else you want to say?”, using the same id.
400 contact_is_invalidThe contact is neither a valid WhatsApp number nor a valid e-mail.Ask the person to check the number or e-mail, or send without the contact.
400 comment_too_long / name_too_longOver the limit.Limit the fields to 1,000 and 80 characters. Together, a vote's comments go up to 5,000.
400 nothing_to_saveAll three fields were empty.Do not call this endpoint when the person wrote nothing.
404 not_foundThis id does not exist.Use the exact id the vote returned.
409 too_many_follow_upsThe vote already got 20 submissions.Drop it: retrying will not help.
409 too_lateMore than 24 hours since the vote.If you still want to record it, send a new vote and then the comment.
500 or no responseA failure on our side or in the network.Do not show an error. Keep it in the queue and retry with the same nonce: if it was already saved, the response is 200 and nothing is duplicated.

Examples

React Native, Expo, Node 18+, Deno or Bun. For Flutter, the agent guide has the Dart example.

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. The vote: keep the id if you will ask for a comment
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: fix the code; 500: try again
}

// 2. The comment (optional, can repeat, within 24 h).
//    When retrying, send the SAME nonce: the server ignores the repeat.
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 'ask them to check the contact'
  throw new Error(r.error || `HTTP ${r.status}`)
}

Good to know

Opções

Customize everything

Texts, icons, colors, fields and layout change in code. Put the options on the <script> (they apply to every widget on the page), on a data-tbbc-rating block (just that one), or in JavaScript. The examples in “Try it here” show the result.

Installation

AttributeWhereWhat it does
data-sitescriptRequired. The app key, created at tbbc.app/feedbacks. It sends the answers to your team's dashboard.
data-appscriptName of the system, to tell projects with the same key apart.
data-sectionblockPart of the app: letters, numbers and - _ . /. Without it: default.
data-floatingscriptA fixed bar in the bottom-right corner of every page.

Texts

Any text can be changed, on the block or the script. To remove a button's label and keep only the icon, leave it empty: data-up-label="".

AttributeDefault
data-questionWas this helpful?
data-up-label / data-down-label+1 / −1
data-title-up / data-title-downGreat! What did you like? / What can we improve?
data-placeholderA few words (optional)
data-name-label / data-contact-labelYour name (optional) / WhatsApp or e-mail (optional)
data-contact-hintOnly to get back to you, if needed.
data-send / data-skipSend / Not now
data-thanks / data-moreGot it, thank you! / Anything else you want to say?
data-voted / data-leave-commentThanks for voting! / Leave a comment
data-langFollows the page language. pt-BR or en switches all default texts.

Icons, colors, fields and layout

AttributeWhat it does
data-up-icon / data-down-iconAn emoji or text instead of the thumb, such as 😍. none removes the icon. For SVG, use JavaScript (below).
data-accentColor of the chosen button, the Send button and links. Any CSS color.
data-themelight or dark. Without it, follows the system.
data-layoutinline (default, one line) or stacked (question on top, buttons below).
data-fieldsForm fields, comma-separated: comment,name,contact (default), any subset, or none to vote only.

More tweaks with CSS variables on the block:

[data-tbbc-rating] {
  --tbbc-rating-accent: #16a34a;       /* highlight */
  --tbbc-rating-accent-text: #ffffff;  /* text on the highlight */
  --tbbc-rating-bg: #ffffff;           /* background */
  --tbbc-rating-text: #111111;         /* text */
  --tbbc-rating-muted: #6b7280;        /* secondary text */
  --tbbc-rating-border: #e5e7eb;       /* borders */
  --tbbc-rating-radius: 8px;           /* corners (default: pill) */
  --tbbc-rating-font: Inter, sans-serif;
  --tbbc-rating-font-size: 15px;
}

In JavaScript

The same options, with camelCase names. TBBCRating.configure() applies to every widget mounted afterwards; TBBCRating.mount() mounts one element with its own options. Only JavaScript can use HTML or SVG icons (upIconHtml, downIconHtml).

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

TBBCRating.mount(document.getElementById('avaliacao'), {
  section: 'checkout',
  question: 'Did the payment go well?',
  upIconHtml: '<svg ...></svg>',
  upLabel: 'Yes',
  downLabel: 'No',
  fields: 'comment',
})

Single-page apps

If the screen is rendered after load (route changes without a reload), call window.TBBCRating.scan() after the block appears. The React and Vue components above already do it.

Content-Security-Policy

If your site has a CSP, allow script-src https://tbbc.app and connect-src https://tbbc.app.

Data

What is stored

If your site has a privacy policy, mention that submitted ratings are stored by TBBC.

Answers

See what people said

In the dashboard you see how many ratings each section got, the share of positive ones and every comment. Mark what you already solved, give it a category and note what you did. Each site belongs to a team: every member sees and organizes the same feedback.

Talk to us

We install it with you.

Tell us what you are building: a website, an iOS or Android app, a bot. We open a ticket and continue the conversation on WhatsApp.

  • You get a ticket number as soon as you send it.
  • The conversation continues on WhatsApp, with the number and your request already in the message.
  • We help you choose the screens, the questions and the look of the widget.

We use your contact only to answer this ticket.