Designing a feedback widget for mobile screens

Where the thumb reaches on a phone

On a phone, the bottom corners are the easiest places to tap with a thumb. The Escuta Produto widget puts its floating button there by default, on the right, with data-position="right". If your visitors skew left-handed or your interface already uses the right corner for a control, set data-position="left" and compare.

The panel itself is at most 360 pixels wide and never wider than the screen minus 16 pixels on each side. The four type buttons share one row, so their labels stay short. The star ratings are the weak spot: each star is a small button, so a visitor with large thumbs may miss one. If rating matters to you, consider making it optional on mobile and checking the tap target on a real device.

What the keyboard covers

When a visitor taps the message box, the phone keyboard opens and takes up a large part of the screen. The widget focuses the message box about 30 milliseconds after the panel opens, so the keyboard appears right away. That is helpful for typing, but it means the visitor is looking at the top of the form while the bottom of the panel may be hidden.

The panel is fixed to the bottom of the screen. Its maximum height is the screen height minus 100 pixels, and it scrolls inside itself, so the message box, the rating, the email field and the send button can all be reached by scrolling the panel. The widget sizes itself with vh units and does not read the visual viewport, so how the panel fits with the keyboard open depends on the browser. Test on iOS Safari and on Android Chrome with a real keyboard open. An emulator does not show the keyboard behavior accurately.

The form order matters on a phone. The widget shows the type buttons, then the message, then the rating, then the optional email field, then the send button. Visitors who already typed a message will usually reach the email field last, which is what you want. Do not add more required fields above the message.

Bottom navigation and the floating button

Many mobile sites use a fixed tab bar along the bottom. The floating button sits 20 pixels above the bottom edge and 20 pixels from the chosen side. That is exactly where the last or first item of a tab bar sits. The widget uses very high stacking values, so the open panel and the button draw over your tab bar. The panel will cover the tabs when open, and the button will sit on top of a tab when closed.

There are two practical fixes:

1. Move the floating button with data-position="left" if your left-most tab matters less than the right-most one.
2. Hide the floating button with data-trigger="none", then add a "Send feedback" item to your own menu and give it the data-escuta-open attribute.

The second option is usually better in an app-like layout. The panel still opens over the page, and the close button in the top corner hides it again. There is no offset option for the floating button, so if neither position works, the menu item is the cleanest way out.

Test on a real phone before you ship

Run this checklist on at least one iPhone and one Android phone:

1. Open a page at the narrowest width your phone shows, and tap the floating button. The panel should fit with a margin on both sides.
2. Tap the message box and type three or four lines. Confirm you can still reach the send button.
3. Turn the phone sideways and confirm the panel still fits. Its height limit recalculates with the screen size.
4. Open the page with your tab bar visible. Confirm the floating button does not hide a tab you need.
5. Scroll the page behind the open panel. The widget does not lock page scrolling, so the background can move while the panel is open. That is acceptable for a short form, but know it happens.

If anything fails, change the position or hide the trigger before you tune the copy. Layout problems hurt more than wording.

Mobile layout options in Escuta Produto

The widget covers the main cases with three settings: data-position for left or right, data-trigger to hide the floating button, and data-escuta-open to open the panel from any element on the page. It has no offset or size option, so placement and spacing are the job of your page. The widget docs list every attribute.

Mobile apps do not have a native SDK in Escuta Produto. A native app should send feedback through the REST API, which lets you build a form that follows the platform's own design. For a web page, the panel above is enough.

For the label and accessibility side of the same panel, read what a feedback button should say and how to make a feedback widget accessible.

Set up a mobile-friendly trigger in Escuta Produto

Start with the defaults and test them on a phone. If the floating button clashes with your navigation, change the position first. If it still clashes, add data-trigger="none" to the script tag and place a labelled item in your menu with data-escuta-open="idea" or data-escuta-open="bug", whichever matches where the item sits. Then send a test message from the phone and confirm it appears in the inbox with the right type and page URL.