集成环信客服功能

项目需要集成环信客服系统,这两天的摸爬滚打和客服沟通后整理一篇文章,以作备份

环信的客服真的真的真的很赞-我写的环信客服云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.先在 环信管理后台 创建应用


点击应用显示应用的信息(** AppKeyClient IDClient 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这个方法


App退到后台无法收到通知消息


集成离线推送消息通知-收不到通知,看如下图片


集成离线推送消息通知-收不到通知


发送订单信息给客服(安装环信文档集成,第一次进入聊天页面没有发送订单信息-这里直接是参考环信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服务号发消息,环信的客服系统就能收到客户端发送过来的消息了

你可能感兴趣的:(集成环信客服功能)