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
loadedguard to prevent double-loading - Use environment variables — Keep your API key out of source control
- Production-only loading — Check
environment.productionbefore 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
