Qaid Get Started · Thumbs
Implementation ProtocolsSection 04
READY
> DROP-IN INTEGRATION // ZERO CONFIG REQUIRED

Install via npm

NPM
npm install @qaiddev/thumbs-embed
import { 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
OptionTypeDefaultDescription
endpointstring-Required. API endpoint for feedback submission.
apiKeystring-API key for authenticating with the feedback service.
containerstring-CSS selector for custom container. If not provided, creates fixed-position container.
buttonClassstring-Custom CSS class for thumb buttons. Disables default styles.
positionstring"bottom-right"Button position: "bottom-right", "bottom-left", "top-right", "top-left".
offsetobject-Offset from edge in pixels.
offset.xnumber16Horizontal offset in pixels.
offset.ynumber16Vertical offset in pixels.
zIndexnumber50z-index for embed elements.
skipTargetingbooleanfalseSkip element targeting, go directly to feedback modal.
buttonSizestring"medium"Button size: "small" (36px), "medium" (48px), "large" (64px).
colorsobject-Custom colors for feedback types.
colors.positivestring"rgb(0, 200, 83)"Color for positive feedback.
colors.negativestring"rgb(255, 0, 0)"Color for negative feedback.
colors.markerstring"#6366f1"Color for selected element marker.
modalWidthnumber400Modal width in pixels.
backdropOpacitynumber0.3Backdrop opacity (0-1).
fontFamilystring"system-ui..."Font family for text elements.
fontSizenumber16Base font size in pixels.
textobject-Custom text labels.
text.tooltipstring-Tooltip text for buttons.
text.modalTitlestring"Thank you for your feedback!"Modal title.
text.modalSubtitlestring"Would you like to add..."Modal subtitle.
text.placeholderstring"Optional: Tell us more..."Textarea placeholder.
text.submitButtonstring"Submit"Submit button text.
text.skipButtonstring"Skip"Skip button text.
captureScreenshotbooleanfalseEnable screenshot capture with feedback.
screenshotOptionsobject-Screenshot capture settings.
screenshotOptions.qualitynumber0.8WebP compression quality (0-1).
screenshotOptions.maxWidthnumber1280Max screenshot width in pixels.
screenshotOptions.maxHeightnumber800Max screenshot height in pixels.
screenshotMethodstring"permission""dom" uses html2canvas (no permission), "permission" uses Screen Capture API.
incognitobooleanfalseWhen true, buttons are hidden until hovered.
hideThumbsbooleanfalseHide thumbs up/down buttons. Use with captureVideo for video-only mode.
hideDismissbooleanfalseHide the dismiss (X) button. Auto-set for container mode.
captureVideobooleanfalseEnable video recording button for screen capture feedback.
videoOptionsobject-Video recording settings.
videoOptions.maxDurationnumber15Max recording duration in seconds.
positiveIconstring-Custom SVG string for positive feedback button icon.
negativeIconstring-Custom SVG string for negative feedback button icon.
recordIconstring-Custom SVG string for record button icon.
Integration Complete