Typebot + Chatwoot — 引导式分流 + 人工兜底

这套方案在解决什么问题#

很多网站的客服痛点不是「AI 不够聪明」，而是「访客来意太杂」：

• 80% 的网页访客其实只想找文档 / 价格 / 联系方式
• 真正需要人工的不到 10%
• 但坐席没法一开始判断，结果首问就被无效问题淹没
• 销售线索没有结构化，丢失严重

Typebot + Chatwoot 用「引导式表单」在最前端做分流，把每个访客的意图、邮箱、问题类别都收集好再决定下一步。它不依赖 LLM——成本极低，但能挡掉 70-80% 的低价值会话。

架构#

何时选这套方案#

你的情况	适合？
网站日 UV < 5,000，访客意图杂	✓ 非常适合
销售线索是关键业务，希望结构化收集	✓ 非常适合
团队没运维能力，越简单越好	✓ 适合（Typebot 单容器）
客户期待「立刻给我答案」	✗ 不适合（这套是引导式）
知识库丰富、想做对话式 Q&A	✗ 选 Chatwoot + Dify

组件与角色#

组件	角色	资源
Typebot Builder	设计 / 编辑流程的可视化工具	1 容器
Typebot Viewer	给访客访问的运行时	1 容器
Chatwoot	工单接收、坐席分配	共用一台机器
PostgreSQL	Typebot + Chatwoot 数据存储	1 容器
Redis	Chatwoot 队列	1 容器

总资源：1 台 4C/8G VPS 完全够用。

部署步骤#

1. 起 Typebot#

git clone https://github.com/baptisteArno/typebot.io
cd typebot.io
cp .env.example .env
# 关键 env：
#   DATABASE_URL=postgresql://...
#   NEXTAUTH_URL=https://flow.example.com  (Builder)
#   NEXT_PUBLIC_VIEWER_URL=https://chat.example.com  (Viewer)
#   ENCRYPTION_SECRET=（32 字节随机）
docker compose up -d

打开 Builder，注册账号，创建第一个 Bot。

2. 设计分流流程#

最简单的 5 步分流：

1. 欢迎 + 选择意图（按钮：文档 / 销售 / 售后 / 其他）
2. 按意图跳转
   - 文档 → Redirect 到 docs.example.com
   - 销售 → 收集邮箱 + 公司 + 问题
   - 售后 → 收集订单号 + 问题描述
   - 其他 → 展示 5 条常见 FAQ，没解决再转人工
3. 「提交」之后调用 Webhook 写入 Chatwoot

Typebot 的 Webhook 节点配置：

URL: https://support.example.com/api/v1/accounts/1/conversations
Method: POST
Headers:
  api_access_token: <Chatwoot User Token>
  Content-Type: application/json
Body:
  {
    "source_id": "{{userEmail}}",
    "inbox_id": 1,
    "contact": {
      "name": "{{userName}}",
      "email": "{{userEmail}}"
    },
    "additional_attributes": {
      "intent": "{{intent}}",
      "company": "{{companyName}}"
    },
    "message": {
      "content": "{{userProblem}}"
    }
  }

3. 网页嵌入#

<!-- 在你的网站 layout 加 -->
<script type="module">
  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'
  Typebot.initBubble({
    typebot: 'your-bot-id',
    apiHost: 'https://chat.example.com',
    theme: {
      button: { backgroundColor: '#4654e6' },
    },
  })
</script>

4. Chatwoot 端配置#

• Chatwoot 创建 Inbox「来自网站」
• 设置自动分配规则：intent == sales → 销售团队，intent == support → 客服团队
• 给 Custom Attribute「intent」「company」加显示，方便坐席快速判断

成本估算#

资源	月费
4C/8G VPS（跑 Typebot + Chatwoot）	$30
域名 + Postmark	$10
合计	~$40 / 月

不需要 LLM 调用，0 tokens 成本。

收益数据（实战）#

一个 SaaS 团队上线 4 周后的数据：

指标	上线前	上线后
坐席日均接入会话	142	38
销售线索结构化率	30%	95%
销售线索数 / 月	56	89
客服 CSAT	3.8	4.4
月度坐席工时	320h	110h

关键结论：坐席处理量降 73%，但销售线索质量与数量都上升。

演进路径#

这套方案的天花板很明显——不解决「希望和 AI 自然对话」的需求。当业务量增长后建议两种演进：

路径 A：加 AI 兜底#

把 Typebot「其他 / 没解决」分支接到 Chatwoot + Dify 的 Dify 应用，让用户继续问。Typebot 在前做结构化分流，Dify 在后做自由问答。

路径 B：转向纯 AI 客服#

如果发现 80% 的会话都被分到「其他」，说明用户更想要对话式体验。直接迁移到 Chatwoot + Dify，把 Typebot 仅留作「报价器 / 销售意向收集表单」之类强结构化场景。

常见坑#

1. Typebot 的 Webhook 在跨域时会被 CSP 拦——Chatwoot 的 nginx 要明确放行
2. 多语言：每种语言一个 Bot，用 ?lang=zh URL 参数切换
3. 手机端体验：Typebot 移动版需要单独调样式，否则 Widget 在 iOS Safari 上会顶起键盘
4. 数据合规：Typebot 收到的数据存在自家 Postgres，但要在隐私政策里说明用途

相关阅读#

• Chatwoot 深度评测
• 开源 AI 客服 KPI 体系