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.
On the Project’s Installation tab, select Web Code. Optionally enable Require authenticated users so the widget stays hidden until an invited person Unlocks the site.
Install
Get your API key from the Installation tab (see
Installation), then add this before the closing
</head> or </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 Installation tab and provide the credentials.
Prefer no embed script?
Use the Chrome Extension install channel instead — SnagRelay - Intelligent Bug Capture injects the widget on Match URLs after each person connects (owners Sign in as owner, invited people Authenticate Chrome).