如何在Angular应用中使用TawkTo JS接口？

import { Injectable } from '@angular/core';

declare const Tawk_API: any;

@Injectable({
  providedIn: 'root'
})
export class TawkToService {

  constructor() { }

  initializeTawkTo() {
    if (!document.getElementById('tawkto-script')) {
      const tawkToScript = document.createElement('script');
      tawkToScript.id = 'tawkto-script';
      tawkToScript.type = 'text/javascript';
      tawkToScript.innerHTML = `
        var Tawk_API = Tawk_API || {};
        Tawk_API.visitor = {
          name: 'John Doe' // 设置访客姓名
        };
        // 替换为你自己的TawkTo代码片段
        Tawk_API.embedded = {
          /* Your TawkTo embed code */
        };
      `;
      document.head.appendChild(tawkToScript);
    }
  }

  showChat() {
    Tawk_API?.maximize();
  }

  hideChat() {
    Tawk_API?.minimize();
  }

}

import { Component } from '@angular/core';
import { TawkToService } from './tawk-to.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showChat()">显示聊天窗口</button>
    <button (click)="hideChat()">隐藏聊天窗口</button>
  `
})
export class AppComponent {

  constructor(private tawkToService: TawkToService) { }

  showChat() {
    this.tawkToService.showChat();
  }

  hideChat() {
    this.tawkToService.hideChat();
  }

}