悬浮在网站上的微信在线客服如何实现 - 快商通

免费试用

悬浮在网站上的微信在线客服如何实现

作者:快商通发布时间:2020年08月06日

摘要:

通过快商通在线客服系统的后台配置,为网站添加在线客服的分组图标,根据需求设置自己的微信二维码,就可以实现将在线客服的功能组件悬浮在网站上的效果,鼠标触摸微信图标可以自动弹出微信二维码。

网站在线客服系统
网站在线客服系统

网站上的微信在线客服是什么

经常能够在他人网站上看到右侧浮动的在线客服系统,其中就包含有“微信咨询”的相关按钮,触摸或点击的时候会自动弹出企业的二维码,非常方便。也可以点击旁边的在线咨询,可以直接跟客服人员进行对话。这种效果是目前大公司想要做微信营销主流的页面展示方式。

网站上的微信在线客服
网站上的微信在线客服

悬浮在网站上的微信在线客服如何实现

1、打开快商通,找到【设置中心】-【生成代码】,点击进入后选择【图标设置】,点击【分组图标】进入浮动在线客服功能组件的设置界面。

在线客服图标设置
在线客服图标设置

在图标外观下面选择自定义样式,在弹出的【定制代码】内容框中加入自己想要定制化的代码就可以了。

自定义在线客服样式
自定义在线客服样式

如果不会写代码没关系,这边分享一下快商通官网的在线客服代码,先复制粘贴出来,Ctrl+f搜索“微信咨询”,找到微信二维码的图片地址,秀改成你自己的公众号二维码就可以了(文章底部分享完整代码)。

替换代码中的微信公众号二维码
替换代码中的微信公众号二维码

当然,除了微信咨询的其他功能组件的链接地址也要一并修改,调整完以后再复制进【定制代码】栏中,点击保存就可以了。

保存图标样式
保存图标样式

悬浮在网站上的微信在线客服代码分享

下载快商通后找到【设置中心】-【生成代码】,点击进入后依次选择:【图标设置】-【分组图标】-【图标外观】-【自定义样式】,将下面的代码调整后复制到【定制代码】内容框中就可以了。

以下是完整代码:

