h5集成環信在線客服自定義窗口

本文轉載自查看原文 2019-10-12 13:50 309

自定義客服窗口從底部彈出

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ThinkPHP5集成JS-SDK實現微信自定義分享功能前端h5集成阿里雲滑塊驗證 h5在線1v1客服|web在線客服系統|h5即時聊天 H5微信自定義分享鏈接（設置標題+簡介+圖片）微信公眾號h5頁面自定義分享微信小程序H5——自定義屬性data-* H5頁面分享微信自定義分享title和img H5微信自定義分享鏈接（設置標題+簡介+圖片） uni-app H5微信公眾號實現自定義分享 uniapp-兼容H5和微信小程序, 自定義導航欄