Install the feedback widget

Quick start

1. Sign in to the dashboard and create a product.
2. Open Settings & install and copy the product key (pk_…).
3. Paste the snippet before </body> on every page where customers should be able to send feedback.

<script
  src="https://escutaproduto.com/widget.js"
  data-key="pk_your_product_key"
  defer></script>

The script is about 5 KB compressed, has no dependencies and renders inside a Shadow DOM, so your CSS can't break the widget and the widget's CSS can't leak into your site. It loads with defer and never blocks rendering.

What does the customer see?

A floating Feedback button in the bottom corner. Clicking it opens a small form where the customer picks a type (bug, idea, praise or other), optionally rates the product from 1 to 5 stars, writes a message and, if you haven't identified them, leaves an email. The form shows English or Portuguese based on the browser language.

Script attributes

Attribute	Values	Default
data-key	The product's public key. Required.	none
data-color	Any CSS color for the button and highlights.	#4f46e5
data-position	right or left	right
data-locale	pt-BR or en	browser language
data-trigger	button shows the floating button, none hides it	button

How do I open the widget from my own button?

Set data-trigger="none" to hide the floating button, then add data-escuta-open to any element. Its value preselects the feedback type.

<button data-escuta-open="bug">Report a bug</button>
<button data-escuta-open="idea">Suggest a feature</button>
<a href="#" data-escuta-open>Send feedback</a>

How do I attach the signed-in user?

Push an identify call onto the queue. It works before or after widget.js loads. email and name fill the matching fields, so the customer isn't asked for an email. Every other key (id, plan, company…) is stored as metadata on each message.

<script>
  window.EscutaProduto = window.EscutaProduto || { q: [] };
  (window.EscutaProduto.q ||= []).push(["identify", [{
    email: user.email,
    name: user.name,
    id: user.id,
    plan: user.plan
  }]]);
</script>

JavaScript API

Once the script has loaded, window.EscutaProduto exposes:

Method	What it does
EscutaProduto.open({ kind })	Opens the widget. kind is optional: bug, idea, praise or other.
EscutaProduto.close()	Closes the widget.
EscutaProduto.identify({...})	Sets the user for every message sent afterwards.
EscutaProduto.setMetadata({...})	Attaches extra context, such as the current screen or a feature flag. Up to 4 KB of JSON.

Restrict which sites can use your key

The product key is public by design: it ships in your HTML. To stop other sites from sending feedback with it, list your domains under Allowed origins in the product settings (for example https://app.example.com). Requests from any other site are rejected with 403.

Limits

• 10 messages per minute per visitor and product.
• Messages up to 5,000 characters, metadata up to 4 KB.
• A hidden honeypot field silently drops simple bots.