uni-app接入环信客服云 easemobim

需求：点击商品详情里的客服按钮，跳转（注意：不是拉起）页面，页面为客服窗口
尝试：

uni-app webview直接集成网页链接（https://106280.kefu.easemob.com/webim/im.html?configId=xxx），失败。页面空白
在index.html里，通过：
<script src='//106280.kefu.easemob.com/webim/easemob.js?configId=xxx'></script>引入，引入后：
（1）谷歌-移动端调试，客服按钮显示不出来
（2）如果在index,html引入，全局都会有按钮
（3）直接script src引入，会出现引入失败，如果使用

 var script = document.createElement('script');
script.src = "//106280.kefu.easemob.com/webim/easemob.js?configId=xxx";
document.head.appendChild(script)

浏览器会抛异常。

解决办法：

首先在static下建easemob.html。注意，只能在该文件夹下，这样不会被编译

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>在线客服</title></head><body><p onclick='easemobim.bind({configId: "xxx"})' id='aid'></p><script>window.easemobim = window.easemobim || {};easemobim.config = {hide: true,autoConnect: false    };</script><script src='//kefu.easemob.com/webim/easemob.js'></script><script>(()=>{//  兼容IEif(document.all) {document.getElementById("aid").click();}//  兼容其它浏览器else {var e = document.createEvent("MouseEvents");e.initEvent("click", true, true);document.getElementById("aid").dispatchEvent(e);}})();</script></body>
</html>

新建kefu.vue

<template><view><web-view src="/static/easemob.html"></web-view></view>
</template>
<script>export default {data() {return {}},components: {},created(){},onLoad(option) {},onShow(){},methods: {},}
</script>
<style lang="scss" scoped></style>

3.在需要跳转客服的地方

uni.navigateTo({url:"/pages/shop/goods/kefu"})

即可实现：点击按钮跳转客服页面

//2023/05/01更新
真机运行，发现页面出不来，又去问了客服，web-view引入的客服地址，需要是线上的，（app端是这样，其余未测试）所以把上面写的那个打个包到h5，取下链接给web-view，重新真机运行就可以了

//2023/05/03更新
如头部为自定义的，web-view会把头部遮住。则需要改变web-view高度，设置层级是没用的，具体看下uni的文档。
如头部为pages.json里设置的，则无需设置web-view高度

uni-app接入环信客服云 easemobim相关推荐

环信客服SDK接入-----（一）
第1步:快速创建APP关联移动客服系统的"APP关联"对应即时通讯云(IM)后台的应用.在移动客服系统创建关联后,可直接登录IM后台管理该关联对应的应用. 如果您还没有环信即时通 ...
android 环信客服修改自己的头像
因为自己项目目中遇到到了,有自己的需求,所以就修改了环信自己的头像,客服的头像也修改了,好了废话不多说了上干活首先找到easeui中的类EaseUserUtils 不过我把图片都保存到本 ...
如何在自己APP中接入在线客服系统，App接入第三方在线客服系统方法
很多App都有能直接在App内找到客服咨询入口,方便及时解决客户问题. 如果你的app也想要配置客服系统,怎么才能实现? App内需要添加好一个客户咨询按钮,然后在客服咨询按钮点击后跳转到H5客服聊天 ...
android 环信客服自动登出,Android环信聊天头像昵称显示解决方案
从消息扩展中获取昵称和头像昵称和头像的获取:把用户基本的昵称和头像的URL放到消息的扩展中,通过消息传递给接收方,当收到一条消息时,则能通过消息的扩展得到发送者的昵称和头像URL,然后保存到本地数据 ...
环信携手华为云助企纾困数字化发展
在物联网.工业互联网等新一代数字技术的推动下,不断催生出新的行业和服务,以及新的商业模式和生态等.创新引领,创业筑梦,数字化科技创新企业成为推动高质量增长的关键词之一."在危机中育先机,于变 ...
华为环信“全场景云联络中心”联合方案正式发布
环信本次再次和华为云客服强强联合,依托自身的全渠道以及AI能力,结合华为音视频云呼平台的赋能,重磅打造创新的"全场景云联络中心"解决方案将持续给包括保险.证券.教育.物流等环信优势 ...
项目接入即时聊天客服系统（环信系统）PHP后端操作
环信工作原理: 一.由于环信没有直接的接口来主动调取本项目中的用户数据,所有用户信息必须在环信服务器上注册对应信息成为环信的用户:(这样才能当用户进入聊天时显示其基本信息,如:名称.昵称.电话.邮箱等 ...
微信支持环信_环信客户互动云v5.39已发布：支持微信小程序接入
环信客户互动云v5.39_产品更新说明发布日期:2018-11-06 客服模式质检中新增会话ID字段质检中新增会话ID字段,与历史会话中的会话ID对应,支持根据会话ID搜索质检会话,以及在质检详 ...
环信开发的坑（环信客户互动云）
最近项目接入环信,碰到以下bug: 1.代码下载下来全部很多界面爆红 com.hyphenate.chat 跟这个相关的全部爆红.问客服他们说是我的问题我也是及其无奈,问了他们一下午, ...

uni-app接入环信客服云 easemobim

uni-app接入环信客服云 easemobim相关推荐

最新文章

热门文章