Keeping the feedback experience consistent across apps

Decide what should match and what can differ

Start with a list of three columns: what must match across your apps, what can differ by brand and what belongs to one product only. Must match: the form's type names, the five statuses, the reply style and the placement of the feedback button. Can differ: the accent color, the language setting and the product name. Product specific: the product's key, its allowed origins and its webhook.

Write the list once. Every new app should copy it instead of reinventing it. Consistency comes from a shared decision, not from memory.

Use the same placement and trigger

Put the feedback button in the same corner of every app. The widget default is the right side, which you can set explicitly with data-position="right". Choose one position and keep it. A customer who learns the button in one app will look for it in the same place in the next. If one app needs the button on the left for layout reasons, treat that as a deliberate exception and write it down.

Use the same trigger style too. The default floating button works everywhere. Where a page already has its own help link, set data-trigger="none" to hide the floating button, then open the form from that help link with an element that has data-escuta-open. That keeps the entry point consistent without a second button competing with the help link.

Match the copy before you match the color

Customers notice wording before they notice color. If one app says "Send feedback" and another says "Report an issue", people will wonder whether they are reporting a bug or sharing an idea. The form uses four types: bug, idea, praise and other. Choose labels that map to those types in every app, and use the same sentence in the text around the button.

Language matters too. The widget supports English and Portuguese, and data-locale sets it explicitly. The default follows the browser language, which is usually right, but set it when your audience and your interface language differ. Use the same locale rule across all apps, so a Portuguese visitor does not get English in one product and Portuguese in another for no reason.

Give each product its own accent color

The accent color is the one place where each product should look different. Set the color in each product's widget snippet with data-color, and keep the same value as the product's accent color so the hosted feedback page matches the widget. That gives each app its own identity while the structure stays the same. Pick colors with enough contrast against the page background, and test the button on both light and dark pages.

Each app loads its own snippet with its own key and color:

<!-- Scheduler app -->
<script src="https://escutaproduto.com/widget.js" data-key="pk_your_scheduler_key" data-color="#1d4ed8" data-position="right" data-locale="en" defer></script>

<!-- Invoicing app -->
<script src="https://escutaproduto.com/widget.js" data-key="pk_your_invoicing_key" data-color="#0f766e" data-position="right" data-locale="en" defer></script>

Keep the configuration in one template

Write the snippet once as a template, and let the key and color be the only values that change per app. Keep the template in a shared note or a snippet library, and copy it into each project. When you change a shared setting, such as the position, change the template first and then update each app on purpose.

Do not hand-edit the attributes in five places. Small differences pile up. An app with a different position and no comment explaining why will confuse the next person who maintains it.

Match your replies and statuses

Replies should sound like the same person wrote them. Use the same greeting, the same length and the same sign-off across products. Keep replies short: one line that thanks the customer, one line that says what you did, and one line that says what happens next.

Statuses matter just as much. New, Planned, In progress, Done and Closed mean the same thing in every product, as described in one feedback inbox for many products. When a status changes meaning between apps, your weekly routine starts comparing unlike things. Write the meaning in one place and link to it from your routine.

Common inconsistencies to avoid

• Different allowed origins for the same domain. A staging domain added to one product and forgotten in another makes the widget work in one app and fail in the other.
• Two entry points. One app shows a help link and a floating button. Customers see two options and pick either at random.
• Mismatched types. One app uses only bug and idea, while another uses all four types. Your counts then mean different things.
• Forgotten locales. A Portuguese app with English labels, or the reverse, damages trust quickly.

Check consistency once a quarter

Every quarter, open each app's feedback button, submit a test message and compare the result. Check the placement, the labels, the language, the status of the test item in the dashboard and the alert that arrives in the channel. Five minutes per app catches most drift before a customer does. Write the date of each check in your notes, so you can see how long any drift lasted.

How to keep the widget consistent with Escuta Produto

Create one product per app in the dashboard, with its own allowed origins, webhook and accent color. Use the widget docs to check every option, and keep the template with the same position, trigger and locale rules across apps. Use the hosted page docs if some apps need a link instead of a button. For the weekly routine that keeps all of them readable, see a feedback routine for five products.