如何在Angular应用中正确使用TawkTo JS API？

1. 提前获取配置参数 #

首先准备好你账号对应的TawkTo Widget ID 和 Widget Key，后续接入需要替换到代码中。

2. 注入TawkTo JS脚本 #

2.1 全局注入（全站点使用场景） #

在项目根目录的index.html文件的</body>闭合标签之前插入如下脚本代码，将代码中的占位符替换为你自己的配置参数：

<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/你的Widget ID/你的Widget Key';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>

2.2 按需懒加载（特定页面使用场景） #

如果只需要在部分页面展示聊天组件，不需要全局加载脚本，可以后续在服务中封装动态加载逻辑，避免冗余资源加载。

3. 封装调用服务（推荐） #

为了统一调用API、避免TypeScript类型报错，建议封装一个独立的服务：

1. 执行CLI命令生成服务：
   ng generate service services/tawk-to
2. 编写服务代码：

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

// 全局声明Tawk_API，避免TS类型报错
declare var Tawk_API: any;

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

  /** 显示聊天组件悬浮按钮 */
  showWidget(): void {
    if (typeof Tawk_API === 'undefined') return;
    Tawk_API.showWidget();
  }

  /** 隐藏聊天组件悬浮按钮 */
  hideWidget(): void {
    if (typeof Tawk_API === 'undefined') return;
    Tawk_API.hideWidget();
  }

  /** 展开聊天窗口 */
  expandChat(): void {
    if (typeof Tawk_API === 'undefined') return;
    Tawk_API.expand();
  }

  /** 收起聊天窗口 */
  collapseChat(): void {
    if (typeof Tawk_API === 'undefined') return;
    Tawk_API.collapse();
  }

  /** 同步已登录用户的信息到客服后台 */
  setVisitorProfile(name: string, email: string, phone?: string): void {
    if (typeof Tawk_API === 'undefined') return;
    Tawk_API.setAttributes({
      name,
      email,
      phone
    }, (error: Error) => {
      // 可自定义错误处理逻辑
      console.error('TawkTo设置用户信息失败', error);
    });
  }

  /** 监听聊天状态变化，可选状态：online、away、offline */
  listenChatStatus(callback: (status: 'online' | 'away' | 'offline') => void): void {
    if (typeof Tawk_API === 'undefined') return;
    Tawk_API.on('chatStatusChanged', callback);
  }
}

4. 组件中使用示例 #

在需要使用聊天功能的组件中注入服务直接调用即可：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TawkToService } from 'src/app/services/tawk-to.service';

@Component({
  selector: 'app-support-page',
  templateUrl: './support-page.component.html'
})
export class SupportPageComponent implements OnInit, OnDestroy {
  constructor(private tawkService: TawkToService) {}

  ngOnInit(): void {
    // 进入页面显示聊天组件
    this.tawkService.showWidget();
    // 同步当前登录用户信息
    this.tawkService.setVisitorProfile('张三', 'zhangsan@example.com', '13800138000');
  }

  // 自定义按钮触发展开聊天窗口
  openCustomerService(): void {
    this.tawkService.expandChat();
  }

  ngOnDestroy(): void {
    // 离开页面隐藏聊天组件
    this.tawkService.hideWidget();
  }
}

5. 常见问题处理 #

• 出现Tawk_API is not defined报错：说明JS脚本还未加载完成，可在调用前添加加载状态判断，或者监听脚本加载完成事件后再执行调用逻辑。
• 生产环境CSP拦截：如果项目配置了内容安全策略，需要将tawk.to的相关域名加入允许加载的资源列表。
• SSR场景报错：如果使用Angular Universal服务端渲染，需要先判断当前运行环境是否为浏览器，再执行脚本加载和API调用逻辑，避免服务端运行时报错。

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