需求
实现一个外贸网站的在线客服功能，访客可以通过网站右下角的在线聊天窗口与客服人员进行沟通。
这里使用的是 Whatsapp 作为在线客服的工具，客服人员通过 whatsapp 与访客进行沟通。
Whatsapp 客服账号清单从 CRM 用户表中获取，用户表需要增加 whatsapp 相关字段，包括 whatsapp 账号、whatsapp 头像、客服在线状态、客服显示顺序等字段。账号管理部分已实现，只需要从数据库中获取这些信息，并在前端展示出来即可。
当前后台只负责管理 whatsapp 客服账号的信息，具体的前端组件，其他域名的网站可以通过引入这个组件的 js 文件来使用这个在线客服功能。
本地调试
实现一个 html 的测试页面，放在 public/whatsapp_test.html，页面中引入在线客服组件的 js 文件，测试在线客服功能是否正常工作。
目前返回的 whatsapp avatar 头像链接是 /api/public/uploads/avatar.jpg 这样的格式。
判断，如果是 debug 模式，就把这个链接替换成 http://localhost:9031/api/public/uploads/avatar.jpg 这样的格式，如果是非 debug 模式，则返回 https://www.sunzhongwei.com/api/public/uploads/avatar.jpg 这样的格式。
测试点
- 默认头像设置
- 职位显示是否正确。如果后台未设置职位，前端显示默认值“Sales Representative”
- 用户增加一个新字段职位
- 后台可以编辑这个字段，前端显示这个字段的值
- 用户增加一个新字段职位
- 前端的 PersonalInfo 页面，及用户编辑界面都需要岗位字段
- 多账号时，插件是否限高
- 排序是否正确
- 离线账号是否不显示
- 先更新一个网站，方便测试 whatsapp 的账号设置是否正确。通过数据库直接修改
CORS 的作用
r.Use(Cors()) gin 这行代码的作用，为 Gin 服务注册一个处理跨域资源共享（CORS）的中间件，从而让部署在其他域名的前端应用可以正常请求你的 API。
引入客服组件
<script src="http://localhost:9031/api/public/js/whatsapp-widget.js?v=2"></script>
<script src="https://www.sunzhongwei.com/api/public/js/whatsapp-widget.js?v=2"></script>
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式