客服简介

本系统是一套多商户、多应用、多分组、多客服的聊天系统，主要由商户后台、客服端、访客端三部分组成，可为企业或个人提供WEB在线客服聊天营销服务或自建saas服务。本客服系统与其它市面的客服软件不同的是“客服端”也可以接入第三方系统，而后台商户系统仅提供商户入驻、应用管理、客服管理功能。即商户入驻后，只需创建应用、添加相应的客服后，基本不用再登录商户后台，只需要在自已的系统接入客服端登录后进行访客接待管理即可。

技术框架

后端：ThinkPHP8 + Workerman + GatewayWorker

前端：JS + Vue3

数据库：MYSQL

小试牛刀

<script src="https://kf.ongl.cn/static/xchat/js/xchat.js"></script>
// 以下init代码亦可省略，只用上述script一行代码引入即可，亦可携带参数
<script>
XChat.init({
  type: 'visitor',        // 取值[visitor, service]
  open: 1,                // 取值[0,1,2,3,4]，默认0
  text: '聊天XChat',      // 自定义最小化时的按钮文字
})
</script>

所有参数

{
  mode: 'kefu',             // 取值[kefu, room, friend]
  type: 'visitor',          // 取值[visitor, service]
  open: 1,                  // 打开方式，取值[0,1,2,3,4]，默认0
  appName: '',              // 自定义应用名称
  appIcon: '',              // 自定义应用图标
  text: '聊天XChat',        // 自定义最小化时的按钮文字
  icon: '',                 // 自定义最小化时的按钮图标
  token: '',                // 访客时绑定指定客服，客服时关联指定客服
  sendImage: 1,             // 发送图片
  sendFile: 1,              // 发送文件
  sendVoice: 1,             // 发送语音
  theme: 'green',           // 定义主题颜色，颜色值
  socket: '',               // 自定义sokcet地址
  refer: '',                // 自定义访问来源
  rel: '',                  // XChat插入页面指定DOM结点，默认body
  card: {},                 // 页面卡片，键：title、href、intro、cover
  success: function(box) {  // 初始成功回调，可调整界面
    box.querySelector('.xchat-start').style.bottom = '80%'
  },
  onStart: function(cb) {   // 自定义启动
    let init = false, xchat
    // 页面自定义按钮click事件
    document.getElementById('test').onclick = function() {
      if (!init) {
        xchat = cb(true)
        init = true
      } else {
        xchat.toggle(true)
      }
    }
  }
}

启动方式

Linux

# 启动
php think wxh:gateway --worker=Xchat start -d
# 重启
php think wxh:gateway --worker=Xchat resstart -d
# 停止
php think wxh:gateway --worker=Xchat d
# 查看
php think wxh:gateway --worker=Xchat status

Windows

php windows.php