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