Overview
Integrate SnagRelay into your React application to capture bug reports with full context. The widget configuration is managed in your dashboard, so the code integration is minimal.
Prerequisites
- A SnagRelay account (sign up free)
- Your SnagRelay API key
- A React application (Create React App, Next.js, Vite, etc.)
Installation
Add to Your Root Component
Add the SnagRelay script in your main App.js or index.js using a useEffect hook:
import { useEffect } from 'react';
function App() {
useEffect(() => {
window.onSnagRelayLoad = function (api) {
api.init();
};
const script = document.createElement('script');
script.defer = true;
script.src = 'https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad';
document.head.appendChild(script);
}, []);
return (
// Your app content
);
}
export default App;Replace YOUR_API_KEY with your actual API key.
Next.js Integration
Pages Router
// pages/_app.js
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
window.onSnagRelayLoad = function (api) {
api.init();
};
const script = document.createElement('script');
script.defer = true;
script.src = 'https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad';
document.head.appendChild(script);
}, []);
return <Component {...pageProps} />;
}
export default MyApp;App Router
// app/layout.js
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script id="snagrelay-init" strategy="afterInteractive">
{`window.onSnagRelayLoad = function(api) { api.init(); };`}
</Script>
<Script
src="https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad"
strategy="afterInteractive"
/>
</body>
</html>
);
}That's It!
The widget configuration (position, colors, button text, session replay settings, etc.) is managed in your SnagRelay dashboard. Any changes you make there will automatically apply to your widget.
Best Practices
- Initialize once — Load the widget in your root component only
- Use environment variables — Store your API key in
REACT_APP_SNAGRELAY_KEYorNEXT_PUBLIC_SNAGRELAY_KEY
Next Steps
- Customize the widget in your dashboard
- Set up integrations with your issue tracker
- Configure team members and permissions
Start your free trial — Full-featured bug reporting for React apps.
