Intégration Angular

Créez un service Injectable et initialisez-le dans votre AppComponent :

src/app/support-desk.service.ts

import { Injectable, inject } from '@angular/core';
import { AuthService } from './auth/auth.service';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class SupportDeskService {
  private auth = inject(AuthService);
  private scriptLoaded = false;

  init() {
    this.auth.user$.subscribe((user) => {
      if (!user) return;

      if (this.scriptLoaded) {
        this.initWidget(user);
        return;
      }

      const script = document.createElement('script');
      script.src = environment.supportDeskWidgetUrl;
      script.async = true;
      script.onload = () => {
        this.scriptLoaded = true;
        this.initWidget(user);
      };
      document.head.appendChild(script);
    });
  }

  private initWidget(user: { id: string; email: string; name: string }) {
    const SD = (window as any).SupportDesk;
    if (!SD) return;
    SD.destroy();
    SD.init({
      appId: environment.supportDeskAppId,
      apiKey: environment.supportDeskPublicKey,
      customer: {
        externalId: user.id,
        email: user.email,
        name: user.name,
      },
      theme: { primaryColor: '#2563eb', showButton: false },
    });
  }

  toggle() {
    (window as any).SupportDesk?.toggle();
  }
}

Activation dans AppComponent

src/app/app.component.ts

import { Component, OnInit, inject } from '@angular/core';
import { SupportDeskService } from './support-desk.service';

@Component({ /* ... */ })
export class AppComponent implements OnInit {
  private supportDesk = inject(SupportDeskService);

  ngOnInit() {
    this.supportDesk.init();
  }
}

Bouton personnalisé

<button (click)="supportDesk.toggle()">
  Contacter le support
</button>