Setup Guide

Welcome to the Bugsnap Setup Guide! Here, we'll walk you through the steps to get Bugsnap up and running on your website.

Basic Integration

Copy the Script: Below is the Bugsnap integration script. Make sure to copy it.

    <script>
      (function (w, d, s, o, f, js, fjs) {
        w[o] =
          w[o] ||
          function () {
            (w[o].q = w[o].q || []).push(arguments);
          };
        (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
        js.id = o;
        js.src = f;
        js.async = 1;
        fjs.parentNode.insertBefore(js, fjs);
      })(window, document, "script", "_bugsnapWidget", "https://widget.bugsnap.io/bugsnap-widget.js");
      _bugsnapWidget("init", { api_key: "YOUR_API_KEY" });
    </script>

Replace the Placeholder: Locate the YOUR_API_KEY text in the script and replace it with your actual Bugsnap API key.
Embed in Your Website: Paste the modified script into the <head> section of your website. If you're using platforms like WordPress, this can typically be done via theme settings or a custom script plugin.

Google Tag Manager Integration

For those using Google Tag Manager:

Create a New Tag: Initiate a new Custom HTML tag.
Paste the Script: Insert the modified Bugsnap script into the tag.
Set the Trigger: Configure the tag to fire on all pages or specific pages where you want the Bugsnap widget to be visible.
Publish: Ensure you save and publish your changes to make the widget live.

Testing Your Integration

After integrating, it's essential to test and ensure everything works as expected:

Visit Your Website: Navigate to your website where you've integrated Bugsnap.
Look for the Widget: If you've set the trigger parameter to true, you should see the default Bugsnap button. If not, use your custom trigger or the provided methods to display the widget.
Submit a Test Report: Try sending a test report to ensure the widget functions correctly and the data appears in your Bugsnap dashboard.

Customizing Bugsnap

Once you've set up Bugsnap, you might want to tailor its appearance and behavior to better fit your website's design and user experience. Check out our Customization Guide for detailed instructions on tweaking the widget to your liking.

And that's it! Bugsnap should now be active on your website, ready to capture invaluable feedback and bug reports. If you encounter any issues or need further assistance, reach out to our support team at support@bugsnap.io.

Quick start Customization