尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

ECShop在线客服插件从选型到接入:浮窗嵌入、用户信息同步与踩坑指南

ECShop在线客服插件从选型到接入:浮窗嵌入、用户信息同步与踩坑指南 简介ECSHOP在线客服插件是针对ECSHOP开源电商系统定制的一款轻量增强模块适合需要快速为店铺增加实时咨询入口的商家和具备一定开发基础的二次开发者。插件功能覆盖实时聊天、QQ/微信等多渠道接入、客户分组与优先级管理、在线状态显示、聊天记录保存、自动回复模板以及咨询数据统计适配PC与移动端可提升服务响应与销售转化。压缩包共9个文件体积仅28KB包含js脚本、css样式及多张gif/jpg图标素材并附有《OKQQ使用说明.doc》便于快速理解目录结构、完成上传配置。已有184人学习适合希望以轻量方式补齐客服能力、又不愿从零开发通信模块的团队。启用后可直接获得一套包含前端浮层、图标资源和基础交互逻辑的客服功能后续还能基于自身偏好灵活调整样式与回复规则。 前两天一个做ECShop电商代运维的朋友跟我吐槽说店铺后台挂着十来个未读留言全是顾客问今天下单能发货吗有没有优惠券这种现成问题哪条都没人回复。要是当时能有人回一句至少能多揽几单。这话我太有共鸣了——ECShop这个老牌PHP开源商城系统订单、商品、会员、营销模块都给你安排得明明白白唯独缺一个在线客服能力。于是很多人开始搜ECShop在线客服插件这东西本质上是往商城前端注入一段客服组件代码让浮窗全站常驻顾客随时能发起会话。这篇文章我把自己折腾过的选型思路、植入步骤、用户信息打通和踩坑复盘完整捋一遍给接到这类需求的开发者一个直接能照做的方案店主自己想动手也完全够用。1. 为什么ECShop店铺尤其留不住咨询流量原生系统的三个盲区1.1 留言板不是客服异步沟通接近零转化ECShop不是没有客服功能它自带用户留言和商品评论但这两者的定位是事后反馈不是即时沟通。顾客在商品页有疑问时看到的是一个表单提交完可能就切到别家去了。店主什么时候能看到留言取决于什么时候上后台我见过不少店铺的留言回复间隔超过一天。从我维护过的店铺数据看咨询响应时间一旦超过两小时顾客回来下单的比例不到一成。原因很直白顾客的疑问大多集中在规格、库存、运费时效上这些问题本来就是下单前的临门一脚你把解答拖到第二天这一单基本就凉了。在线客服组件解决的正是这个临门一脚它把响应时间从小时级压缩到秒级对成单率的拉动是肉眼可见的。1.2 客服入口不在顾客真正停留的页面里早期ECShop默认模板把联系方式集中在页面顶部的header和底部footer而顾客停留时间最长的商品详情页恰恰是离这两个区域最远的页面。让顾客在详情页翻到底部去找一个QQ号这个交互成本实在太高了。在线客服插件真正的价值不是提供一个聊天窗口这么简单而是把入口从犄角旮旯里拎出来变成一个全站悬浮的浮层让它在顾客脑子里刚冒出疑问的那个瞬间就出现在视野里。浮层的显示位置、是否自动弹出、移动端怎么折叠这些细节对咨询率的影响非常直接后面在实操部分会专门讲到。1.3 客服侧看不到访客是谁服务无从下手就算你把QQ挂上去、把一段第三方客服代码贴进页面默认状态下客服看到的也只是一个匿名访客不知道对方是不是老会员、有没有未发货订单、购物车里放了什么。ECShop的登录状态存在自己的Session里第三方组件根本感知不到。而插件和一段聊天代码的本质区别恰恰在于有没有把ECShop的用户信息、订单信息同步给客服端。客服能在对话窗口里直接看到对方是谁、订单走到哪一步沟通效率和专业感完全是两个级别。这个打通方案是整篇文章最核心的部分会在第3和第5节展开。2. 客服插件选型SaaS、自建WebSocket还是轻量挂件2.1 第三方SaaS客服绝大多数店铺的性价比最优解市面上成熟的在线客服SaaS产品比如53客服、美洽、商务通这一挂都提供一段可嵌入的JavaScript代码。你把这段代码放进ECShop的公用模板里前台所有页面就会自动加载出客服浮窗。这类方案的优势非常直接注册开账号、复制代码半小时内就能上线消息记录、访客来源、智能机器人、离线留言这些功能开箱即用稳定性由厂商负责不用自己养服务进程。成本上中低档套餐一年几百到一千多块对绝大多数中小店铺来说完全可接受。缺点也有主要是数据在别人服务器上以及浮窗样式可能需要花点时间跟现有主题对齐。我在实际项目里的选型经验是日咨询量在几十条以内、店铺没有特殊定制需求的直接上SaaS别犹豫。你自己写一套WebSocket方案的时间成本折算下来够付好几年SaaS费用了而且功能还不一定有SaaS完整。2.2 自建WebSocket客服想清楚再动手如果店铺对客服数据私有化要求很高或者对聊天界面、交互流程有极其个性化的需求自建方案也有它的适用场景。ECShop是PHP技术栈常见的自建做法是用Workerman或Swoole在服务器上起一个独立的WebSocket服务前端写一个聊天浮窗组件客服端做一个简单的管理页面来接收和回复消息。这个架构听起来不复杂但麻烦事全在细节里会话消息要持久化、客服不在线时消息怎么推、多个客服之间怎么分配会话、历史记录怎么检索、聊天记录和ECShop订单如果要联动又该怎么设计。我见过几个自建项目最后大多停在能聊天但没历史、没分配、客服只能靠刷新页面看新消息的半成品状态。所以这条路线只推荐给有专职技术团队并且有长期维护预算的店铺。2.3 轻量挂件方案预算为零时的过渡选项如果你的店铺刚起步日访问量不多还有一个几乎零成本的选择直接把QQ或企业微信的联系方式挂到页面上。ECShop模板系统里本身就带一个在线客服的QQ挂件样式后台填个QQ号前台就会生成一个可以点击发起临时会话的小图标。这个方案能解决有个客服入口的问题但它没有消息记录、没有访客轨迹客服一旦离线咨询就直接断了。我通常建议把这种方案当作开店初期的过渡等确认有了咨询量再切换到SaaS避免一上来就投入太多成本。2.4 一张表看清三种方案的差别对比维度第三方SaaS自建WebSocketQQ/微信挂件上线速度半小时内数周起10分钟消息记录云端保留可回溯自己维护无访客身份识别支持SDK打通完全可控无定制能力有限完全可控几乎没有年度成本数百到数千元服务器加人力零适合场景绝大多数店铺私有化要求极高起步期过渡3. 实战植入把客服浮窗埋进ECShop模板并打通用户信息3.1 找准模板入口footer.lbi是通用挂载点ECShop的前台模板集中在themes目录下。拿默认模板来说所有页面公共的页脚部分都来自themes/default/library/footer.lbi这个文件。客服浮窗作为全站性质的组件最合理的挂载点就是这里改一个文件全站生效。如果你用的是商业模板路径一般是themes/你的主题名/library/footer.lbi规则相同。动手之前先确认一下模板里是否还有其他公共的library文件比如page_footer.lbi有的模板把页脚拆成两个文件两个位置都要检查。另外商业模板和自研模板的差异很大有些模板在library里做了条件判断需要进后台模板管理页面确认当前正在使用的是哪个主题别改错了目录。3.2 植入代码以SaaS客服的通用接入模式为例下面是接入第三方SaaS客服时最典型的代码结构。不同厂商的SDK全局变量名不一样这里展示的是通用模式具体要以你所选服务商的接入文档为准script typetext/javascript window._CUSTOM_CHAT window._CUSTOM_CHAT || {}; _CUSTOM_CHAT[appId] 你的应用ID; _CUSTOM_CHAT[userId] {$user_info.user_id}; _CUSTOM_CHAT[userInfo] { nickname: {$user_info.user_name|escape:javascript}, email: {$user_info.email|escape:javascript} }; /script script src//static.chatservice.example.com/sdk.js async/script这段代码里有三个关键点。第一ECShop在初始化流程includes/init.php里已经把当前登录用户的信息assign给了模板变量{$user_info}所以在最底部的footer.lbi里也能直接读到user_id和user_name不需要额外改PHP文件。第二给用户信息加escape:javascript转义非常重要ECShop的老用户里什么昵称都有用户名带着单引号或者反斜杠的情况并不罕见不做转义一段恶意构造的用户名就能把整段脚本干崩客服组件全部失效。第三脚本加载用了async属性避免阻塞页面主体渲染这一点对详情页的打开速度感知影响很明显。3.3 未登录用户怎么办匿名访客也要能进来聊{$user_info.user_id}在用户未登录时是空值这不影响聊天组件加载访客仍然能以匿名身份发起咨询。对店铺来说更重要的是给客服侧一个能定位到这个人的线索。一个实用的做法是把ECShop的Session ID和来访时间戳一并传给客服SDK客服在后台至少能看到这条咨询来自哪一个会话链。这个线索在顾客换电脑、换浏览器之后再次咨询时尤其有用虽然无法直接对接到具体会员账号但多少能还原出一些访问路径和意图。有过一两次顾客用不同设备来问同一个订单的场景后你就会明白这行代码值多少钱。3.4 PC和移动端模板要分开处理ECShop 3.0时代很多商业模板是桌面端、移动端两套皮肤移动端模板通常在themes/主题名/touch或mobile目录下。如果你只改了PC端的footer.lbi手机端页面会完全没有客服入口——而现在电商流量里移动端占比往往超过一半这个问题不能忽视。移动端植入时要额外确认客服SDK的浮窗在窄屏下是否能自动收缩成小圆点如果服务商原生不支持就得规划一个移动端的替代展示方案比如在页面底部固定一个联系客服按钮条。我在一个项目里就吃过这个亏PC端一切正常运营过了一周才发现手机端压根看不到客服按钮白白损失了一周的移动端咨询量。4. 踩坑实录缓存、HTTPS与Session三个老大难4.1 改完模板没效果先查compiled模板缓存ECShop的模板是编译型的DWT模板修改后系统会把编译结果存到temp/compiled目录下的PHP文件里。如果你直接改了footer.lbi但前台没反应十有八九是编译缓存没清掉。处理方式有两个一是从后台【模板管理】里找到清除缓存执行二是到服务器上直接删掉temp/compiled和temp/cache两个目录下的对应文件。我习惯两种都做一遍图个稳妥。顺带提醒一句给ECShop做任何模板级改动之前先把要改的文件备份一份。这个系统的调试反馈很原始出了问题回滚最快的方式就是还原文件再清一遍缓存备份能帮你省掉很多不必要的返工。4.2 全站HTTPS之后客服按钮突然消失现在店铺基本都上了HTTPS但不少客服SaaS的官方嵌入代码给的是http开头的资源地址。你的页面是https脚本资源是http浏览器会判定为混合内容直接拦截具体表现就是代码贴了、缓存也清了客服按钮就是不出来。打开浏览器控制台能看到明确的Blocked Mixed Content提示。解决办法也简单把嵌入代码里的http://改成//开头的协议相对地址让浏览器按当前页面协议自动选择。如果某个服务商的静态资源压根不支持https那这个服务商可以直接放弃了换一家支持https的。这已经不是什么高端要求而是当前环境下的基本门槛。4.3 {$user_info}在某些页面读取不到多半是整页缓存惹的祸前面说init.php会全站assign用户信息理论上所有前台模板都能直接读{$user_info}。但有一种常见例外店铺如果装了整页静态化插件或者在全站前面挂了CDN缓存页面HTML是提前生成好给所有访客共享的。这种情况下页面里注入的用户信息要么是空的要么是上一个访客的——比空值更危险等于是把用户A的会员ID暴露给了用户B不光功能出问题还牵扯到隐私合规风险。所以这里必须强调凡是用整页缓存方案绝不能在缓存页面里动态拼接用户信息。正确做法是改成异步接口用JavaScript在页面加载完成后再去请求用户数据客服SDK拿到实时结果再展示。这条经验是拿真实事故换来的处理时一定要谨慎。5. 进阶玩法把订单状态和咨询会话联动起来5.1 写一个轻量的用户信息接口到这里客服插件已经能正常工作了但还差一步客服在后台只看到昵称看不到订单信息。要补齐这个能力可以自己写一个简单的PHP接口文件放在ECShop根目录下比如chat_user.php?php define(IN_ECS, true); require(dirname(__FILE__) . /includes/init.php); header(Content-Type: application/json; charsetutf-8); $user_id intval($_SESSION[user_id]); if ($user_id 0) { echo json_encode(array(logged false)); exit; } $user $db-getRow( SELECT user_name, email FROM . $ecs-table(users) . WHERE user_id $user_id ); $orders $db-getAll( SELECT order_sn, order_status, shipping_status, pay_status, add_time, total_fee . FROM . $ecs-table(order_info) . WHERE user_id $user_id ORDER BY add_time DESC LIMIT 5 ); echo json_encode(array(logged true, user $user, orders $orders));这个接口直接复用ECShop的init.php可以拿到用户会话和数据库连接不需要自己再连一次库。前端JavaScript在页面加载后调用这个接口把返回的订单数组传给客服SDK客服在对话窗口里就能看到该用户最近几笔订单和状态。数量用LIMIT 5限制一下避免极端情况下返回太多数据拖慢页面。5.2 把订单状态翻译成客服看得懂的语言ECShop的订单状态是数字编码order_status、shipping_status、pay_status三个维度组合起来一连串数字客服看一眼就懵了。接口里最好做一层转换把待付款已发货已完成这类直观描述拼好再返回。这一步看着不起眼但对客服的实际使用体验影响非常大。我记得第一个版本直接返回原始数字客服在群里的第一句话就是3 0 0是什么意思第二次迭代就老老实实做了翻译。代码不多但这类小细节决定了这个功能是给客服增效还是给客服添乱。5.3 效果评估怎么判断客服插件有没有带来增量装上客服插件不是终点最好顺手做一轮效果评估。最简单的办法是看咨询发生时的页面来源客服SDK一般自带访客来源和浏览轨迹从商品页发起咨询的多半是对商品有兴趣的意向客户从订单页发起咨询的多半是物流或售后问题。两类咨询的处理策略和服务话术完全不同电商服务团队应该分开KPI。还可以对比插件上线前后30天的询单转化率也就是咨询后成交订单数除以咨询会话数。我的经验是插件装上后的前两周最值得盯的指标是首次响应时间——顾客发起咨询后多久有客服应答这个指标比想象中更能决定最终成交率七鱼和美洽的后台报表里都直接有这个数。本文还有配套的精品资源点击获取
返回列表