How to Integrate SnagRelay Widget into WordPress

Overview

Add SnagRelay to your WordPress site for easy bug reporting with screenshots, session replays, and automatic context capture. Choose between our official WordPress plugin or manual integration.

Prerequisites

• A SnagRelay account (sign up free)
• Your SnagRelay API key
• WordPress 5.0 or higher
• Administrator access to your WordPress site

Method 1: WordPress Plugin (Recommended)

Installation

1. Log in to your WordPress admin dashboard
2. Navigate to Plugins → Add New
3. Search for "SnagRelay"
4. Click Install Now, then Activate

Configuration

1. Go to Settings → SnagRelay
2. Enter your API key from the SnagRelay dashboard
3. Configure visibility options:
   • Show to all visitors — Public bug reporting
   • Show to logged-in users only — Internal team feedback
   • Show to administrators only — Admin-only testing
4. Click Save Changes

Plugin Features

• Role-based visibility — Control who sees the widget
• WooCommerce support — Works on shop pages
• Multisite compatible — Works on WordPress multisite networks
• No code required — Simple settings page

Method 2: Manual Integration

If you prefer not to use the plugin, you can add SnagRelay manually.

Option A: Theme Functions

Add this to your theme's functions.php file or a custom plugin:

<?php
function add_snagrelay_widget() {
    $api_key = 'YOUR_API_KEY'; // Replace with your API key
    
    echo "<script>
        window.onSnagRelayLoad = function (api) {
            api.init();
        };
        var script = document.createElement('script');
        script.defer = 1;
        script.src = 'https://app.snagrelay.com/widget/load/{$api_key}?onload=onSnagRelayLoad';
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>";
}
add_action('wp_footer', 'add_snagrelay_widget');
?>

Option B: Theme Header/Footer

If your theme supports custom scripts in the header or footer:

1. Go to Appearance → Theme Editor (or your theme's customizer)
2. Find the footer scripts section
3. Add the SnagRelay script:

<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>

Option C: Header/Footer Plugin

Use a plugin like "Insert Headers and Footers" to add the script without editing theme files.

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

• Use the plugin — It's the easiest way to manage settings
• Child theme — If editing functions.php, use a child theme to survive updates
• Staging first — Test the integration on a staging site before production
• Cache clearing — Clear your WordPress cache after adding the widget

Troubleshooting

Widget not appearing?

• Clear all WordPress caches (plugin caches, CDN, browser)
• Check for JavaScript errors in browser console
• Verify your API key is correct
• Check if another plugin is conflicting

Next Steps

• Invite your team or clients to collaborate
• Set up integrations with your project management tools
• Configure notification preferences in your dashboard

Start your free trial — Bug reporting made easy for WordPress.