项目需要集成环信客服系统,这两天的摸爬滚打和客服沟通后整理一篇文章,以作备份
环信的客服真的真的真的很赞-我写的环信客服云demo地址:https://gitee.com/lalzxy/huanxinkefuim。
详细集成步骤如下:
SDK方面
1.先把 移动客服:商城”demo源码和HelpDeskUI(iOS) 下载下来,该SDK基于IM SDK 3.x,如同时使用环信IM功能(非音视频),需使用此文档中的初始化、登录、登出操作,不需要添加IM的SDK,其IMSDK-API正常使用。
2.打开下载好的demo,架构如下图
将HelpDeskDynamicSDK和HelpDeskUI两个文件夹,在Finder中复制到自己的项目的适当路径中(这个地方有个坑,稍后下午详细说明),然后拖拽到项目时选择 Create groups。
添加HelpDeskUI报Passing ‘CGFloat’(aka ‘double’) to parameter of incompatible type ‘__strong id’*/错误,就在pch定义如下宏
#define MAS_SHORTHAND_GLOBALS
3.选中当前的TARGET,向 General → Embedded Binaries 中添加以上两个依赖库。Linked Frameworks and Libraries 中会自动增加。
4.Build Phases ---> Link Binary With Libraries 中添加依赖库
如下图:
5.Build Settings ---> Linking ---> Other Linker Flags 中增加 -ObjC。
6.SDK 不支持 bitcode,在 Build Settings ---> Build Options ---> Enable Bitcode 中设置 NO。
7.在工程info.plist文件中 增加隐私权限
Privacy - Photo Library Usage Description 需要访问您的相册
Privacy - Microphone Usage Description 需要访问您的麦克风
Privacy - Camera Usage Description 需要访问您的摄像机
详细的权限设置,请 点我点我。
8.在 .pch 中 或者 全局的 .h 中添加如下代码:
9.编译提示'SCLoginManager.h' file not found,将demo里SCLoginManager.h和SCLoginManager.m拖入工程,此时会报'HDChatViewController.h' file not found,将HDChatViewController、AppDelegate+HelpDesk、HFileViewController、LocalDefine.h拖入工程。
10.如报'Bugly/Bugly.h' file not found,选择target-Build Phases-Linker Binary With Libraies-选择+号-Add Other-选择demo里的Bugly.framework,将#import "LocalDefine.h"、#import "SCLoginManager.h"加入pch
11.编译工程提示:
将SVProgressHUD库文件夹拖入工程,并在pch中引入。
12.再次编译工程如下:
在pch中引入#import "UIButton+WebCache.h",再次编译成功。
创建APP关联
上面的步骤依据文档 可以轻松完成,但是APP相关关联,就比较坑了,如果没有集成过环信聊天的经历的话很容易码入误区,下面请紧跟随笔者步骤:
1.需要申请两个账号:移动客服后台、环信管理后台,如果已经有了请下一步。
2.先在 环信管理后台 创建应用
点击应用显示应用的信息(** AppKey、Client ID、Client Secret** 这几个要记着)
3.在 环信管理后台 注册IM用户(名称要记着)-点击刚注册应用名称-选择IM用户-选择注册IM用户
4.移至 环信管理后台 创建APP关联( 官方文档,官方文档介绍有些不全面,而且有点不全面 )
登录客服账号在后台右上角选择 管理员模式 ---> 渠道管理 ---> 手机APP ---> 添加APP关联 ---> 去关联IM账号
5.输入关联的应用的信息,下图方框中为所关联应用创建的IM用户
输入完毕,保存即可如下图
6.记下 tenantId 租户ID,下文用到:设置 ---> 企业信息
7.上面步骤完成后,官方文档中没有提及的一步: 设置--->会话分配规则
如编译提示dyld: Library not loaded: @rpath/HelpDesk.framework/HelpDesk
Referenced from: /var/containers/Bundle/Application/C4B01F93-FD51-472F-A535-9220E246D8DD/环信客服集成.app/环信客服集成
Reason: image not found
说明HelpDesk.framework没有加上
集成客服成功进入聊天页面
1.输入表情符号,显示表情字符串,将下面代码复制到AppDelegate入口函数里。
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapePattern:@"\\[[^\\[\\]]{1,3}\\]"];
[[HDEmotionEscape sharedInstance] setEaseEmotionEscapeDictionary:[HDConvertToCommonEmoticonsHelper emotionsDictionary]];
2.输入框显示英文input a new message,创建Localizable.strings语言环境,步骤如下:
1.创建Localizable.strings,选择Strings File,取名为Localizable.strings,一定要这个名字
2.选择如图“+”,选择Chiness(Simpified)
3.在Localization中勾选Chinese(Simplified)
4.将Localizable.strings展开,分别在下面二个文件中输入内容,可参考另外一个Demo,环信(IM)
修改聊天页面导航栏标题直接创建个控制器继承HDMessageViewController,设置self.navigationitem.title,设置企业欢迎语都在HDMessageViewController.m里
聊天页面显示历史消息,而不是每次进来都是空白聊天页面,在继承HDMessageViewController控制器里调用tableViewDidTriggerHeaderRefreshz这个方法
设置客服、访客昵称和头像
发送带访客属性的消息给客服-访客昵称也可以在这里设置
App退到后台无法收到通知消息-这时候调用的是本地通知,如下图
1.实现代理 2.监听代理方法 3.在代理方法里调用环信demo的showNotificationWithMessage这个方法
集成离线推送消息通知-收不到通知,看如下图片
发送订单信息给客服(安装环信文档集成,第一次进入聊天页面没有发送订单信息-这里直接是参考环信demo)
集成环信客服功能过程中的遇到一些问题
1.由于环信客服SDK集成了一些常用的第三方的库,如果项目本身也存在这些第三方的库,就 会引起冲突,删除掉,然后把报错的地方修改成正常的调用即可
2.和客服沟通后对一些疑问的整理:
Q:在APP中集成了客服系统后 客户 和 客服 之间的关系如何协调?
A:IM服务号就是 IM用户,你新注册一个IM用户 然后用于绑定IM服务号的,然后客户端登录的用户 都与这个绑定的IM服务号聊天,客服系统将与这个IM服务号聊天的会话分配给客服
Q:注册的IM用户 相当于 客服和用户之前的 枢纽么
M:可以这么理解
Q:为什么 这个账号可以在服务端注册,也可以在后台管理系统手动添加啊
M:其实都是一个接口操作的,服务器端的rest接口
Q:是不是 服务端返回的用于登陆的IM账号不同 APP用户关联的客服也不同了呐?
M:未必,移动客服那边绑定一个IM服务号就够用了,客户端登录的其他IM用户(服务端返回的或者注册的)都给这个移动客服绑定的IM服务号发消息,环信的客服系统就能收到客户端发送过来的消息了