# Where should you place the feedback button?

> Put the default feedback button in a bottom corner, on the right unless that corner is taken, and keep it there on every page. Add inline triggers on screens where problems are likely. Move the button away from chat launchers and cookie banners so nothing covers anything else.

Source: https://escutaproduto.com/resources/feedback-button-placement
Last updated: 2026-10-11

## Why does a corner button work as the default?

Put the feedback button in a bottom corner, on the right for most sites, and keep it in the same place on every page. Visitors already look for help and support in that area, so a corner button needs no explanation. It stays out of the reading path, it does not move as the content loads, and it behaves the same on a laptop and a phone.

A corner button is the right default, but it is not the only option. Add inline triggers where they help, rather than replacing the corner button with them.

The Escuta Produto widget adds a floating Feedback button. The `data-position` attribute takes `right` (the default) or `left`, and `data-trigger="none"` hides the floating button so you can place your own. Those two settings cover most placement decisions.

## Which corner should the button use?

Choose the corner by checking what else lives there. On many sites the bottom right is free, so right is a sensible default. Move to the left when the right corner already holds a chat launcher, a back-to-top button, a cookie banner or a toolbar. Avoid moving the button between pages, because a button that jumps corners from page to page looks like a bug.

To use the left corner, change the script tag:

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

| Placement | Usually a good fit for | Watch for |
| --- | --- | --- |
| Bottom right | Marketing sites and most apps | Chat launchers and back-to-top buttons |
| Bottom left | Sites with a right-side chat or toolbar | Navigation drawers that slide in from the left |
| Header, top right | Documentation and internal tools | Account menus, and it scrolls out of view |

## When should an inline trigger replace the corner button?

An inline trigger sits next to the thing a person is looking at. A button that says "Report a problem with this export" beside an export screen gets more specific answers than a generic corner button, because the person does not have to explain where they were. Use inline triggers on screens where things fail or where ideas are likely to come up, such as settings, error pages and empty states.

Hide the floating button on those pages, then add your own button:

```html
<button type="button" data-escuta-open="bug">Report a problem with this page</button>
```

The `data-escuta-open` value preselects the type: `bug`, `idea`, `praise` or `other`. The label should describe the action, which is covered in [what a feedback button should say](/resources/feedback-button-copy).

## How do you keep the button away from chat widgets and banners?

Three kinds of element compete for the same corner: chat launchers, cookie banners and sticky bars. When two of them sit on the same spot, one covers the other and visitors cannot tap either. Check each page for these three, then decide which one gives way.

1. List every fixed or sticky element in the bottom corners, including chat, cookie consent and any sticky call to action.
2. Move the feedback button to the opposite corner when a chat launcher is present.
3. Ask whether the cookie banner can sit at the bottom edge with the feedback button above it, and set the spacing in your own banner styles.
4. Hide the floating button on pages where a banner or sticky bar must stay visible, and use an inline trigger on those pages instead.

Move your own banner or chat launcher rather than trying to nudge the feedback button. Page styles do not reach into the widget's Shadow DOM, so offsets written for the page have no effect on the button.

Phones add their own complications. Browser toolbars and the home indicator move as the visitor scrolls, so a button placed a few pixels from the bottom edge can end up under the toolbar on one screen and fine on another. Keep a comfortable margin from the edges, and check the placement with the address bar both visible and hidden. A button that looks correct only with the toolbar collapsed will be missed by many visitors.

## What placements should you avoid?

Avoid placements that hide content or block taps:

- Over the last line of a paragraph, a price or a form field.
- In a top corner of a page with a fixed header, where the button covers the account menu.
- Inside a navigation bar that collapses into a menu on phones.
- Two floating buttons from different tools on the same screen.
- Pulsing or flashing badges that draw attention, which people read as advertising.

## How do you test placement before release?

Test every template, not only the home page. Check each combination that can happen at the same time: a banner with a chat launcher, an open menu, a modal and a long scrolling page.

1. Load the home page, a long article, a form and the payment or checkout screen at a laptop width and at a phone width.
2. Scroll to the bottom of each page and confirm the button does not cover the last line of text.
3. Open the cookie banner, then the feedback panel. Accept, decline and dismiss the banner, and check the layout after each choice.
4. Tab to the button, press Enter, and confirm that the panel opens and that focus moves into it.

If a button is covered, the reason is usually a stacking order problem, which is covered in [how to fix z-index conflicts with a feedback widget](/resources/widget-z-index-conflicts).

## Placing the trigger in Escuta Produto

Start with the default floating button and set `data-position` to the corner with the least competition. Add `data-escuta-open` buttons only where a specific page needs one, and set `data-trigger="none"` in the template where the script renders on those pages. The full list of attributes is in the [widget docs](/docs/widget). The text around each trigger matters as much as its spot, so review it with [what a feedback button should say](/resources/feedback-button-copy).

## Frequently asked questions

### Where is the best place for a feedback button?

Usually a bottom corner, on the right for most sites, placed the same way on every page. Add inline buttons on screens where a specific problem or idea is likely, such as settings or error pages.

### Should a feedback button go on the left or the right?

Choose the corner that holds nothing else. If a chat launcher or cookie banner already uses the bottom right, set the position to left so the two do not overlap, then check both corners at phone width.

### Can a feedback button sit inside the page content?

Yes. An inline button with the data-escuta-open attribute opens the widget from any place on the page. It works well next to the screen where the problem happens, and you can hide the floating button with data-trigger set to none.