Position & Placement: Where to Put Your Feedback Buttons

Where you place your feedback buttons can significantly impact how often users engage with them. Too hidden, and they go unnoticed. Too prominent, and they become distracting. This guide covers all the positioning options available in the Qaid embed, helping you find the perfect spot for your feedback buttons.

Default Position: Bottom-Right Corner

Out of the box, the Qaid embed places buttons in the bottom-right corner of the viewport. This is a familiar location for action buttons on the web—think chat widgets, scroll-to-top buttons, and cookie banners.

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
></script>

The default position uses a 16-pixel offset from the edge, keeping the buttons visible but unobtrusive. This works well for most websites, but sometimes you need more control.

The `position` Option

The position option accepts four values, each placing the buttons in a different corner of the viewport:

bottom-right (default)
bottom-left
top-right
top-left

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-position="bottom-left"
></script>

Or when initializing programmatically:

import { QaidFeedback } from '@qaiddev/thumbs-embed';

new QaidFeedback({
  endpoint: '/api/feedback',
  position: 'top-right'
});

Choosing the Right Corner

Bottom-right works best for most websites. Users expect interactive elements in this location, and it stays out of the way of main content.

Bottom-left is ideal when you have other widgets (chat, help buttons) already occupying the bottom-right corner.

Top-right can work for applications where feedback is a primary action, like documentation sites or product prototypes. However, be careful not to conflict with navigation elements.

Top-left is rarely used but can work for RTL (right-to-left) languages or unique layouts where other positions are occupied.

Custom Offset

Fine-tune the exact position with the offset option:

new QaidFeedback({
  endpoint: '/api/feedback',
  position: 'bottom-right',
  offset: { x: 24, y: 24 }
});

Or via data attributes:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-offset-x="24"
  data-offset-y="24"
></script>

Larger offsets give the buttons more breathing room, which can look cleaner on sites with lots of whitespace. Smaller offsets maximize content space.

Custom Container for Inline Placement

Sometimes fixed positioning is not what you need. Perhaps you want the feedback buttons to appear inline within your content—at the end of an article, inside a sidebar, or as part of a specific UI component.

The container option lets you mount the embed inside any element on your page:

Inline Placement

Feedback buttons mounted inside a custom container

Loading embed...

<div id="feedback-container"></div>

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-container="#feedback-container"
></script>

When you provide a container, the buttons use relative positioning inside that element instead of fixed positioning on the viewport. The position option is ignored when using a custom container.

Use Cases for Inline Placement

End of articles: Ask readers for feedback right after they finish reading. This captures their sentiment while the content is fresh in their mind.

<article>
  <h1>How to Configure Your Server</h1>
  <p>...</p>

  <div class="feedback-section">
    <p>Was this article helpful?</p>
    <div id="article-feedback"></div>
  </div>
</article>

<script>
import { QaidFeedback } from '@qaiddev/thumbs-embed';

new QaidFeedback({
  endpoint: '/api/feedback',
  container: '#article-feedback',
  skipTargeting: true
});
</script>

Feature cards: Collect feedback on specific features or announcements.

Sidebars: Provide persistent access to feedback without taking up viewport corners.

Z-Index Considerations

Fixed-position elements often compete for visual priority. The Qaid embed uses a default z-index of 50, which works for most sites. If your buttons are appearing behind other elements (or unwantedly on top of critical UI), adjust with the zIndex option:

new QaidFeedback({
  endpoint: '/api/feedback',
  zIndex: 9999
});

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-z-index="9999"
></script>

Common Z-Index Conflicts

Modals/dialogs: Usually 1000+. Your feedback buttons should be lower.
Cookie banners: Often 9999. Position your buttons to avoid overlap or use a lower z-index.
Navigation dropdowns: Typically 100-500. Should be fine with the default.
Chat widgets: Often 9999+. Consider using bottom-left to avoid conflicts.

A good rule of thumb: feedback buttons should be visible but not interfere with primary user interactions. If a modal is open, the modal should be on top.

Responsive Positioning

The embed is responsive by default—buttons scale appropriately and remain accessible on mobile devices. However, you might want different positions or sizes on different screen sizes.

Using CSS Media Queries

For custom containers, you can control positioning entirely with CSS:

#feedback-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

@media (max-width: 768px) {
  #feedback-container {
    bottom: 80px; /* Above mobile navigation */
    right: 8px;
  }
}

Conditional Initialization

For more complex scenarios, initialize the embed with different configurations based on screen size:

import { QaidFeedback } from '@qaiddev/thumbs-embed';

const isMobile = window.matchMedia('(max-width: 768px)').matches;

new QaidFeedback({
  endpoint: '/api/feedback',
  position: isMobile ? 'top-right' : 'bottom-right',
  offset: isMobile ? { x: 8, y: 8 } : { x: 16, y: 16 },
  buttonSize: isMobile ? 'small' : 'medium'
});

Avoiding Overlap with Other Fixed Elements

Many websites have multiple fixed-position elements: chat widgets, cookie consent banners, scroll-to-top buttons, and notification toasts. Here’s how to ensure your feedback buttons play nicely with them.

Audit Your Existing Fixed Elements

Before placing your feedback buttons, take inventory of what’s already in each corner:

Corner	Common Elements
Bottom-right	Chat widgets (Intercom, Zendesk), scroll-to-top buttons
Bottom-left	Less common, but sometimes used for secondary actions
Top-right	Notification bells, user menus (usually in header, not fixed)
Top-left	Rarely used for fixed elements

Strategy 1: Choose an Empty Corner

The simplest solution is to place your feedback buttons where nothing else lives. If you have a chat widget in bottom-right, use bottom-left for feedback.

Strategy 2: Stack Vertically

If you must use the same corner, increase the offset to stack elements vertically:

// Assuming a chat widget takes up the first 60px from the bottom
new QaidFeedback({
  endpoint: '/api/feedback',
  position: 'bottom-right',
  offset: { x: 16, y: 80 } // Clear the chat widget
});

Strategy 3: Use a Custom Container

For full control, create a container that positions itself relative to other fixed elements:

.fixed-actions {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

<div class="fixed-actions">
  <div id="feedback-buttons"></div>
  <button class="scroll-to-top">Top</button>
</div>

Strategy 4: Incognito Mode

If space is really tight, consider using incognito mode. The buttons stay hidden until the user hovers over their location, revealing them only when needed:

new QaidFeedback({
  endpoint: '/api/feedback',
  incognito: true
});

This keeps your corners clean while still providing access to feedback functionality.

Summary

Positioning your feedback buttons thoughtfully ensures they’re accessible without being intrusive. Here’s a quick reference:

Option	Values	Default	Notes
`position`	`bottom-right`, `bottom-left`, `top-right`, `top-left`	`bottom-right`	Ignored when `container` is set
`offset`	`{ x: number, y: number }`	`{ x: 16, y: 16 }`	Pixels from edge
`container`	CSS selector	`undefined`	Mounts inline instead of fixed
`zIndex`	number	`50`	Adjust for layering conflicts

Start with the default position and adjust only if you encounter conflicts or have specific UX requirements. The goal is to make feedback easy to give without getting in the way of your users’ primary tasks.