如何让百度商桥弹出聊天小窗口而不是打开新页面

【导读】百度商桥是一款免费好用的网页在线聊天工具,操作很方便能满足多数客户的需求。但是我们如何实现在当前页面中打开聊天窗口,而不是弹出新页面?

百度商桥毕竟是BAT公司开发的一款网页聊天软件,关键还免费,所以用户量还是非常多的。

然而,不少客户测试了百度商桥“沟通窗口”中的“新页面”和“小浮窗”功能均不能实现。

这么大的BUG吗?

那咱们做无锡网站开发的不能袖手旁观,得在有限的条件内创造出更多可能!

【目标】实现点击“立即咨询”触发弹窗(而不是打开新窗口聊天),在当前页面直接聊天

如何让百度商桥弹出聊天小窗口而不是打开新页面

不多说,直接上代码,如下:

1、引入CSS样式文件

<style type="text/css">

   #tip { position: absolute; right: 0px;

    bottom: 0px;  height: 0px;

    width: 502px;  border: 1px solid #CCCCCC;

    background-color: #eeeeee;  padding: 1px;

    overflow: hidden; display: none;

    font-size: 12px; z-index: 10;

   }

   #tip p { padding: 1px;}

   #tip h1 { font-size: 16px; height: 25px;

    line-height: 25px; background-color: #0076fc;

    color: #FFFFFF; padding: 0px 3px 0px 3px;

    filter: Alpha(Opacity = 100);

   }

   #tip h1 a, #detail h1 a { float: right;

    text-decoration: none; color: #FFFFFF;

   }

</style>

2、引入JavaScript代码

<script type="text/javascript">

   window.onload = function(){

    var divTip = document.createElement("div");

    divTip.id = "tip";

    divTip.innerHTML = "<h1><a href='javascript:void(0)' onclick='start()'>关闭</a>在线客服</h1><p><iframe src='此处填写你的百度商桥独立沟通链接' scrolling='no' width='100%' height='580'></iframe></p>";

    divTip.style.height = '0px';

    divTip.style.bottom = '0px';

    divTip.style.position = 'fixed';

    document.body.appendChild(divTip);

   }

   var handle;

   function start(count){

    var obj = document.getElementById("tip");

    if (parseInt(obj.style.height) == 0) {

     obj.style.display = "block";

     handle = setInterval("changeH('up')", 20);

    }

    else {

     handle = setInterval("changeH('down')", 20)

    }

   }

   function changeH(str){

    var obj = document.all ? document.all["tip"] : document.getElementById("tip"); 

    if (str == "up") {

     if (parseInt(obj.style.height) > 400) 

      clearInterval(handle);

     else

      obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";

    }

    if (str == "down") {

     if (parseInt(obj.style.height) < 8) {

      clearInterval(handle);

      obj.style.display = "none";

     }

     else

      obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";

    }

   }

   function showwin(){

    start();

   }

</script>

3、如何使用呢?

例如:在您网页中需要使用到客服的地方调用  <a href="#" onclick="start()">立即咨询</a>

注意:a标签的href是需要写成“#”伪链接

百度客服调用效果

【总结】

无锡做网站公司-马氪软件本次无私分享的就是实现了百度商桥在当前页面中调用,不需要再次弹窗到新页面中进行聊天,用户体验更高。

从右下角缓慢上移,打开聊天窗口(并且是带关闭按钮的哦),直接把百度商桥的“BUG”解决了,您可以更好地优化以符合您自己的网站风格。


本文链接:http://mkapps.cn/news/ask/303.html

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章