现在位置: 首页 / 客服系统 / 正文

CRMChat客服系统

安装教程

老板们别偷工减料哈，步骤一步都别少。少一步，客服系统都异常！

演示系统用的linux debian12，Cent OS镜像也可以，其他系统可能需要自理，比如ubuntu 20系统需要手动安装swoole扩展

先把这些端口在服务器安全组里和宝塔安全里放开：80,443,3306,22,8888,888,6379,20108

搭建环境

推荐使用nginx1.28（低版本也行），PHP7.3-7.4(必须在7.1-7.4之间），mysql5.6-5.7（大部分版本都可以，自己测试）

一、安装PHP插件：fileinfo、redis、swoole4。

进入宝塔面板点击 软件商城 ,点击 PHP设置 .这里以PHP7.3为例;

CRMChat客服系统

 

进入安装扩展,安装:fileinfo、redis、swoole4 扩展插件
CRMChat客服系统

CRMChat客服系统

 

二、删除PHP对应版本中的 proc_open禁用函数。

进入 禁用函数 ,找到 proc_open 删除
CRMChat客服系统

  1. 进入 服务 ,选择重载配置，然后重启
    CRMChat客服系统
    PHP配置完成

站点配置

把"网站压缩包“文件上传到网站根目录解压。

CRMChat客服系统

 

 

设置网站运行目录public，

一. 点击宝塔左侧菜单网站,点击项目站点名称

CRMChat客服系统

 

二. 先设置网站目录域名/crmchat ,保存！设置运行目录为public,保存！

CRMChat客服系统

 

三. 进入 PHP版本 ,选择纯静态,点击 切换

CRMChat客服系统

 

四. 需要配置https的请查看,不需要可跳过;

进入SSL,配置SSL证书,申请成功后点击保存.

CRMChat客服系统

 

五. 配置反向代理

nginx反向代理配置
添加反向代理,代理名称随意填写,尽量为英文,添加目标URL:http://127.0.0.1:20108,后面发送域名填：$host，点击提交保存配置
CRMChat客服系统

如过 添加反向代理 报错失败请先删除 伪静态 里面的配置

配置ws反向代理,点击配置文件
CRMChat客服系统

复制一下内容,替换配置文件（宝塔版本大于等于7.8版本）

#PROXY-START/

location ^~ /
{
    proxy_pass http://127.0.0.1:20108;
    proxy_http_version 1.1;
    proxy_read_timeout 360s;   
    proxy_redirect off; 
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache


    set $static_fileLzXnun8E 0;
    if ( $uri ~* ".(gif|png|jpg|css|js|woff|woff2)$" )
    {
     set $static_fileLzXnun8E 1;
     expires 12h;
        }
    if ( $static_fileLzXnun8E = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

 

替换后,点击保存。

 

运行服务

 

一. 检测命令行PHP版本,如果不再7.1~7.4之间请按照以下教程切换;

  1. 检测PHP版本,如达到要求直接跳过,直接进入 启动命令
    CRMChat客服系统

    2.修改命令行PHP版本
    CRMChat客服系统

 

3.选中使用的PHP版本(这里以PHP7.3为例)
CRMChat客服系统

 

二. 启动命令

 

1.点击打开项目根目录
CRMChat客服系统
2.点开左上角终端
CRMChat客服系统
3.执行swoole启动命令

 

sudo -u www php think swoole restart

 

展示如下界面,启动成功

 

CRMChat客服系统

 

 

启动成功后,则可关闭退出;     

 

打开域名，安装，填域名的时候如果遇到如图提示：sql-mode=NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

 

CRMChat客服系统

 

 

在软件商店-数据库版本（比如mysql5.7）设置-配置文件里，复制sql-mode=NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION替换掉就可以了

 

CRMChat客服系统

 

 

修改完重启数据库，再继续安装

 

CRMChat客服系统
CRMChat客服系统

 

数据库用户名和密码，在宝塔左侧数据库查看（复制用户名的时候，注意下前面是否有空格）管理员账密自己输入一下，其他不用动就可以，安装成功后，用下面代码在根目录终端里重启swoole，就好了

 

php think swoole restart

 

后台：域名/admin

 

客服工作台：域名/kefu

 

手机端

 

扫码下载后绑定域名后测试

 

安卓：

 

20250414234110

 

 

苹果app下载：

 

CRMChat im App Store (apple.com)

 

常见问题

1.页面打开出现502错误

进入网站根目录，点击终端，执行php think swoole restart，然后清楚浏览器缓存之后，再按ctrl+shift+r，强制刷新就好了。

1-1.验证码加载不出来/运行swoole的时候出错

执行php think swoole restart，出现下图错误！

CRMChat客服系统

说明20108端口被占用，可以重启服务器，如果服务器里有其他网站项目正在运行，可以用

sudo lsof -i :20108

 命令查询占用端口，找出进程 ID（PID）之后，使用 kill 命令终止该进程

sudo kill -9 12345
把12345替换成pid数字就好了

2.上传头像图片，显示空白

可能是安装之前没开SSL证书，后续开了SSL证书的原因，在设备管理-系统设置-网址地址这里http改成https，提交就好了

CRMChat客服系统

3.发送图片，图片裂开不显示

在网站-设置-反向代理-把发送域名改成$host，确定，重启Nginx就好了。

CRMChat客服系统

4.客服上传图片显示“非法操作”

这是因为图片上传上限了，先看下如何清除数据库记录教程，把不要的聊天记录清了，然后在网站根目录运行：php think swoole restart  重新打开就好了。

补丁文件： 链 接：https://www.123912.com/s/I2xyVv-66xHd 提取码：5htd   下载后解压后找到：“如果有问题，请看这个/客服上传图片非法操作补丁文件/客服上传图片非法操作补丁文件.zip和使用说明”

 

5.用户前台聊天显示客服不在线，实际客服在线！

一般这种情况会出现在新安装的服务器上，点设置管理-代码获取-重置token。重置后基本就好了！

6.客服挂在网页上没动，过一会自动掉线

在软件商店-PHP7.4,-超时设置里，把100改成86400，这就是一天的时间。改好后，重载，重启就好了

CRMChat客服系统

7.想把用户聊天界面，设置成英文！

https://www.123912.com/s/I2xyVv-9CxHd 提取码:1ALu

下载后根据提示上传覆盖即可！覆盖完成后，如果没变，清空下浏览器缓存就好了。

8.手机APP声音和通知设置

悬浮窗，保持后台运行，通知声音，角标、锁屏通知权限都打开。。
消息推送选择允许通知、悬浮通知、重要程度：优先显示。勿扰时允许提醒

视频演示：https://www.123912.com/s/I2xyVv-3AxHd?提取码:ADfu

9.手机APP图片发送不出去

清除手机app缓存，重新绑定域名登录就好了

CRMChat客服系统

10.手机H5网页图片发送不出去

换浏览器就好了，测试用的uc浏览器，其他浏览器自己试试。下面是uc浏览器点开左下角图片图标演示

CRMChat客服系统

11.手机APP点登陆没反应

修改域名，首先保证域名没错。比如我的演示站就填这个域名：https://kefu.yanshi.fun，注意前缀是https://还是http://，别选错！

12.嵌入网站后，手机页面客服图标太小

打开/public/customerServer.js，找到手机图标代码，修改长宽高和后面背景，如下图所示，这里都设置100px，背景为透明色（代码：background: 'transparent',），根据自己需求来设置！更改后，清除手机浏览器缓存后，再刷新查看。

CRMChat客服系统

13.管理员密码忘记怎么办？

进入宝塔-数据库-找到客服数据库-管理（如果提示未安装，在软件商店里安装一下phpMyAdmin，再返回来点管理），找到eb_system_admin，把这串字符放到后台管理员密码：$2y$10$CPrLvFbANcV0Lt6hTddGNeIBBnRPhEMav7Q0Dn97fIILlvSjSnhJC默认密码为：z123321

CRMChat客服系统

 

使用帮助

1.上传头像

客服头像上传

CRMChat客服系统

游客头像上传

CRMChat客服系统

2.用户聊天框侧边广告设置

CRMChat客服系统

3.自动回复添加图片

先把图片上传到运行目录public下，这里我新建了一个文件夹diy，不建也行，直接放。
CRMChat客服系统

到客服工作台自动回复里，把代码放上去： <a href="http://链接地址">描述文字</a>
<img src="http://图片地址/diy/4tu.jpg">

CRMChat客服系统

上面是文字+超链接，带图片。也可以图片+超链接：
<a href="https://链接地址" target="_blank"> <img src="http://图片地址/diy/4tu.jpg">

不懂代码的直接让豆包帮忙生成就行。

4.如何清除聊天记录

宝塔后台-数据库-管理，进入phpmyadmin，删除eb_chat_service_dialogue_record和eb_chat_service_record表内内容，

 

CRMChat客服系统

5.如何让用户聊天链接变短

在网站运行目录创建1.html文件，然后把下面跳转代码中的https://www.baidu.com改成自己的用户聊天超链接，放进1.html文件里，这样输入域名/1.html，就能直接跳转用户聊天链接了。

<script>location.href='https://www.baidu.com';</script>

  CRMChat客服系统

6.如何更换域名

1、首先到购买的域名控制台里，解析域名到服务器公网ip。

2、然后进入宝塔后台，点网站-设置-域名管理-把要更换的域名添加进去。

CRMChat客服系统

3、在客服后台-设置管理，把域名换掉。（换完域名，客服和游客图片不显示的话，记得重新再上传一下图片）

CRMChat客服系统

7.app打包

如果现有app满足不了你，你可以自己进行打包！

此项目由uniapp框架编写，需要使用Hbuilder X编译器进行运行和发布，支持浏览器调试，支持发行为APP和H5，其他发行方式不支持。需要Hubilder X安装less插件、sass插件、stylus编译。运行时请先安装插件。

APP源码存放位置：template\uniapp 目录下

配置

一、配置APP应用ID

打开编译器点击manifest.json,需要重新获取应用标识。这一步是必须的，其他选项根据自身需求更换名称。

CRMChat客服系统

二、配置APP图标

打开编译器点击manifest.json,点击浏览选择一张1024*1024png格式的图片，然后点击自动生成所有图标并替换会自动生成图标
CRMChat客服系统

三、APP模块配置

打开编译器点击manifest.json,点击左侧APP模块配置，找到Push(消息推送)并勾选，其他模块暂时不用配置
CRMChat客服系统

四、APP权限配置

打开编译器点击manifest.json，需要增加如下权限。点击源码视图，搜索：‘android打包配置’沾粘在permissions对象里面

[
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.INTERNET\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_SMS\"/>",
                    "<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SMS\"/>"
                ]

如下图
CRMChat客服系统

IOS隐私信息访问描述配置，点击左侧APP权限配置找到IOS隐私信息访问描述，需要配置说明：相册-读、相册-写、摄像头、访问本地网络
CRMChat客服系统

调试

调试可在浏览器上调试或者真机调试，真机调试需要使用数据线连接Hbuilder X编译器，安卓需要打开 USB调试模式

一、浏览器调试

  1. 点击菜单栏的运行->运行到浏览器->chrome
    CRMChat客服系统
  2. 运行到浏览器上后，会直接进入登录页面，点击修改域名
    CRMChat客服系统
  3. 输入自己安装配置的域名和请求协议点击确定，再次进入登录页面，输入账号密码就可以登录使用
    CRMChat客服系统

打包

一、申请打包证书

  • 安卓打包证书生成文档：https://ask.dcloud.net.cn/article/35777
  • IOS打包证书生成文档：https://ask.dcloud.net.cn/article/152

    二、安卓打包

    打开编译器，点击菜单上发发行->原生APP-云打包，输入申请的证书，勾选打正式包、安心打包。点击打包等待服务器打包完成。
    CRMChat客服系统

    三、IOS打包

    打开编译器，点击菜单上发发行->原生APP-云打包，输入申请的证书，勾选打正式包、安心打包。点击打包等待服务器打包完成。打包方式和安卓差不多一样
    CRMChat客服系统

    四、上传IOS应用，实际上ios打包和安卓没有太大区别，只要证书申请下来，打包也不是什么问题，至于打包后怎么上传IOS应用，请看以下说明

  1. windows用户可以下载appuploader软件appuploader官网
  2. 使用appuploader软件，点击certifcation弹出登录页面进行登录
    CRMChat客服系统
  3. 点击IPA，输入apple账号email账号，输入app专用密码，如果没有请查看：apple专用密码说明。点击save保存专用密码。后进入上传APP界面，选择下载好的IPA文件上传
    CRMChat客服系统

    五、IOS应用发布

  4. 登录APPLE应用管理后台https://appstoreconnect.apple.com/login
  5. 没有APP则新建一个，然后点击刚创建的app进入管理
    CRMChat客服系统
  6. 需要填写综合项内的APP信息、价格与销售范围、APP隐私。APP隐私需要填写一个隐私政策地址，隐私内容如：https://chat.crmeb.net/chat.html。实际情况下可按照此隐私协议修改为自己的协议
    CRMChat客服系统
  7. 准备提交版本，需要填写APP预览和截图（iphone6.5和5.5显示屏至少两个）、关键字（根据自身填写）、描述（根据自身填写）、构建版本（这里的构建版本就是在刚才上传的ipa文件会展示到当前界面的TestFlight菜单里面，管理员可下载TestFlight应用进行测试）、App审核信息（利于过审）、版本发布（选择自动发布此版本）。填写好后点击存储，然后再点击提交以供审核。ios的一个版本就等待审核了。

8.app消息推送

客服消息推送使用的是uniPush集成各家手机推送及个推，是个推的升级版。个推使用文档：https://docs.getui.com/getui/start/product/。

流程

  1. 申请开通uniPush
  2. 配置UNI Push应用设置
  3. 复制uni Push内的配置信息到客服后台
  4. 上传IOS推送p12证书
  5. 安卓应用需要去各大厂商内商家APP然后再配置厂商推送配置
  6. app离线推送和在线推送配置完成

    开始配置

    一、开通uniPush

    登录https://dev.dcloud.net.cn/。进入APP管理
    CRMChat客服系统
    找到uni Push一栏，点击修改应用信息。填写好应用签名、包名、ios bundleld。点击开通。
    CRMChat客服系统

    二、配置uniPush

    开通uniPush后如下页面
    CRMChat客服系统

点击左侧的配置管理->应用配置

CRMChat客服系统

首先需要配置IOS的推送消息证书，申请文档：https://docs.getui.com/getui/mobile/ios/apns/。这里的p12证书和打包的p12证书有点不同。申请下来后，在上图中上传。

复制应用配置中的应用信息，填写到客服后台的设置管理->系统设置->uniPush配置一栏

CRMChat客服系统
CRMChat客服系统

到此时，IOS的在线和离线推送全部配置完成。安卓的在线推送完成

三、安卓厂商推送

安卓厂商就是一个大杂烩，好多个大平台。需要每个平台内进行申请上架上架后再次申请消息推送就能使用，这里整理出几个大厂商的平台地址可供上架

除华为外，其他申请推送消息还算简单，这里主要说明华为上架APP和消息推送开通配置（华为审核能通过其他厂商也不是问题的）

  1. 登录进华为开发者管理平台点击管理中心
    CRMChat客服系统
  2. 点击应用服务->上架及推广服务
    CRMChat客服系统
  3. 点击我的应用
    CRMChat客服系统
  4. 进入我的应用列表后点击新建。添加应用名称、应用分类（选择应用）、默认语言（选择简体中文），一定要勾选添加到项目里面，然后输入项目名称（华为在创建应用后没有添加到项目，然后再去添加项目，关联不上当前的应用应该是华为平台的bug导致的，如果遇到就找客服人工处理下）
    CRMChat客服系统
  5. 点击列表上的应用，进入管理应用界面。需要填写：AppGallery华为应用市场(选择中国大陆)、是否开放式测试版本（根据自身选择）、软件版本(选择打包好的安卓app上传上去)、隐私政策网址（填写协议地址和ios的隐私协议一个地址就行）、应用版权证书或代理证书（软著和免责声明都需要）。填写好后点击提交审核。
    CRMChat客服系统
  6. 开通消息推送，点击我的项目，进入在第4步创建的项目
    CRMChat客服系统
  7. 查看应用信息中相应的华为 AppID、华为 SecretKey。该信息在之后步骤中将会使用，如下图
    CRMChat客服系统
  8. 在 “项目设置 > 增长” 中选择“推送服务”，点击“立即开通”，以此来开启华为侧推送服务状态
    CRMChat客服系统
  9. 在 “项目设置 > 常规” 中填写“ SHA256证书指纹 ”，点击右侧对勾进行保存；若不知道具体值，请参考 SHA256指纹证书获取 。
  10. 在 “项目设置 > 推送服务> 配置”中开通项目回执状态，配置个推侧的回调地址以及HTTPS证书。如下
    CRMChat客服系统
    回执名称可自定义
    回调地址(杭州机房)
https://thirdrcp-hz.getui.com/hw

HTTPS证书

-----BEGIN CERTIFICATE-----
MIIGrDCCBZSgAwIBAgIQB0D9NX2MGYX7U16uPL4ZfTANBgkqhkiG9w0BAQsFADBf
MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
d3cuZGlnaWNlcnQuY29tMR4wHAYDVQQDExVHZW9UcnVzdCBDTiBSU0EgQ0EgRzEw
HhcNMjEwNjA4MDAwMDAwWhcNMjIwNjE1MjM1OTU5WjB0MQswCQYDVQQGEwJDTjES
MBAGA1UECAwJ5rWZ5rGf55yBMRIwEAYDVQQHDAnmna3lt57luIIxJzAlBgNVBAoM
Huavj+aXpeS6kuWKqOiCoeS7veaciemZkOWFrOWPuDEUMBIGA1UEAwwLKi5nZXR1
aS5jb20wggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC1z29MoeLBlrXa
v+uIHn7MunAmD3t3nKlj1STyO+I+dmJlk/iz64Ussgwr2oyT7fY/LgzA2I7n2OQi
0sdA8TUTGEFvRV2ZEndjeWVVn2nb8mXPD/LfpwjlVXMu8b6hvwPbVwiDi2XLpA01
uqxd7luWGxqWbP9efbTUtARVG7wkttlrbKoZ5J4aNT/XHYlvUbBsuq/RUCmwwxzm
vvwzvlII18c5CJZj2rBLwIxdwP/pU3MHGyiQna0v8dRl9ME6G2QdzHPNfchhkTdB
M5/RVbfElAnMFYtmsWl3qyef4HpxoTEFdUpIjyHu+Q52UC4EHMUDVyltKMpmpWT7
itRDaJ/RAgMBAAGjggNNMIIDSTAfBgNVHSMEGDAWgBSRn14xFa4Qn61gwffBzKpI
NC8MJjAdBgNVHQ4EFgQUb74ZxaQHDCGOajJVBnbCTYPHVkkwIQYDVR0RBBowGIIL
Ki5nZXR1aS5jb22CCWdldHVpLmNvbTAOBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYw
FAYIKwYBBQUHAwEGCCsGAQUFBwMCMHUGA1UdHwRuMGwwNKAyoDCGLmh0dHA6Ly9j
cmwzLmRpZ2ljZXJ0LmNvbS9HZW9UcnVzdENOUlNBQ0FHMS5jcmwwNKAyoDCGLmh0
dHA6Ly9jcmw0LmRpZ2ljZXJ0LmNvbS9HZW9UcnVzdENOUlNBQ0FHMS5jcmwwPgYD
VR0gBDcwNTAzBgZngQwBAgIwKTAnBggrBgEFBQcCARYbaHR0cDovL3d3dy5kaWdp
Y2VydC5jb20vQ1BTMG8GCCsGAQUFBwEBBGMwYTAhBggrBgEFBQcwAYYVaHR0cDov
L29jc3AuZGNvY3NwLmNuMDwGCCsGAQUFBzAChjBodHRwOi8vY3JsLmRpZ2ljZXJ0
LWNuLmNvbS9HZW9UcnVzdENOUlNBQ0FHMS5jcnQwDAYDVR0TAQH/BAIwADCCAX0G
CisGAQQB1nkCBAIEggFtBIIBaQFnAHUAKXm+8J45OSHwVnOfY6V35b5XfZxgCvj5
TV0mXCVdx4QAAAF56aZtUAAABAMARjBEAiACZX790zhQCiZmmN7zbWlmCxzAPT+p
Aof3L+Ew+g13SgIgM8fG372a/uyMK8QBGJoCbqYP6EA70ELD+yJy4WRUwDAAdQAi
RUUHWVUkVpY/oS/x922G4CMmY63AS39dxoNcbuIPAgAAAXnppm0rAAAEAwBGMEQC
IDO+rfNYB6bfaK9zS7AoBM6ZNPx++WA13JcxaH03sslRAiAam8XaEsCUOT7TNe/8
LjqMNsuFL9iAxQabtNvIhldbvgB3AFGjsPX9AXmcVm24N3iPDKR6zBsny/eeiEKa
Df7UiwXlAAABeemmbW4AAAQDAEgwRgIhAPWyMK37IqLxclln51T/fg1B/r9sZv4w
TpC8xvsI3nExAiEAvyAyIap5eITHOqXPF+E5gzyHkgOvF5zrjL6DdERXVG4wDQYJ
KoZIhvcNAQELBQADggEBAG6W8Hn57NM3T/yqy+6gtEfksW5OEXbprMWeZc9VGbne
ULDk7KRaARDWT7TZEF3jbI0VOGc9sXYkizDbQYXM81eee5utGCaFESroWxZnVNgp
QVSe99iLmRzb01dB65GatedsG6wqL5hxSt+Kh9v00PlpK08/NGNQ9nKXd6xuBFUy
//6XgBcEPlqDB6pPj4fWRTg/F9vLlpkcP41zYbJJ9MlyEBxCecnyIkaekJQC0KgY
xirrh8fUHM/5vc8f5Q6FU0AQAoZyNvr/dxRmjJCvCdiF35AUDzE5xSf8cOYQnYHo
tNHrH4+e8mXBSQANTLxGJf7E7EZTMSu4NLoa5xS65DQ=
-----END CERTIFICATE-----

点击“提交”，提示“成功”则表示配置成功

  1. 进入https://dev.dcloud.net.cn/点击应用->uni push->厂商推送设置
    CRMChat客服系统

四、其他厂商推送开通指南

个推厂商应用开通指南

9.灵活的超链接使用

获取超链接

CRMChat客服系统

使用场景

站外广告
站外新闻
站外博客
站内广告
站内链接
app中使用
小程序中使用（使用说明：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html）

超链接参数说明

token:与后台交互的凭证
noCanClose:PC端是否显示广告
deviceType:手动适应浏览器类型Mobile移动端
uid:用户ID
nickName:用户昵称
phone:用户手机号
sex:用户性别
avatar:用户头像
openid:用户第三方授权的openid
kefu_id:客服ID

示例：
https://chat.crmeb.net/chat/index?noCanClose=1&token=e8bcc017f50e55c63b5352c4257c8904

指定客服
https://chat.crmeb.net/chat/index?noCanClose=1&token=e8bcc017f50e55c63b5352c4257c8904&kefu_id=1

[info]提示：token参数必须带的，后面新添加参数‘&’隔开

例如要传用户昵称，用户ID
https://chat.crmeb.net/chat/index?noCanClose=1&token=e8bcc017f50e55c63b5352c4257c8904&uid=1&nickName=zhangsan

 

10.站点引用

第一步 获取js代码

CRMChat客服系统

<script>
  (function() {
  _s = document.createElement('script');
  _s.src="https://chat.crmeb.net/customerServer.js"
  _s.onload = function(){
  var option = {
        "authInit":true,
        openUrl: 'https://chat.crmeb.net/',//这个自动获取您的网址
        token: '4109fbb2d7bc3d5559348278816a20bc',//必填自动获取系统token
        kefuid:'',//默认为空自动对接客服，可填写指定客服ID
        isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true
        mobileIcon: '', //  手机端悬浮客服图片
        pcIcon: '', // pc端悬浮客服图片
        windowStyle:'center',//默认空 右下角小弹窗， center 普通中间弹窗样式       
        "version":"v4"
      };
      var canCustomerServer = new initCustomerServer(option);
      canCustomerServer.init();
  }
  document.head.appendChild(_s)
  })();
</script>

第二步 请进入自己客服系统后台复制代码，添加到您网址页面内

效果图
CRMChat客服系统
移动版效果图
CRMChat客服系统

11.深入对接客服

第一步引入js

CRMChat客服系统
1、常规引用js方法

<script src="https://chat.crmeb.net/customerServer.js"></script>

2、如果您的项目是基于webpack或其他工具构建的，并且您不想通过操作html文件来引入js，则推荐您在入口文件中写下以下代码

<script>
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://chat.crmeb.net/customerServer.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })()
</script>

调用客服功能

var option = {
    openUrl: "https://chat.crmeb.net", // 打开客服聊天框的地址，即：部署后台管理系统的地址，若未填写，则自动获取当前服务器的地址
    token: e8bcc017f50e55c63b5352c4257c8904, // token,与后台交互的凭证
    kefuid:'',//默认为空自动对接客服，可填写指定客服ID
    isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true
    mobileIcon: '', //  手机端悬浮客服图片
    pcIcon: '', // pc端悬浮客服图片
    windowStyle:'center',//默认空 右下角小弹窗， center 普通中间弹窗样式
    domId: 'customerServerTip',//展示在页面右下角联系客服的dom的id，可根据id获取到dom后自行修改样式, 默认为customerServerTip
    insertDomNode: '.getCode_container', // SPA应用必填，html文件单独引入选填，表示插入客服弹窗的 dom节点，一般为当前界面的根节点，默认为body
    //设置客户信息
    sendUserData: {
        uid: '1', // 用户id
        nickName: '', // 用户昵称
        phone: '', // 用户联系方式
        sex: '1', // 用户性别
        avatar: '', // 用户头像 URL地址
        openid: ''//微信openid
    }，
    //设置默认打开推送产品
    productInfo: {
        store_name: '蒙奇 D 路飞',
        stock: '库存',
        sales: '122', // 销量
        ficti: '10', // 赠送
        price: '100',
        image: ''//产品图片
        proUrl:''//产品链接
    }
};

var canCustomerServer = new initCustomerServer(option);
//实例化加载客服组建
canCustomerServer.init();

//样式设置说明
canCustomerServer.setStyleOfCustomerServer(this.canCustomerServer.connentServerDom,{
            bottom:'300px',
            left:'50%'
        });
// 调用打开客服弹窗的方法，如果isShowTip为false，就使用这个函数，当然也可以使用A链接
canCustomerServer.getCustomeServer();

[info] 温馨提示，请到系统后台复制对应代码，以上代码请求地址和token请更换自己系统中的
例如公众号商城内深度对接客服示例：
1、页面引入js

<script src="https://chat.crmeb.net/customerServer.js"></script>

2、参数负值

<script>
var option = {
    openUrl: "https://chat.crmeb.net", // 打开客服聊天框的地址，即：部署后台管理系统的地址，若未填写，则自动获取当前服务器的地址
    token: e8bcc017f50e55c63b5352c4257c8904, // token,与后台交互的凭证
    kefuid:'',//默认为空自动对接客服，可填写指定客服ID
    isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true
    mobileIcon: '', //  手机端悬浮客服图片
    pcIcon: '', // pc端悬浮客服图片
    windowStyle:'center',//默认空 右下角小弹窗， center 普通中间弹窗样式
    //设置客户信息
    sendUserData: {
        uid: '1', // 用户id
        nickName: '聆听', // 用户昵称
        phone: '13688888888', // 用户联系方式
        sex: '1', // 用户性别
        avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKia5uKc8B0wcxPUUykQ5qXiagQG75PVnIpb7wT1HoFibrNMbKniaZM1TLCpZiaxHEu7pxknrqnXcKtUBw/132', // 用户头像 URL地址
        openid: 'oREIr5M4KP_05PXWS9Nis2USNEvU'//微信openid
    }
};
//初始化
var canCustomerServer = new initCustomerServer(option);
//实例化加载客服组建
canCustomerServer.init();
//打开客服聊天框
canCustomerServer.getCustomeServer();
</script>