Configuration Matrix
CONTROLS
Theme
Colors
Position & Style
Modal & Typography
THUMBS PREVIEW
READY
Click a button to testTHUMBS CODE
<script
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
data-endpoint="https://yourdomain.com/api/feedback"
></script>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. |
| 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