Web Widget
Add SnagRelay to any website with one script tag.
The web widget is a floating button that any visitor can click to report a bug. It loads asynchronously and has no measurable impact on page speed.
Install
Get your API key from the Install Code tab of your Project (see
Install Code), then add this before the closing
</body> tag:
<script>
window.onSnagRelayLoad = function (api) {
api.init();
};
</script>
<script
defer
src="https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad"
></script>That's it. Position, colors, button text, capture tools, and form fields are all configured from the dashboard's Project Setup tabs — you don't need to touch the snippet again after installing it.
<!-- just before </body> -->
<script>
window.onSnagRelayLoad = function (api) {
api.init();
};
</script>
<script defer src="https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad"></script>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 */ null;
}// 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/${process.env.NEXT_PUBLIC_SNAGRELAY_KEY}?onload=onSnagRelayLoad`}
strategy="afterInteractive"
/>
</body>
</html>
);
}<script setup>
import { onMounted } from 'vue';
onMounted(() => {
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);
});
</script>Authenticated pages (Basic Auth)
If your site (or staging environment) sits behind HTTP Basic Authentication, screenshots will fail to render unless you enable Screenshot Authentication on the Install Code tab and provide the credentials.
Higher-fidelity screenshots
Installing the companion Chrome Extension improves screenshot capture (e.g. across browser chrome, some cross-origin iframes) for visitors using Chrome, Edge, or Brave. Everyone else falls back to the widget's built-in DOM capture automatically.