Quick Start
Add to your HTML
<script
src="https://contextcapture.ai/widget.js"
defer
></script>
<script>window.IssueReporter?.init()</script>That's it! The widget will automatically appear on your site. Users can click the floating button to report issues with full context.
Configuration
You can customize the widget by passing options to the init function:
window.IssueReporter?.init({
position: 'bottom-right', // or 'bottom-left'
theme: 'light', // or 'dark'
buttonText: 'Report Bug',
// GitHub repo is auto-detected from your domain config
})Framework Examples
Next.js
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://contextcapture.ai/widget.js"
strategy="afterInteractive"
onLoad={() => window.IssueReporter?.init()}
/>
</body>
</html>
)
}React (Vite/CRA)
// index.html
<script src="https://contextcapture.ai/widget.js" defer></script>
// App.jsx
useEffect(() => {
window.IssueReporter?.init()
}, [])Vue
// main.js
const script = document.createElement('script')
script.src = 'https://contextcapture.ai/widget.js'
script.onload = () => window.IssueReporter?.init()
document.body.appendChild(script)What Gets Captured
Every bug report automatically includes:
- •Screenshot - Pixel-perfect capture of the current viewport
- •Console Logs - Last 50 entries (errors, warnings, logs) with stack traces
- •Element Details - CSS selector, HTML snippet, computed styles (when selected)
- •Browser Info - Browser, OS, viewport size, device type
- •Page Context - Current URL, referrer, selected text
Need Help?
Check out our GitHub repo for more examples and to report issues.