Web Chat Support

一个轻量、可自托管的在线客服系统。
一行 JS 代码接入任意网站，支持 人工 / AI 自动回复 双模式，多产品独立 AI 智能客服，配备跨平台桌面管理客户端。

进入管理后台

功能概览

💬

访客端（Widget）

  • 右下角跳动客服图标，点击弹出聊天窗口
  • 支持发送文字与图片
  • 实时显示人工 / AI 模式与客服在线状态
  • 可选自定义主题色
  • 支持按产品独立接入，加载对应产品的 AI 智能客服
📂

管理后台

  • 实时收发消息，会话打标签
  • 一键切换 转人工 / 转 AI / 结束会话
  • 产品管理：为每个产品配置独立 AI 客服、Prompt 与专属知识库
  • 自动从聊天内容提取手机号、邮箱、微信号
  • 全部访客列表与搜索
  • 超级管理员可创建子账户并分配权限
  • 连续 5 次登录失败锁定 5 分钟
  • 邮箱验证码找回密码
⚙

系统设置

  • AI 接口：兼容 OpenAI API，可配置地址 + Key + 模型 + 自定义 Prompt，一键测试连接
  • SMTP 邮件：预填 163 邮箱配置，可发送测试邮件
  • 数据库：默认 SQLite，后台可切换 MySQL（自动建库迁移数据）
  • 自动生成接入代码，产品列表可一键复制带产品 ID 的接入代码

一行代码接入

在任意网站 </body> 前加入以下 script 标签即可：

<!-- 客服挂件 -->
<script src="/widget.js" data-color="#4f6ef7"></script>

可选属性 data-color 自定义主题色（如 #ff5a5f）； 使用 data-product 可接入指定产品的独立 AI 智能客服（详见下方「多产品独立 AI 智能客服」）。 如果使用宝塔部署，请将 /widget.js 替换为完整 URL（如 https://kefu.yourdomain.com/widget.js）。

多产品独立 AI 智能客服

同一家公司有多个产品时，可为每个产品创建独立的 AI 智能客服：各自拥有专属的 AI Prompt、客服名称、欢迎语与主题色，并绑定各自的知识库，回答更精准； 所有产品共用同一套后台。前台接入时通过 data-product 指定产品 ID，即可加载对应产品的智能客服，与其他产品完全隔离。

<!-- 接入“产品A”的独立智能客服 -->
<script src="https://kefu.yourdomain.com/widget.js" data-product="产品ID"></script>

使用步骤

  1. 后台「产品」中新增产品，配置专属 Prompt / 名称 / 欢迎语 / 主题色
  2. 在产品列表点击「复制接入代码」，获取带产品 ID 的 script 标签
  3. 粘贴到对应产品官网 </body> 前即可
  4. 在「知识库」新增条目时可绑定一个或多个产品，实现知识隔离

默认（不传产品 ID）

  • 使用系统默认配置的 AI 客服
  • 可回答全部产品的咨询（全量知识库）
  • 兼容单产品 / 未配置产品的场景
  • 产品 ID 为随机字符，不暴露自增编号，更安全

实时演示

当前系统状态

右下角已加载客服挂件，点击图标即可发起对话。

客服在线 人工 / AI 双模式 管理员登录后台后可在线回复

快速部署

🖥 PHP 内置服务器

适用于本地开发或临时使用，一行命令启动：

php -S 0.0.0.0:8218 -t public public/index.php -d upload_max_filesize=10M

启动后访问 /admin/，默认管理员 admin / admin。

🛣 宝塔面板（推荐）

适用于生产环境，Nginx + PHP-FPM 方案：

  1. 上传 server/server/ 目录到站点根目录
  2. 配置 Nginx，root 指向 public/
  3. 设置 open_basedir 允许访问上级目录
  4. 设置 data/ 和 uploads/ 目录为 755
  5. 访问 /admin/ 即可开始使用

系统设置

功能说明
AI 接口兼容 OpenAI API，可配置接口地址 + API Key + 模型 + 自定义 Prompt，一键测试连接
SMTP 邮件预填 163 邮箱配置（授权码方式），可发送测试邮件；用于找回密码
数据库默认 SQLite 开箱即用；后台可一键切换 MySQL，自动建库并迁移数据
产品管理为每个产品配置独立 AI 客服（Prompt / 名称 / 欢迎语 / 主题色），并一键复制带产品 ID 的接入代码
接入代码自动生成本站的挂件 script 标签，复制即可使用

目录结构

web-chat-support/
├── start.bat # 一键启动脚本
├── desktop/ # Electron 桌面客户端
│ ├── main.js
│ └── package.json
└── server/
  ├── config.php # 全局配置与默认项
  ├── data/ # SQLite 数据库文件（自动生成）
  ├── src/ # 业务逻辑层
  │  ├── Database.php # 数据库抽象（SQLite/MySQL）
  │  ├── Auth.php # 认证与 RBAC
  │  ├── ChatService.php # 聊天核心服务
  │  ├── AiClient.php # AI 对话客户端
  │  ├── Product.php # 产品（独立 AI 智能客服）管理
  │  ├── Mailer.php # 邮件发送
  │  └── Settings.php # 系统设置管理
  └── public/ # Web 入口
     ├── index.php # 路由入口（API + 静态资源）
     ├── widget.js # 网站接入脚本（挂件）
     ├── widget.html # 访客聊天界面（iframe）
     ├── demo.html # 接入演示页
     └── admin/ # 管理后台 SPA
Web Chat Support — MIT License