Zero-dependency feedback embed with precision element targeting. Let users pinpoint exactly what they're commenting on.
Interactive Demo
Test the feedback interface
▶ Click a button to start
~8KB
0
Theme
Colors
Position & Style
Modal & Typography
<script
src="https://unpkg.com/@bjsm/qaid"
data-endpoint="/api/feedback"
></script>Element Targeting
Users click directly on UI elements to pinpoint exactly what they're giving feedback about.
Screenshot Capture
Automatically capture the page state when feedback is submitted. See exactly what your users saw.
Console Capture
Captures console errors from the user's session so you can debug issues without asking.
Zero Dependencies
Lightweight bundle under 15KB. No external dependencies. Just a script tag and you're live.
Team Collaboration
Invite your team with role-based access. Owners and members work together on feedback.
Admin Notes
Add internal notes to any feedback. Track discussions and decisions with your team.
Visitor Tracking
Anonymous visitor IDs link feedback from the same user across sessions without cookies.
Fully Customizable
Every color, label, position, and size is configurable. Match your brand perfectly.
Cadet
Perfect for exploration
- 1 Project/1 API Key
- 100 Messages/month
- 7-day data retention
- Complete Customization
- Browser Context Capture
- Open Source / Self Host
Commander
For serious missions
- Unlimited Projects/Keys
- Unlimited Messages
- Screenshot capture
- 1-year data retention
- Advanced analytics
- Priority support
- Feedback Management
- E-Mail/Text Notifications
- Github & Other Integrations
Admiral
Command the fleet
- Unlimited Projects
- Unlimited Messaging
- Unlimited Data Retention
- Real-time analytics
- Dedicated support
- API access
- Custom Integrations
- SSO & SAML
- SLA guarantee
Custom Button Icons
Replace the default thumbs up/down icons with custom SVGs, emoji, or any HTML content to match your brand's visual language.
Text Customization & Internationalization
Customize every text label in the Qaid feedback flow. Learn to support multiple languages and create locale-specific experiences.
Custom CSS Magic: Advanced Styling Techniques
Go beyond themes with custom CSS. Learn to create unique feedback button designs with animations, gradients, and creative effects.
Brand Color Matching: A Deep Dive
Master the art of customizing Qaid's color palette to perfectly match your brand. Learn about color theory, accessibility, and CSS custom properties.
Basic Usage
STANDARD<!-- Add the embed to your page -->
<script src="feedback.js" data-endpoint="/api/feedback"></script>Custom Container & Styling
ADVANCED<!-- Custom container and styling -->
<div id="my-feedback" class="fixed bottom-4 right-4 flex gap-2"></div>
<script type="application/json" data-feedback-config>
{
"endpoint": "/api/feedback",
"container": "#my-feedback",
"buttonClass": "my-btn"
}
</script>
<script src="feedback.js"></script>Configuration Options
REFERENCE| Option | Type | Default | Description |
|---|---|---|---|
| endpoint | string | - | Required. API endpoint for feedback submission. |
| container | string | - | CSS selector for custom container. If not provided, creates fixed-position container. |
| buttonClass | string | - | Custom CSS class for thumb buttons. Disables default styles. |
| position | string | "bottom-right" | Button position: "bottom-right", "bottom-left", "top-right", "top-left". |
| offset | {x, y} | {x: 16, y: 16} | Offset from edge in pixels. |
| zIndex | number | 50 | z-index for embed elements. |
| skipTargeting | boolean | false | Skip element targeting, go directly to feedback modal. |
| buttonSize | string | "medium" | Button size: "small" (36px), "medium" (48px), "large" (64px). |
| colors | object | - | {positive, negative, marker} - Custom colors for feedback types. |
| modalWidth | number | 400 | Modal width in pixels. |
| backdropOpacity | number | 0.3 | Backdrop opacity (0-1). |
| fontFamily | string | "system-ui..." | Font family for text elements. |
| fontSize | number | 16 | Base font size in pixels. |
| text | object | - | {tooltip, bannerText, bannerHint, modalTitle, modalSubtitle, placeholder, submitButton, skipButton} |