我之前也被Tidio默认的聊天气泡烦过——它总挡着页面内容，又不想用DOM操作硬改显示状态。后来发现直接用Tidio官方API就能控制，结合自定义按钮实现了想要的效果，分享给大家：

实现思路 #

核心是借助Tidio的tidioChatApi控制聊天窗口的显示逻辑：

• 组件初始化时默认隐藏Tidio原生气泡
• 点击自定义按钮时触发聊天窗口打开
• 监听聊天窗口关闭事件，关闭后重新隐藏原生气泡

完整React组件代码 #

// 自定义聊天按钮组件
const ChatButton = () => {
  // 组件加载时默认隐藏Tidio聊天气泡
  // @ts-ignore 项目无Tidio类型声明时可忽略类型报错
  tidioChatApi.display(false);

  const handleOpenChat = (e) => {
    e.preventDefault();
    // 显示并打开Tidio聊天窗口
    // @ts-ignore
    tidioChatApi.display(true);
    // @ts-ignore
    tidioChatApi.open();

    // 监听聊天窗口关闭事件，关闭后再次隐藏气泡
    // @ts-ignore
    tidioChatApi.on("close", function() {
      // @ts-ignore
      tidioChatApi.display(false);
    });
  }

  return (
    <div className="md:flex hidden">
      <button type="button" className="nav-link p-2" onClick={handleOpenChat}>
        <span className="sr-only">打开聊天</span>
        <span className="flex items-center justify-center h-6 w-6">
          <i className="mgc_message_2_line text-2xl"></i>
        </span>
      </button>
    </div>
  )
}

export default ChatButton;

关键细节说明 #

1. 默认隐藏气泡：组件挂载时调用tidioChatApi.display(false)，直接让原生气泡消失，不用写CSS硬隐藏
2. 自定义按钮触发：点击按钮时先阻止默认行为，再调用display(true)显示聊天容器、open()直接打开聊天窗口
3. 关闭后自动隐藏：通过tidioChatApi.on("close")监听关闭事件，确保关闭聊天后原生气泡不会自动弹出
4. 样式适配：示例用md:flex hidden让按钮仅在中等屏幕及以上显示，图标类是项目自定义的，你可以换成自己的图标或文字

注意事项 #

• 确保页面已正确引入Tidio嵌入脚本，否则tidioChatApi会找不到
• 若用TypeScript，建议添加Tidio类型声明（可自行编写或找社区类型包），就能去掉// @ts-ignore注释
• 按钮样式可根据页面布局随意调整，核心逻辑就是调用那几个Tidio API方法