全栈工程师-咨询电话:15675178605 (微信同号)

APP端-IOS原生-接入教程

第一步:手机注册登录,修改登录密码

首先,你需要注册账号,绑定手机,然后,修改登录密码。
具体请参见:https://impc.opencodetiger.com/OctIm/DevelopDocIm_90015_0.html

第二步:生成移动端接入代码

1)用第一步绑定的手机号和登录密码,登录【访问接待】聊天界面,登录地址:https://im.opencodetiger.cn 在咨询聊天界面的左侧底部有一个【小人】图标,点击进入【客服中心】后台,在下面的图标导航列表中,选择【第三方接入指引】项。根据项目内容,填写相应的值,建议全部都填写,填写完整后点击【生成移动端代码】。
如下图:



2)生成的移动端代码如下图:



3)在生成的移动端代码中,提取跳转URL地址

生成的移动端Js代码中有一个变量:【_enterUrl 】 这个变量的值就是跳转的URL值,如:

//im.opencodetiger.cn/EnterIm/VisitorEnter?ShopUserID=66666666666666666&VisitType=Goods&MobileN
um=15675178605&IsShowTitleHeader=true&BuyerUserID=0&BuyerNick=&BuyerHeaderImg=&VisitorMemo=某某
商城店铺的访客&TopTitle=测试接入&TopAHref=https://impc.opencodetiger.com&ShowItemHeaderImgUrl=https://im.open
codetiger.cn/Assets/Imgs/Icon/my_shopmsg.png&ShowTitle=某某商城店铺客服&ShowTitleSub=你好,欢迎访问某某
店铺,现在可以咨询聊天啦&OsType=Wap&rnd=0.09382889672423

当然,不同的账号,相应的值也是不同的。

4)在IOS原生APP中用WKWebView这个控件加载这个网址URL即可,注意:请在网址最前面加上:https: 。最终的跳转URL,如:

https://im.opencodetiger.cn/EnterIm/VisitorEnter?ShopUserID=66666666666666666&VisitType=Goods&MobileN
um=15675178605&IsShowTitleHeader=true&BuyerUserID=0&BuyerNick=&BuyerHeaderImg=&VisitorMemo=某某
商城店铺的访客&TopTitle=测试接入&TopAHref=https://impc.opencodetiger.com&ShowItemHeaderImgUrl=https://im.open
codetiger.cn/Assets/Imgs/Icon/my_shopmsg.png&ShowTitle=某某商城店铺客服&ShowTitleSub=你好,欢迎访问某某
店铺,现在可以咨询聊天啦&OsType=Wap&rnd=0.09382889672423

5)特别注意:网址URL链接中有一个参数【IsShowTitleHeader=true】是控制顶部的【标题栏】是否显示,一般在APP中,请将此参数设置为false,即【IsShowTitleHeader=false】。那么,在WKWebView的显示效果如下图:



第三步:如果遇到点击【打电话图标】无响应的问题。那是因为WKWebView不支持加载的网页拨打电话,请用百度搜索 “ WKWebView无法拨打电话 ” 相关内容,网上提供了很多解决方案。注意在配置中添加拨打电话以及访问第三方网址的权限。

5)客服登录到【访问接待】聊天界面,在左侧访客列表中,就可以看到访客请求聊天对话的头像啦,点击直接发送聊天内容就可以了。

第四步:根据APP页面跳转到此WKWebVIew页面的不同,可以向【跳转URL地址】传递参数值,比如URL链接中的参数:VisitorMemo 是可以变化的,根据跳转进入的APP页面不同,可以更改VisitorMemo的值,让客服更好的判断访客是从那个APP页面发起的聊天咨询。