h5集成环信在线客服自定义窗口
自定义客服窗口从底部弹出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body> <a href="javascript:OpenChat();">咨询客服</a>
<!-- 自定义一个容器,嵌入iframe放客服窗口 -->
<div id="frameChat" style="display:none; position:fixed; z-index:2000; bottom:0px; left:0px; right:0px; height:580px;background:#fff;">
<iframe id="chatFrame" src="kefu.html" style="height:100%;width:100%" frameborder="0"></iframe>
</div> <script>
let openchat = false;
function OpenChat(){
openchat = true;
document.getElementById('frameChat').style.display = '';
setTimeout(function(){
document.getElementById('chatFrame').contentWindow.document.getElementById('kefu').click();
},100);
}
function hideChat(){
openchat = false;
document.getElementById('frameChat').style.display = 'none';
}
//接收iframe发回的消息
window.addEventListener('message', function (e) {
let data = e.data;
if(data.c == 'hide'){
hideChat();
}
if(data.c == 'msg' && !openchat){
let t = data.t.message.value;
console.log(t);
}
}, false);
</script>
</body>
</html>
kefu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<a href='javascript:;' onclick='easemobim.bind({configId: "426fae41-c211-4a9c-b74e-088a1edf39e3"})' id="kefu" style="position:absolute; left:-1000px;">#</a>
<script>
window.easemobim = window.easemobim || {};
easemobim.config = {
hide: true,
autoConnect: true,
hideKeyboard: true,
visitor: {
trueName: '',
qq: '',
phone: '',
companyName: '',
userNickname: '',
description: '来源'+document.referrer,
email: ''
},
onmessage: function ( message ) {
window.parent.postMessage({c:'msg', t:message}, '*');
}
};
</script>
<script src='//kefu.easemob.com/webim/easemob.js'></script> <script>
const body = document.body;
// 监听body的class属性变化 判断是否客服隐藏窗口
const observer = new MutationObserver(mutationsList => {
if(body.getAttribute('class') != null && body.getAttribute('class').replace(/\s+/g,"") == ''){
window.parent.postMessage({c:'hide'}, '*');
}
}); observer.observe(body, {
attributes: true,
childList: true,
subtree: true,
});
</script>
</body>
</html>
h5集成环信在线客服自定义窗口的更多相关文章
- h5在线1v1客服|web在线客服系统|h5即时聊天
网上有很多环信.美恰之类的客服系统,最近也使用h5+css3+fontJs+swiper+wcPop等技术架构开发了一个在线客服(1v1沟通聊天),可以应用到在线临时聊天.在线咨询等情景.实现了消息. ...
- pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】
转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...
- 使用 WPF+ ASP.NET MVC 开发 在线客服系统 (一)
近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...
- QQ,MSN,Skype在线客服代码
QQ,MSN,Skype在线客服代码 在网站建设时,为了更好的实施网站的营销型,会用到QQ,MSN等在线交流,以便客户能够快捷方便的联系我们.在这里,提供QQ,MSN的在线客服代码给大家分享: 1.Q ...
- iOS:集成环信EaseMobSDK单聊功能
当然在集成环信之前需要一些准备操作: 1.首先注册环信开发者账号,直接进入环信官网注册即可:http://www.easemob.com 2.按照文档一步一步将需要的文件全部拖入工程中:http:// ...
- 简单方便的在线客服展示插件 jQuery.onServ
onServ jQuery.onServ 是一款简单方便的在线客服jQuery 插件,可以使任意html实现弹出展示在线客服效果, 可以自定义内容,简单配置出多个弹出动作特效,设置位置和样式. git ...
- 微信小程序添加悬浮在线客服会话按钮
微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...
- pc端_移动端_H5_ QQ在线客服链接代码
PC端:QQ在线客服链接代码 <a href="tencent://message/?uin=1239300678&Site=sc.chinaz.com&Menu=ye ...
- .net core 和 WPF 开发升讯威在线客服与营销系统:背景和产品介绍
本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf-m.shengxunwei.com ...
随机推荐
- 一百零二、SAP中ALV事件之十五,让ALV表格自动求和
一.代码如下 二.运行之后,效果如图,表头多了一个求和符号E,最下面一行会列出求和的相关信息 完美
- WCF基础调用
WCF学习demo代码下载 调用:启动wcf服务程序,然后建立一个控制台应用程序 建立wcf程序 添加 using System; using System.Collections.Generic; ...
- sql select 0 字段 某字段是不在指定的表
sql select 0 字段 转自 关于 select 语句中 0 某字段名字,的意思是:该某字段是不在指定的表中的,那么如果要在子查询中利用这个指定的表,且带有这个字段,那么就用这个方式来添加 ...
- 第十八篇 admin组件
admin组件 admin组件使用 admin源码解析 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以 ...
- 【Python】【Django】登录用户-链接Mysql
- 基础语法-for循环的嵌套
基础语法-for循环的嵌套 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.for循环嵌套概述 说白了就是在for循环中再嵌套一层for循环. 二.for循环嵌套案例 1> ...
- C++编程学习(二) 数据
博主已经有一些基础了,所以写的东西可能是容易错的,或者以前没记住的,或者是对理解知识点有帮助的.因此如果有纯小白看到了这篇博文,不懂的地方请自行百度啦~ 另外,本系列所有内容的图片均来自于西北工业大学 ...
- PowerDesigner 破解版,汉化包!
链接:https://pan.baidu.com/s/1R_6g6keo2Y4_V0c1ImeFbA 密码:ncju
- gogs 升级
可以使用 go get -u github.com/gogs/gogs 来升级,但是因为网络原因,这种升级方式失败了.另外一种是在 github 或者 gitee 上面直接下载源码,然后解压到 $GO ...
- 第二章,C语言概述
2.1 简单的C程序示例 #include <stdio.h> #include <stdlib.h> int main(void) { int num; num=; prin ...