本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程。本产品已经成熟稳定并投入商用。
在线演示环境:https://kf.shengxunwei.com 注意:演示环境仅供演示交流与评估,不保证 7x24 小时可用。
这个系列的文章,是用来填我2015年挖的一个坑。2015年6月我发表过一篇文章“使用 WPF+ ASP.NET MVC 开发 在线客服系统(一)”,介绍了当时自己开发的客服系统概况,虽然当时系统的开发完成度已经很高,但因为工作等原因,后续的开发完善搁置了,文章也搁置了。直到后来 .net core 关注度的持续升温,我也有了想抽空把系统捡起来,用 .net core 重构并好好完善使之能够完全产品化的想法。
最近一段时间我慢慢完成了系统的重构和开发工作,使用 .net core 彻底重写了整个后端,WPF 的客服端也经过了一定的优化和改善。工作小小告一段落,这个系列的文章也到了填坑的时候,时隔了五年,系统的设计和开发细节早已和当初有了很大不同,这次我将重头开始,从系统的功能设计、技术架构、开发细节以及各个功能,详细介绍开发实现的过程。在未来的系统开发和完善过程中,如果时间允许,我也会同步更新这一系列的文章进行介绍。
作为首篇文章,本文对产品的背景和功能做简单的介绍。
2015年前后当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作、WPF 做客服端,Web 访客端使用原生 JavaScript 开发。为了使整个系统能够向下兼容,客服端 .net 框架使用的是 .net framework 3.5 ,可以兼容 Windows XP SP2,Web 访客端为了兼容 IE6 ,也使用了许多比较麻烦的技术实现,说来话长,这次不展开说这方面的细节。
在这次重构的新版本放弃了对 Windows XP 和 IE6 的支持,后端使用 .net core 3.1 ,数据库操作使用了 entity framework core。客服端依然是 WPF,基础框架升级到了 .net framework 4.8 ,访客端依然是原生 JavaScript,兼容 IE8 以上浏览器。
另外相对于2015年的版本,这次重构我增加了一个 Web 后台,使用 Vue 实现,把原先放在客服端的一些管理功能,改到了 Web 后台中,例如:组织机构管理、客服管理、角色权限管理、多站点管理等。
此外因为有了 Web 后台,这次有兴趣的朋友就可以自行注册体验了,当年的旧版本需要我手工开通,很是麻烦。
在线演示环境:https://kf.shengxunwei.com 注意:演示环境仅供演示交流与评估,不保证 7x24 小时可用。
以上所有设计开发工作都是我自己一个人利用业余时间完成的,从系统后台,到 WPF 客服端、Web 前端、Web 管理端,用了很多的时间。功能更新补充的速度不会很快,因为精力实在有限,而且由于系统使用场景的特殊性,始终把稳定性放在第一位,在这方面也花了很多时间。
这个系列的文章主要围绕产品设计和技术开发两方面来讲,本文作为第一篇,介绍完背景,下面简单介绍一下目前实现的功能。
客服功能:
- 访客来访提醒
当有访客到达网站时,访客端会即时弹出提醒窗口,客服可以快速了解访客的地域、来源、关键词、来访次数、历史对话次数及其进入浏览的网页。 - 访客类型识别
系统自动识别访客来源渠道(PC、手机、微信),自动识别新旧访客以及网站会员用户功能,便于访客管理,提高服务效率。 - 访客来源跟踪
客服可以了解访客的所在地域、来源、关键词、来访次数、历史对话次数及浏览的网页。 - 访客消息预知
通过消息预知功能,客服人员可提早一步了解访客正在输入的内容,了解访客的需求及想法,方便客服人员能更快速、更详细的为访客服务,提高工作效率和质量。 - 在线图文会话
客服和访客双方对话窗口都提供多样式对话体验,文字对话为主,文件传送、表情、链接为辅。支持客服人员和网站访客双向文件传输功能。 - 常用语/常用文件
可对客服使用的常用消息、常用链接、常用文件进行管理和维护,便于客服在交谈时直接调用此类文件进行快捷回复。 - 转接客服
当客服人员在遇到解决不了的问题,客服人员可将该对话访客转接给其他客服人员,为企业在线咨询提供了便捷性。 - 屏蔽恶意访客
客服人员通过它可对恶意骚扰的访客进行屏蔽,使客服不再受到此类访客的骚扰。 - 会话历史记录
客服人员可以查询会话历史记录,支持根据时间段和关键词查询。 - 实时监控
有权限的管理人员可以实时监控所有客服的实时聊天内容和状态。
访客功能:
- 网页即时通讯
访客无需安装插件即可发起咨询,访客可随时通过个人电脑、手机、平板等设备进行在线商务沟通,方便快捷。 - 邀请窗口
企业可以融合网站风格、形象定位、用户特点等因素,自主设定个性化、特色的邀请窗口样式。 - 咨询图标
在网站上显示一个浮动的咨询图标,支持自定义风格主题。 - 访客对话窗口
访客对话窗口可设置多种颜色风格,窗口标题、客服资料、欢迎语、公司名片、公告。 - 在线图文会话
客服和访客双方对话窗口都提供多样式对话体验,文字对话为主,文件传送、表情、链接为辅。支持客服人员和网站访客双向文件传输功能。 - 直接对话窗口
客服可对在线访客发起主动对话。
实现效果截图:
访客端
左下角的浮动图标,可以根据是否有客服在线显示不同的图片,当没有客服在线时,将引导访客进入留言页面。
右下角的区域可以展开,直接在网站上边浏览边交流,不用打开新的浏览器窗口。
访客也可以打开单独的浏览器窗口进行交流。
客服端
主界面
客服端界面目前初步的设计分为三大区域:
- 左边是会话区,根据访客的不同状态在树型结构中显示。
- 中间是会话区,除了聊天会话相关的功能之外,还能显示出访客的基本信息。
- 右侧为辅助功能区,能够显示访客的浏览访问网站时的轨迹,过去的聊天历史记录;以及客服的快捷回复列表等。
未来的完善也将围绕着三大功能区进行设计。
历史记录
能够根据单次会话记录,联动显示前后同一访客的所有会话记录。左侧蓝色为查询区,鼠标指上去会自动滑出显示查询条件,不过这个设计似乎不是太友好,有待改进。
站点参数
站点参数目前实现的功能比较细,能够对访客端的各种细节进行精确的配置。
个人设置
登录客服自己的一些个性化配置,都放在这里,目前还有待完善。
Web 后台
站点管理
系统支持多站点功能。一个机构可以拥有多个站点,站点和客服的关系是平行的,不是隶属的。客服可以根据权限配置,登录一个或多个站点。
组织机构、客服、角色权限
曹旭升
QQ:279060597
原文:[https://blog.shengxunwei.com/Home/Post/9b667212-565c-43a8-8379-bd0b832a3720]