Integrate SnagRelay Into Laravel

How to Integrate SnagRelay Widget into a Laravel Application

Add visual bug reporting to Laravel with the element, requests, session replay and error context. It is one script tag, so it works with Blade, Livewire and Inertia.

Overview

Integrate SnagRelay into your Laravel application to capture bug reports with full context. The widget configuration is managed in your dashboard, making integration simple.

Prerequisites

A SnagRelay account (sign up free)
Your SnagRelay API key
A Laravel application (8.x, 9.x, 10.x, or 11.x)

Installation

Add to Your Layout

Add the SnagRelay script to your main layout file, typically resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content -->
</head>
<body>
    @yield('content')
    
    <!-- SnagRelay Widget -->
    <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>
</body>
</html>

Replace YOUR_API_KEY with your actual API key.

Using Environment Variables

For better security, store the API key in your environment:

# .env
SNAGRELAY_API_KEY=your_api_key_here

// config/services.php
return [
    // ... other services
    
    'snagrelay' => [
        'key' => env('SNAGRELAY_API_KEY'),
    ],
];

Then in your Blade template:

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

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 config files — Store the API key in config/services.php
Environment config — Store sensitive keys in .env, never in version control

Troubleshooting

Widget not showing?

Check browser console for errors
Verify API key is set in .env
Run php artisan config:clear after changing config

Next Steps

Configure team members and permissions
Set up integrations with your issue tracker
Customize widget appearance in your dashboard

What you get after install

Every report arrives in your inbox or tracker with the evidence already attached:

The element
What the reporter pointed at: label, component and selector. Errors tied to it are outlined in red.
Console and JS errors
With file and line, captured up to the moment of the report.
Network requests
Status, URL and request and response bodies, failed and successful.
Session replay
The moments leading up to the bug, with repro steps.
Environment
URL, browser, OS and viewport, plus the screenshot. On paid plans, also video.

Optional

Connect your agent

Add the SnagRelay MCP server once, then paste a prompt that tells your agent to call get_issue_context. After you review the fix, mark_issue_resolved emails the reporter. MCP is on every plan.

https://mcp.snagrelay.com/v1

Add this URL as a remote MCP server, then click Allow. Paste a prompt that tells the agent to call get_issue_context, then mark_issue_resolved only after you have reviewed the fix.