How to Integrate SnagRelay Widget into an Angular Application

Overview

Integrate SnagRelay into your Angular application to capture bug reports with full context. The widget configuration is managed in your dashboard, so the code integration is minimal.

Prerequisites

• A SnagRelay account (sign up free)
• Your SnagRelay API key
• An Angular application (Angular 14+ recommended)

Installation

Option 1: AppComponent (Recommended)

Add the widget initialization to your root AppComponent:

// app.component.ts
import { Component, OnInit } from '@angular/core';

declare global {
  interface Window {
    onSnagRelayLoad: (api: { init: () => void }) => void;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit() {
    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);
  }
}

Replace YOUR_API_KEY with your actual API key.

Option 2: Angular Service

For a cleaner approach using Angular services:

// snagrelay.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SnagRelayService {
  private loaded = false;

  init(apiKey: string): void {
    if (this.loaded) return;
    this.loaded = true;

    (window as any).onSnagRelayLoad = function (api: { init: () => void }) {
      api.init();
    };

    const script = document.createElement('script');
    script.defer = true;
    script.src = `https://app.snagrelay.com/widget/load/${apiKey}?onload=onSnagRelayLoad`;
    document.head.appendChild(script);
  }
}

Then inject and call it in AppComponent:

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { SnagRelayService } from './snagrelay.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(private snagRelay: SnagRelayService) {}

  ngOnInit() {
    this.snagRelay.init('YOUR_API_KEY');
  }
}

Option 3: index.html (Simplest)

The simplest approach: add the script directly to src/index.html:

<!-- src/index.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <app-root></app-root>
    <script>
      window.onSnagRelayLoad = function(api) { api.init(); };
    </script>
    <script
      defer
      src="https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad"
    ></script>
  </body>
</html>

Using Environment Variables

Store your API key in Angular's environment files:

// src/environments/environment.ts
export const environment = {
  production: false,
  snagRelayKey: 'your_api_key_here'
};

// In your component
import { environment } from '../environments/environment';

this.snagRelay.init(environment.snagRelayKey);

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

• Initialize once — Use the service approach with a loaded guard to prevent double-loading
• Use environment variables — Keep your API key out of source control
• Production-only loading — Check environment.production before initializing if you only want the widget in production

Next Steps

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

Further Reading

• SnagRelay for coding agents: how a report reaches Cursor, Claude Code or Codex
• The MCP server: the tools your agent can call
• What every report includes
• Pricing
• Start free, no credit card required