如何在Angular 14+中切换Tawk浮动聊天按钮的显示/隐藏？

Tawk.to官方提供了JS API用于控制聊天组件的状态，结合Angular的组件逻辑可以轻松实现显示/隐藏的切换。以下是具体实现方案：

步骤1：处理TypeScript全局类型声明 #

由于Tawk_API是挂载在window上的全局对象，需要先声明类型避免TypeScript报错。在项目中创建一个类型声明文件（比如src/types/tawk.d.ts），或者直接在组件顶部添加：

declare global {
  interface Window {
    Tawk_API: {
      showWidget: () => void;
      hideWidget: () => void;
      isWidgetVisible: () => boolean;
      onLoad: (callback: () => void) => void;
    };
  }
}

export {};

步骤2：在Angular组件中实现切换逻辑 #

在需要控制聊天组件的组件中，编写如下代码：

组件TS文件（示例：chat-toggle.component.ts） #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chat-toggle',
  templateUrl: './chat-toggle.component.html',
  styleUrls: ['./chat-toggle.component.css']
})
export class ChatToggleComponent implements OnInit {
  isChatVisible = true;
  private tawkScriptReady = false;

  ngOnInit(): void {
    // 等待Tawk.to脚本加载完成
    if (window.Tawk_API) {
      window.Tawk_API.onLoad(() => {
        this.tawkScriptReady = true;
        // 同步初始可见状态
        this.isChatVisible = window.Tawk_API.isWidgetVisible();
      });
    }
  }

  toggleChatVisibility(): void {
    if (!this.tawkScriptReady) return;

    if (this.isChatVisible) {
      window.Tawk_API.hideWidget();
    } else {
      window.Tawk_API.showWidget();
    }
    this.isChatVisible = !this.isChatVisible;
  }
}

组件HTML文件（示例：chat-toggle.component.html） #

<button (click)="toggleChatVisibility()">
  {{ isChatVisible ? '隐藏聊天组件' : '显示聊天组件' }}
</button>

关键说明 #

• 官方API调用：直接使用Tawk.to提供的showWidget()、hideWidget()方法控制状态，不要手动操作DOM元素，避免组件状态混乱。
• 脚本就绪判断：通过onLoad回调确保脚本完全加载后再执行操作，防止因API未初始化导致的无效调用。
• 状态同步：组件内的isChatVisible变量与聊天组件实际状态绑定，保证按钮文字与组件状态一致。

常见问题排查 #

如果之前切换无效，大概率是以下原因：

• 未等待脚本加载完成就调用API：必须在onLoad回调触发后执行切换逻辑。
• 错误操作DOM元素：Tawk.to组件会自行维护DOM状态，直接调用官方API才是正确方式。

内容的提问来源于stack exchange，提问作者msamyashash