集成环信客服功能
项目需要集成环信客服系统,这两天的摸爬滚打和客服沟通后整理一篇文章,以作备份
环信的客服真的真的真的很赞。
详细集成步骤如下:
SDK方面
1.先把 移动客服:商城”demo源码和HelpDeskUI(iOS) 下载下来,该SDK基于IM SDK 3.x,如同时使用环信IM功能(非音视频),需使用此文档中的初始化、登录、登出操作,不需要添加IM的SDK,其IMSDK-API正常使用。
2.打开下载好的demo,架构如下图
![](https://img.haomeiwen.com/i2759190/c78ec31047979cd1.png)
将HelpDeskDynamicSDK和HelpDeskUI两个文件夹,在Finder中复制到自己的项目的适当路径中(这个地方有个坑,稍后下午详细说明),然后拖拽到项目时选择 Create groups。
3.选中当前的TARGET,向 General → Embedded Binaries 中添加以上两个依赖库。Linked Frameworks and Libraries 中会自动增加。
![](https://img.haomeiwen.com/i2759190/1577f798e4b0bbbc.png)
4.Build Phases ---> Link Binary With Libraries 中添加依赖库
![](https://img.haomeiwen.com/i2759190/9fd506ee72b6c964.png)
如下图:
![](https://img.haomeiwen.com/i2759190/a61e750cf0e872f4.png)
5.Build Settings ---> Linking ---> Other Linker Flags 中增加 -ObjC。
6.SDK 不支持 bitcode,在 Build Settings ---> Build Options ---> Enable Bitcode 中设置 NO。
![](https://img.haomeiwen.com/i2759190/dc8e49b225034c0a.png)
7.在工程info.plist文件中 增加隐私权限
![](https://img.haomeiwen.com/i2759190/56a820370eaabf6f.png)
Privacy - Photo Library Usage Description 需要访问您的相册
Privacy - Microphone Usage Description 需要访问您的麦克风
Privacy - Camera Usage Description 需要访问您的摄像机
详细的权限设置,请 点我点我。
8.在 .pch 中 或者 全局的 .h 中添加如下代码:
![](https://img.haomeiwen.com/i2759190/9a358148ef57f845.png)
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.编译工程提示:
![](https://img.haomeiwen.com/i2759190/f5737fa6f43a7892.png)
将SVProgressHUD库文件夹拖入工程,并在pch中引入。
12.再次编译工程如下:
![](https://img.haomeiwen.com/i2759190/2eb667b43dc731a9.png)
在pch中引入#import "UIButton+WebCache.h",再次编译成功。
创建APP关联
上面的步骤依据文档 可以轻松完成,但是APP相关关联,就比较坑了,如果没有集成过环信聊天的经历的话很容易码入误区,下面请紧跟随笔者步骤:
1.需要申请两个账号:移动客服后台、环信管理后台,如果已经有了请下一步。
2.先在 环信管理后台 创建应用
点击应用显示应用的信息(** AppKey、Client ID、Client Secret** 这几个要记着)
![](https://img.haomeiwen.com/i2759190/527c21c2905bc719.png)
3.在 环信管理后台 注册IM用户(名称要记着)-点击刚注册应用名称-选择IM用户-选择注册IM用户
![](https://img.haomeiwen.com/i2759190/3a9b8c08ca100190.png)
4.移至 环信管理后台 创建APP关联( 官方文档,官方文档介绍有些不全面,而且有点不全面 )
登录客服账号在后台右上角选择 管理员模式 ---> 渠道管理 ---> 手机APP ---> 添加APP关联 ---> 去关联IM账号
![](https://img.haomeiwen.com/i2759190/2ecbdc9cb67e7437.png)
5.输入关联的应用的信息,下图方框中为所关联应用创建的IM用户
![](https://img.haomeiwen.com/i2759190/fdc12e1fe6a86770.png)
输入完毕,保存即可如下图
![](https://img.haomeiwen.com/i2759190/f812031044a224e4.png)
6.记下 tenantId 租户ID,下文用到:设置 ---> 企业信息
![](https://img.haomeiwen.com/i2759190/968338c2d6c592c2.png)
7.上面步骤完成后,官方文档中没有提及的一步: 设置--->会话分配规则
![](https://img.haomeiwen.com/i2759190/65073283ced09eb9.png)
如编译提示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没有加上
![](https://img.haomeiwen.com/i2759190/babbe613dcb0229b.png)
集成客服成功进入聊天页面
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,一定要这个名字
![](https://img.haomeiwen.com/i2759190/876b735d4e919c0e.png)
2.选择如图“+”,选择Chiness(Simpified)
![](https://img.haomeiwen.com/i2759190/b01ac0166302453b.png)
3.在Localization中勾选Chinese(Simplified)
![](https://img.haomeiwen.com/i2759190/6be64439ce24d02b.png)
4.将Localizable.strings展开,分别在下面二个文件中输入内容,可参考另外一个Demo,环信(IM)
![](https://img.haomeiwen.com/i2759190/9b721de7f4b685b0.png)
修改聊天页面导航栏标题及设置企业欢迎语都在HDMessageViewController.m里
![](https://img.haomeiwen.com/i2759190/e3c07cc8ada2af82.png)
设置客服、访客昵称和头像
![](https://img.haomeiwen.com/i2759190/b1caf702e31ce059.png)
集成环信客服功能过程中的遇到一些问题
1.由于环信客服SDK集成了一些常用的第三方的库,如果项目本身也存在这些第三方的库,就 会引起冲突,删除掉,然后把报错的地方修改成正常的调用即可
![](https://img.haomeiwen.com/i2759190/fe813a63ce7ef770.png)
2.和客服沟通后对一些疑问的整理:
Q:在APP中集成了客服系统后 客户 和 客服 之间的关系如何协调?
A:IM服务号就是 IM用户,你新注册一个IM用户 然后用于绑定IM服务号的,然后客户端登录的用户 都与这个绑定的IM服务号聊天,客服系统将与这个IM服务号聊天的会话分配给客服
Q:注册的IM用户 相当于 客服和用户之前的 枢纽么
M:可以这么理解
Q:为什么 这个账号可以在服务端注册,也可以在后台管理系统手动添加啊
M:其实都是一个接口操作的,服务器端的rest接口
Q:是不是 服务端返回的用于登陆的IM账号不同 APP用户关联的客服也不同了呐?
M:未必,移动客服那边绑定一个IM服务号就够用了,客户端登录的其他IM用户(服务端返回的或者注册的)都给这个移动客服绑定的IM服务号发消息,环信的客服系统就能收到客户端发送过来的消息了