自定义客服窗口从底部弹出

<!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集成环信在线客服自定义窗口的更多相关文章

  1. h5在线1v1客服|web在线客服系统|h5即时聊天

    网上有很多环信.美恰之类的客服系统,最近也使用h5+css3+fontJs+swiper+wcPop等技术架构开发了一个在线客服(1v1沟通聊天),可以应用到在线临时聊天.在线咨询等情景.实现了消息. ...

  2. pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】

    转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...

  3. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  4. QQ,MSN,Skype在线客服代码

    QQ,MSN,Skype在线客服代码 在网站建设时,为了更好的实施网站的营销型,会用到QQ,MSN等在线交流,以便客户能够快捷方便的联系我们.在这里,提供QQ,MSN的在线客服代码给大家分享: 1.Q ...

  5. iOS：集成环信EaseMobSDK单聊功能

    当然在集成环信之前需要一些准备操作: 1.首先注册环信开发者账号,直接进入环信官网注册即可:http://www.easemob.com 2.按照文档一步一步将需要的文件全部拖入工程中:http:// ...

  6. 简单方便的在线客服展示插件 jQuery.onServ

    onServ jQuery.onServ 是一款简单方便的在线客服jQuery 插件,可以使任意html实现弹出展示在线客服效果, 可以自定义内容,简单配置出多个弹出动作特效,设置位置和样式. git ...

  7. 微信小程序添加悬浮在线客服会话按钮

    微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会 ...

  8. pc端_移动端_H5_ QQ在线客服链接代码

    PC端:QQ在线客服链接代码 <a href="tencent://message/?uin=1239300678&Site=sc.chinaz.com&Menu=ye ...

  9. .net core 和 WPF 开发升讯威在线客服与营销系统：背景和产品介绍

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf-m.shengxunwei.com ...

随机推荐

  1. mcu运行时间估算

    昨个伙计问我他那个板子的程序运行时间估算问题… 现在说一下估算的思路.首先确定有几个点,板子的主频.时钟周期,机器周期. 首先由主频f得到一个时钟周期为1/f. 再者时钟周期与机器周期有一个比例关系, ...

  2. Kali链接Xshell和更新源

    一.Xshell首次链接kali系统中的ssh Xshell:帮助我们去连接各种服务平台,方便管理服务器,链路可以加密处理(ssh/vsftp) 1.开启kali中的ssh服务,service ssh ...

  3. UVA - 1149 Bin Packing（装箱）（贪心）

    题意:给定N(N<=10^5)个物品的重量Li,背包的容量M,同时要求每个背包最多装两个物品.求至少要多少个背包才能装下所有的物品. 分析:先排序,从最重的开始装,如果重量小于M,则如果能装一个 ...

  4. CSS - 导入Google Web 字体

    @import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); b ...

  5. springboot整合mybatis与thymeleaf

    1.创建springboot项目 (1)选择Spring Initializr (2)填写自己的Group 与 Artifact (3)选择依赖框架 等待maven下载好依赖和插件即可 2.主配置文件 ...

  6. Python 日期时间datetime 加一天，减一天，加减一小时一分钟,加减一年

    计算年.月.日需要安装组件包 pip install python-dateutil 当前日期时间 import datetime print datetime.datetime.now() # 20 ...

  7. Airflow 使用 Celery 时，如何添加 Celery 配置

    背景 前段时间我选用了 Airflow 对 wms 进行数据归档,在运行一段时间后,经常发现会报以下错误: [-- ::,: WARNING/ForkPoolWorker-] Failed opera ...

  8. javascript 连续赋值（连等运算）问题研究

    前几天看到一个javascript 连续赋值的问题,运行了一下,结果出乎意料,发现这里的水真的有点深啊,连续赋值的底层机制,没有一本前端书籍有详细介绍的,自己做实验研究了一下,先来看结果: var a ...

  9. 吴裕雄--天生自然C++语言学习笔记：C++ 基本语法

    C++ 程序可以定义为对象的集合,这些对象通过调用彼此的方法进行交互. 对象 - 对象具有状态和行为.例如:一只狗的状态 - 颜色.名称.品种,行为 - 摇动.叫唤.吃.对象是类的实例. 类 - 类可 ...

  10. Arduino串口的一些高级用法

    1.配置串口通信数据位.校验位.停止位通常我们使用Serial.begin(speed)来完成串口的初始化,这种方式,只能配置串口的波特率.而使用Serial.begin(speed, config) ...