Thumbs are our word for positive and negative feedback.
Configuration Matrix
CONTROLS
Theme
Colors
Position & Style
Hide Thumbs needs Video on. With both off the widget has no buttons.
Modal & Typography
THUMBS PREVIEW
READY
Click a button to test. Nothing is saved.THUMBS CODE
<script
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
defer
data-api-key="YOUR_API_KEY"
data-endpoint="https://qaid.dev/api/feedback"
></script>Swap YOUR_API_KEY for your project's key (project Settings, API Keys tab). Or open your project's Customize page, which prints this snippet with the key already in it.
Configuration Ready
Configuration ReferenceSection 04
READY> FULL OPTION REFERENCE // COPY ANY VALUE
The customizer above generates your <script> and npm snippets as you tweak. Below is the full list of options you can pass — every field is optional except endpoint.
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. |
| hideConfirmation | boolean | false | Skip the success screen shown after a message is sent. |
| 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