AID.DEVGet Precision User Feedback For Your Website
READY
TRUSTED BY
Configuration Matrix
CONTROLS
Theme
Colors
Position & Style
Modal & Typography
PREVIEW
READY
Click a button to testCODE OUTPUT
<script
src="https://unpkg.com/@qaiddev/thumbs-embed"
data-endpoint="https://yourdomain.com/api/feedback"
></script>Configuration Ready
System CapabilitiesSection 03
LOADED
TGT
Element Targeting
Users click directly on UI elements to pinpoint exactly what they're giving feedback about.
Active
IMG
Screenshot Capture
Automatically capture the page state when feedback is submitted. See exactly what your users saw.
Active
LOG
Console Capture
Captures console errors from the user's session so you can debug issues without asking.
Active
ZRO
Zero Dependencies
Lightweight bundle under 15KB. No external dependencies. Just a script tag and you're live.
Active
TEM
Team Collaboration
Invite your team with role-based access. Owners and members work together on feedback.
Active
NTS
Admin Notes
Add internal notes to any feedback. Track discussions and decisions with your team.
Active
VIS
Visitor Tracking
Anonymous visitor IDs link feedback from the same user across sessions without cookies.
Active
CFG
Fully Customizable
Every color, label, position, and size is configurable. Match your brand perfectly.
Active
All Systems Nominal
Access LevelsStarfleet Authorization
PRICING MATRIX ACTIVE
MonthlyYearly1 month free!
FRE
Cadet
$0/forever
Perfect for exploration
- 1 Project/1 API Key
- 100 Messages/month
- 7-day data retention
- Complete Customization
- Browser Context Capture
- Open Source / Self Host
PRO
Commander
$99/seat/year
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
ENT
Admiral
Custom
Command the fleet
- Unlimited Projects
- Unlimited Messaging
- Unlimited Data Retention
- Real-time analytics
- Dedicated support
- API access
- Custom Integrations
- SSO & SAML
- SLA guarantee
Customization Guides
Section 05
LOADED > THEMES // CSS // I18N // BRANDING
FEATURED
01
Styling the Modal: Themes & Custom CSS
Learn how to restyle the feedback modal with custom CSS. Override colors, typography, borders, and more to match your brand.
modal css themes
Read guide
02
Conditional Display: Show Feedback at the Right Time
Control when the feedback widget appears based on user state, page URL, or custom application logic.
conditional display advanced
Read guide
03
Escalation Rules: Automatic Priority Detection
Set up rules to automatically flag critical feedback based on keywords, URL patterns, and more.
escalation automation rules
Read guide
04
Accessibility Best Practices: Inclusive Feedback
Ensure your feedback widget is accessible to all users with keyboard navigation, screen readers, and WCAG compliance.
accessibility a11y wcag
Read guide
Implementation ProtocolsSection 04
READY> DROP-IN INTEGRATION // ZERO CONFIG REQUIRED
Install via npm
NPMnpm install @qaiddev/thumbs-embedimport { QaidFeedback } from '@qaiddev/thumbs-embed';
const feedback = new QaidFeedback({
endpoint: '/api/feedback',
apiKey: 'your-api-key'
});Load via CDN
UNPKG<!-- Load from unpkg CDN -->
<script src="https://unpkg.com/@qaiddev/thumbs-embed/dist/qaid.umd.cjs"
data-endpoint="/api/feedback"
data-api-key="your-api-key"></script>Or download the UMD bundle directly to self-host.
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. |
| apiKey | string | - | API key for authenticating with the feedback service. |
| 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 | object | - | Offset from edge in pixels. |
| offset.x | number | 16 | Horizontal offset in pixels. |
| offset.y | number | 16 | Vertical offset 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 | - | Custom colors for feedback types. |
| colors.positive | string | "rgb(0, 200, 83)" | Color for positive feedback. |
| colors.negative | string | "rgb(255, 0, 0)" | Color for negative feedback. |
| colors.marker | string | "#6366f1" | Color for selected element marker. |
| 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 | - | Custom text labels. |
| text.tooltip | string | - | Tooltip text for buttons. |
| text.modalTitle | string | "Thank you for your feedback!" | Modal title. |
| text.modalSubtitle | string | "Would you like to add..." | Modal subtitle. |
| text.placeholder | string | "Optional: Tell us more..." | Textarea placeholder. |
| text.submitButton | string | "Submit" | Submit button text. |
| text.skipButton | string | "Skip" | Skip button text. |
| captureScreenshot | boolean | false | Enable screenshot capture with feedback. |
| screenshotOptions | object | - | Screenshot capture settings. |
| screenshotOptions.quality | number | 0.8 | WebP compression quality (0-1). |
| screenshotOptions.maxWidth | number | 1280 | Max screenshot width in pixels. |
| screenshotOptions.maxHeight | number | 800 | Max screenshot height in pixels. |
| screenshotMethod | string | "permission" | "dom" uses html2canvas (no permission), "permission" uses Screen Capture API. |
| incognito | boolean | false | When true, buttons are hidden until hovered. |
| hideThumbs | boolean | false | Hide thumbs up/down buttons. Use with captureVideo for video-only mode. |
| hideDismiss | boolean | false | Hide the dismiss (X) button. Auto-set for container mode. |
| captureVideo | boolean | false | Enable video recording button for screen capture feedback. |
| videoOptions | object | - | Video recording settings. |
| videoOptions.maxDuration | number | 15 | Max recording duration in seconds. |
| positiveIcon | string | - | Custom SVG string for positive feedback button icon. |
| negativeIcon | string | - | Custom SVG string for negative feedback button icon. |
| recordIcon | string | - | Custom SVG string for record button icon. |
Integration Complete