Flutter中集成tawk.to与Dialogflow实现客服切换方案咨询

一、tawk.to 后台前置配置 #

• 注册并登录tawk.to账号，按引导完成站点基础信息填写，进入管理面板后依次打开「Administration」-「Channels」-「Chat Widget」板块，生成专属聊天组件，记录3个核心参数：directChatLink、siteId、widgetId，后续Flutter端初始化需要用到。
• 在后台提前配置客服团队接待规则：包括客服坐席分组、上班时段、离线自动回复、欢迎语内容，同时和现有Dialogflow机器人的分流规则对齐——仅当用户主动选择「与专家对话」选项时才触发人工通道，默认咨询场景仍走AI机器人，避免流量误分配。
• 提前在后台配置访客自定义属性字段，比如用户ID、会员等级、历史咨询标签，方便转人工时把用户上下文同步给客服，减少用户重复描述问题的成本。

二、Flutter端接入实现步骤 #

目前有两种成熟的接入方式，根据项目需求选就行：

方式1：使用维护稳定的pub插件快速接入（推荐） #

• 在项目根目录的pubspec.yaml中添加tawkto依赖，执行flutter pub get拉取包到本地。
• 在AI聊天页的「与专家对话」按钮点击回调中，跳转到独立的人工客服会话页面，页面内初始化tawk组件，基础实现代码参考：

import 'package:tawkto/tawkto.dart';
import 'package:flutter/material.dart';

class ExpertChatPage extends StatelessWidget {
  const ExpertChatPage({super.key, required this.userInfo, required this.chatLogSummary});
  // 传入已登录的用户信息、Dialogflow历史对话摘要
  final Map<String, dynamic> userInfo;
  final String chatLogSummary;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('专家咨询')),
      body: Tawk(
        directChatLink: '替换为你后台拿到的directChatLink',
        visitor: TawkVisitor(
          name: userInfo['nickname'],
          email: userInfo['email'],
          additionalAttributes: {
            'userId': userInfo['userId'],
            'dialogflowChatSummary': chatLogSummary,
            'source': 'Flutter_APP'
          },
        ),
        onLoad: () {
          // 关闭加载态、上报转人工埋点
        },
        onLinkTap: (url) {
          // 处理会话内链接点击，跳转APP内路由或系统浏览器
        },
      ),
    );
  }
}

• 做基础交互兼容：监听页面返回事件，用户未结束会话点击返回时弹出二次确认；如果组件返回客服离线状态，自动提示用户可提交留言，或引导切回AI机器人通道。

方式2：基于webview自定义嵌入（适合高度定制需求） #

如果不想引入第三方封装的插件，可以直接用官方webview_flutter组件实现：

• 添加webview_flutter依赖，在会话页初始化WebViewController，开启JavaScript执行权限，加载之前拿到的directChatLink地址。
• 通过JavaScriptChannel处理tawk的原生事件回调，比如会话开始、新消息提醒、会话结束、客服离线等状态，同步给Flutter端做对应的UI交互。
• 这种方式灵活度更高，可以自定义注入JS修改聊天窗口的样式、拦截特定事件，适合对客服页UI有强定制要求的场景。

三、和现有Dialogflow机器人的衔接注意点 #

• 分流触发加防抖：用户点击「与专家对话」后先展示加载态，等tawk通道初始化完成再跳转页面，避免重复触发或者点击无响应。
• 上下文自动同步：转人工时把用户和Dialogflow的对话摘要、用户基础信息通过访客属性传给客服端，不用用户重复描述问题。
• 会话结束自动切回：监听到客服主动结束会话、用户主动关闭会话的事件后，自动路由回AI聊天页面，不要停留在空白的客服会话页。
• 权限配置别漏：iOS端需要在Info.plist中添加允许HTTP加载、网络访问的相关配置，Android端需要在AndroidManifest.xml中声明网络权限，不然会出现聊天窗口加载失败的问题。

四、可参考的实现资料 #

• tawk.to官方帮助中心的Chat Widget配置板块，包含所有组件自定义参数、JS事件API、访客属性配置的详细说明，比如修改聊天窗口主题色、配置未读消息回调、设置自动触发消息等需求都可以在这里找到实现方法。
• 所用Flutter插件的pub详情页，里面附了完整的示例代码，以及iOS、Android端的兼容配置说明，比如iOS端webview的手势兼容、Android端硬件加速导致的页面渲染问题都有对应的解决方案。
• 实际开发中如果遇到加载异常，可以先在普通浏览器打开你拿到的directChatLink测试链接是否正常，先排查后台配置问题，再定位端上的兼容问题。

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