Script Tag

The widget is a small button (or your own link, or a keyboard shortcut) that opens the report flow. It loads asynchronously and doesn't block your page.

On the project's Install tab, choose Script. The snippet there already contains your API key.

Install

Paste this before the closing </head> tag, on every page where people should be able to report:

<script>
  window.onSnagRelayLoad = function (api) {
    api.init();
  };
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Open your site. The Install tab's status flips to Live on your-site.com within a few seconds, with no refresh.

Shorter form

The loader initialises itself, so this one-liner works too. The setup wizard uses it:

<script src="https://app.snagrelay.com/widget/load/YOUR_API_KEY" async></script>

Use the longer form if you want a callback when the widget is ready.

Position, colours, button text, capture mode, markup tools, and form fields are all set from the dashboard (Project Setup). You don't touch the snippet again.

<!-- in <head> -->
<script>
  window.onSnagRelayLoad = function (api) {
    api.init();
  };
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</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>

Open it from your own link

Reporters don't need the floating button. Call SnagRelay.open() from anywhere on the page:

<a href="#" onclick="SnagRelay.open(); return false">Report a problem</a>

Handy in a help menu, a footer, or your own error message. You can also turn on a keyboard shortcut (default Alt+Shift+B) under Widget → Launch. See Launch.

Install

Open it from your own link

Invited reporters only

A site behind a password

Prefer no embed script?

On this page