Progressive Loading and Legacy Browser Fallback
One script tag that loads only what a visitor uses and drops to a compatible build on older browsers. No detection to write yourself.
One script tag. It fetches only the parts a visitor uses, and on an old browser it fetches a different build. Neither needs anything from you, but both show up in the Network panel.
The tag
<script
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
data-endpoint="/api/feedback"
data-api-key="your-api-key"
></script>embed.js is about 0.5 KB gzipped and runs anywhere. It checks what the browser can do, fetches the right build, and passes your data-* config along so one embed starts up.
What loads, and when
A current browser gets the split build. Its core is about 16 KB gzipped: buttons, targeting, accessibility, styles, submit. The rest waits.
| Feature | Loads when |
|---|---|
| Element targeting | the first thumbs click (pre-warmed on hover) |
| Message modal | feedback is submitted |
| Screenshot and annotation | a screenshot is captured |
| Video recording and redaction | recording starts |
A visitor who clicks thumbs-up and leaves never downloads the screenshot or video code.
The old-browser path
Splitting needs native ES modules: Chrome 61, Firefox 60, Safari 11, Edge 16, all from 2018 or before. That covers 98 to 99% of traffic. Older browsers get qaid.umd.cjs instead, one classic script with the lot baked in, about 25 KB. Only they pay for it, and only one build ever runs.
There is a floor. The embed needs Shadow DOM and getDisplayMedia, which landed with modules, so IE11 will not run the UMD build either. The fallback is for the band between: a locked-down work browser, an older WebView.
Skipping the loader
embed.js costs one small request first. Name the build yourself to skip it. Loader alone, no legacy path:
<script
type="module"
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/loader.js"
data-endpoint="/api/feedback"
></script>Or let the browser choose with module and nomodule. It runs one:
<script type="module"
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/loader.js"
data-endpoint="/api/feedback"></script>
<script nomodule defer
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/qaid.umd.cjs"
data-endpoint="/api/feedback"></script>Self-hosting
The UMD file has no chunks to mirror, so it is the easy one to host:
<script
defer
src="/js/qaid-thumbs.umd.cjs"
data-endpoint="/api/feedback"
data-api-key="your-api-key"
></script>Take it from https://unpkg.com/@qaiddev/thumbs-embed/dist/qaid.umd.cjs. No type="module" needed. To keep the split build on your own origin, serve the whole dist/ folder, chunks/ and loader.js included, and point embed.js at your copy.
Checking it worked
Filter the devtools Network panel to JS. You should see embed.js, then loader.js and the core, then targeting-*.js the moment you click a thumb. Turn off module support and reload to watch qaid.umd.cjs load instead.
Nothing at all means a wrong data-endpoint, or a script-src rule blocking the CDN. Troubleshooting common issues covers both.