engineering · 7/22/2026 · 363 words · Friction Bounty
How to install a bug report widget in one script tag
A straight install guide for an in-page bug report widget: plain HTML, Next.js, and what context the widget should capture — no SDK required.
How to install a bug report widget in one script tag
You do not need an npm package to collect in-product bug reports. A single script tag can load a badge, open a form, and send structured reports to your inbox.
This guide covers the pattern used by tools like Friction Bounty: one public key in the page, config loaded from your account, no redeploy to change color or copy.
What the widget should capture
Minimum useful payload:
- Title / short summary
- Description
- Reporter email (so you can reward and reply)
- Page URL
- Browser, OS, viewport
- Optional screenshot
Without URL and environment, reproduction becomes guesswork.
Plain HTML
Place the tag before </body>:
<script
src="https://frictionbounty.app/widget.js"
data-key="fb_pk_your_key_here"
async
></script>Replace the key with the one from your dashboard after signup.
Next.js (App Router)
In your root layout:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://frictionbounty.app/widget.js"
data-key="fb_pk_your_key_here"
strategy="afterInteractive"
/>
</body>
</html>
);
}Shopify themes
Theme liquid can include the same script tag in theme.liquid before </body>. Rewards via Stripe promo codes can work today; native Shopify gift cards are a separate integration path.
Configuration without redeploys
Prefer loading welcome message, color, and position from your account API so marketers can change copy without engineering. The script key identifies the org; the server returns config.
Security notes (keep it boring)
- The public key is not a secret — it only allows creating reports for that org
- Rate-limit by IP on the server
- Validate URLs (https only) and screenshot types/sizes
- Never put Stripe secret keys in the browser
After install
- Submit a test report from a real page
- Confirm it lands in your inbox with context
- Connect Stripe for rewards when you are ready to pay — see pay users to report bugs
Troubleshooting
| Symptom | Check | | --- | --- | | No badge | Script blocked, wrong key, CSP | | Report fails | Network tab, CORS, rate limit | | Screenshot missing | Upload auth, file type, size cap |
Related
Want the keys and inbox ready-made? Start free and copy your snippet from Setup.
Try it
Start free
Install one script tag. Connect Stripe in a click. Pay users when their report helps you ship.
Start free →Keep reading
- Bug bounties for product teams (not just security)
Security bug bounties inspired a useful idea for product teams: pay outsiders who find real failures. Here is how product-focused bounties differ — and how to run one sanely.
- Pay users to report bugs — without the chaos
A calm playbook for rewarding user-reported product bugs: budgets, review rules, Stripe credits vs promo codes, and spam control — written in plain language.
- Silent bugs cost more than loud ones
The bugs that never become tickets are often the ones that quietly erode conversion. Here is how to think about silent failures — without invented statistics.