{
    //关闭区域(对象)的id值
    g_close: '',
    //顶端-html代码
    g_top: function() {
        var g_id = KS.$(KS.grouping2IconId);
        var ksscrollToTop = KS.$(KS.ksscrollToTop);
        window.onscroll= function(){
            var t = document.documentElement.scrollTop||document.body.scrollTop;
            var ksscrollToTop = document.getElementById('ksscrollToTop');
            if(t>0){
                ksscrollToTop.style.display="block";
            }else{
                ksscrollToTop.style.display="none";
            }
        }
        this.g_scrollToTop();
        var _html = [];
        _html.push('<a style="position:relative;display:block; width:70px; height:75px;font-size:13px;letter-spacing: 0; color:#fff;background:#05CCB7; text-align:center;text-decoration:none;border-top-left-radius: 2px;border-top-right-radius: 2px;" onmouseover="this.style.background=\'#05BEB4\';" onmouseout="this.style.background=\'#05CCB7\';" href="http://test.kuaishang.cn/bs/im.htm?cas=1061___168168&fi=1136" title="在线咨询" target="_blank" rel="nofollow"><img style="margin-top:15px;margin-bottom:4px;" src="//www.kuaishang.cn/cusimg/ks_fz_before_20200221.png" border="0"/><div>在线咨询</div><img style="position:absolute;left:3px;bottom:0;" src="//www.kuaishang.cn/cusimg/ks_fz_line_20200221.png" border="0"/></a>');
        _html.push('<a style="position:relative;display:block; width:70px; height:74px;font-size:13px;letter-spacing: 0; color:#fff;background:#05CCB7; text-align:center;text-decoration:none;cursor:pointer;" onmouseover="this.style.background=\'#05BEB4\';document.getElementById(\'kswechat_code\').style.display=\'block\';" onmouseout="this.style.background=\'#05CCB7\';document.getElementById(\'kswechat_code\').style.display=\'none\';" title="微信咨询" rel="nofollow"><img style="margin-top:13px;margin-bottom:4px;" 
        src="//www.kuaishang.cn/cusimg/ks_fz_wechat_20200229.png" border="0"/><div>微信咨询</div><img style="position:absolute;left:3px;bottom:0;" src="//www.kuaishang.cn/cusimg/ks_fz_line_20200221.png" border="0"/></a>');
        _html.push('<div style="position: relative; display: block; width: 70px; height: 74px; font-size: 13px; letter-spacing: 0px; color: rgb(255, 255, 255); background: rgb(5, 204, 183); text-align: center; text-decoration: none;overflow: hidden;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;" onmouseover="this.style.overflow=\'\';" onmouseout="this.style.overflow=\'hidden\';"><img style="position:absolute;right:3px;bottom:0;" src="//www.kuaishang.cn/cusimg/ks_fz_line_20200221.png" border="0"><div style="width:300px;height:73px;float:right;background:#05CCB7;margin-right:-230px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;position: absolute;z-index:1;right:0;top:0;" onmouseover="this.style.marginRight=\'0\';" onmouseout="this.style.marginRight=\'-230px\';"><div style="width:70px;height:73px;float:left;text-align:center;color:#fff;font-weight:300;line-height:1;overflow:hidden;"><img style="margin-top:13px;margin-bottom:4px;" src="//www.kuaishang.cn/cusimg/ks_fz_phone_20200221.png" border="0"><div>电话咨询</div></div><div style="width:230px;height:73px;float:left;"><div style="width: 220px;height:34px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin-top: 20px;overflow:hidden;"><form name="f" id="f" method="post" action="https://tel.kuaishang.cn/calld.php" target="aa"><input type="hidden" name="fromurl" id="call_fromurl" value="http://www.kuaishang.cn/mianfeidianhua.html"><input type="hidden" name="sid" value="26"><input type="hidden" name="did" value="199"><input style="display:block;width: 140px;padding:0 10px;height:34px;float:left;color:#a4a4a4;border:none;outline:0;font-size: 12px;font-weight:300;box-sizing: border-box;" name="tel" type="text" id="tel" value="输入电话即可免费通话" onclick="this.value=\'\'" onblur="if (value ==\'\'){value=\'输入电话即可免费通话\'}"><input style="display:block;width: 80px;height:34px;float:right;padding: 0;line-height:34px;text-align:center;background-color:#ff9c01;color:#fff;border:none;outline:0;font-size: 13px;font-weight:300;box-sizing: border-box;cursor:pointer;" name="Submit" type="submit" id="callBtn" value="立即回电"><iframe name="aa" frameborder="0" width="0" height="0" style="display: none"></iframe></form></div></div></div></div>');
        _html.push('<a style="position:relative;display:block; width:70px; height:75px;font-size:13px;letter-spacing: 0; color:#fff;background:#05CCB7; text-align:center;text-decoration:none;" onmouseover="this.style.background=\'#05BEB4\';" onmouseout="this.style.background=\'#05CCB7\';" href="https://kuaishang.cn/reg.html?refer=demo" title="体验DEMO" target="_blank" rel="nofollow"><img style="margin-top:14px;margin-bottom:4px;" src="//www.kuaishang.cn/cusimg/ks_fz_demo_20200221.png" border="0"/><div>体验DEMO</div><img style="position:absolute;left:3px;bottom:0;" src="//www.kuaishang.cn/cusimg/ks_fz_line_20200221.png" border="0"/></a>');
        _html.push('<a style="position:relative;display:block; width:70px; height:75px;font-size:13px;letter-spacing: 0; color:#fff;background:#ff9c01; text-align:center;text-decoration:none;" onmouseover="this.style.background=\'#ef9405\';" onmouseout="this.style.background=\'#ff9c01\';" href="https://kuaishang.cn/reg.html?refer=rightFloatingBox" title="使用免费版" target="_blank" rel="nofollow"><img style="margin-top:14px;margin-bottom:4px;" src="//www.kuaishang.cn/cusimg/ks_fz_free_20200221.png" border="0"/><div>使用免费版</div></a>');
        _html.push('<a id="ksscrollToTop" style="position:relative;display:none; width:70px; height:48px;font-size:13px;letter-spacing: 0; color:#fff;background:#dedfdf; text-align:center;text-decoration:none;cursor:pointer;" onmouseover="this.style.background=\'#eaeaea\';" onmouseout="this.style.background=\'#dedfdf\';" onclick="window.scrollTo(0,0)" target="_blank"><img style="position:absolute;left:22px;top:16px;" src="//www.kuaishang.cn/cusimg/ks_fz_top_20200221.png" border="0"/></a>');
        _html.push('<div id="kswechat_code" style="position:absolute;display:none; width:207px; height:290px;font-size:13px;letter-spacing: 0; color:#fff;background:url(//www.kuaishang.cn/cusimg/icon_wechat_nosem.png); text-align:center;top:50%;right:74px;margin-top:-146px;"></div>');
        return _html.join('');
    },
    g_scrollToTop: function() {
        var t = document.documentElement.scrollTop||document.body.scrollTop;
        setTimeout(function() {
            var ksscrollToTop = document.getElementById('ksscrollToTop');
            if(t>0){
                ksscrollToTop.style.display="block";
            }else{
                ksscrollToTop.style.display="none";
            }
        }, 100);
    },
    //部门客服内容头
    g_cotent_top: '',
    /**部门列表-html代码
* @_id 部门ID
* @_name    部门名称
* @_status  部门状态
* @_hasCs   是否有需要显示的客服
*/
    g_dpt_list: function(_id, _name, _status, _hasCs) {
        return '';
    },
 
    /**客服列表-html代码
* @_id 客服ID
* @_name    客服名称
* @_status 客服状态
*/
    g_cust_list: function(_id, _name, _status) {
        return '';
    },
    /**部门客服内尾部-html代码*/
    g_cotent_but: '</div></div>',
 
    /**中间按钮列表-html代码*/
    g_mid: function() {
        return '';
    },
    /**底部-html代码*/
    g_but: function() {
        return '';
    },
    /**浮动*/
    g_float: function() {
        var f_v = {
            _HAlign: 'right',
            //放在左边-left 右边-right 中间-center
            _VAlign: 'middle',
            //放在底部-bottom 顶部-top 居中-middle
            _HSize: 10,
            //水平偏移位置  如上面是 right 则表示距离右边距50px
            _VSize: 0,
            //垂直偏移位置  如上面是 bottom 则表示距离底部边距50px
            _zIndex: 888 //层显示优先级,越大显示时越靠前端--可能会被优先级大于该值的层覆盖
        };
        return f_v;
    }
}

总结:
以上是关于悬浮在网站上的微信在线客服的实现方式,总体来说不算特别难,不需要的功能组件也可以自己剔除,有一定html代码基础的站长都能轻松搞定。

在线客服免费试用,输入手机号即可

免费试用
权威认证

ISO27001信息安全管理 高新技术企业 CMMI3

联系我们

服务热线:400-900-1323

地址:厦门市集美软件园三期B20栋11-13层

扫码关注微信公众平台

仅需10秒,立即免费试用!
企业
行业
  • 请选择行业
  • IT/通讯/电子
  • 电商行业
  • 互联网
  • 房地产/建筑业
  • 工艺美术
  • 婚纱摄影
  • 交通/运输/物流/仓储
  • 教育行业
  • 金融业
  • 旅游/餐饮/娱乐/休闲/购物
  • 贸易/批发/零售/租赁业
  • 能源/矿产/环保
  • 农、林、牧、渔业
  • 生产/加工/制造
  • 食品业
  • 文化/传媒/体育
  • 医疗/美容
  • 医药行业
  • 政府/非盈利机构
  • 咨询业
  • 医疗行业
  • 服务业
  • 其他