侧边悬浮在线客服咨询按钮-在线客服按钮代码实现

GOFLY，一套可私有化部署的免费开源客服系统，基于Golang开发，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的网页在线客服系统，致力于帮助广大开发者/中小站长快速整合私有客服功能

网站只需嵌入一段js或跳转直连地址即可快速接入客服，访客端支持电脑、手机页面自适应，这个项目截止到现在已经更新了一年多时间，github提交了720多次修改，开源版也获取了800多star收藏，您的star就是我的动力，我将继续用心做这个项目◠‿◠。

昨天修改了一下gofly在线客服的悬浮按钮样式，特意把它整理出来进行分享

效果如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css"><script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>.lineBox{position: fixed!important;bottom: 30%;right: 0px;left: auto;z-index: 999999;}.lineBox .lineItem{cursor: pointer;width: 50px;height: 55px;background: #2d8cf0;margin-bottom: 1px;color: #fff;line-height: 55px;text-align: center;position: relative;}.lineItem .layui-icon{font-size: 26px;}.lineItem:hover{opacity: 0.8;}.lineTop{margin-top: 4px;}.lineTip{border-radius: 2px;box-shadow: 1px 1px 3px rgba(0,0,0,.2);position: absolute;top:0px;right: 59px;color: #000;padding: 0 10px;background: #fff;display: none;}.lineTip:before, .lineTip:after {content: "";display: block;position: absolute;width: 0;height: 0;border: 8px solid transparent;border-left-color: rgba(255,255,255,1);right: -16px;top: 10px;z-index: 1;}.lineTip:after{right: -18px;border-left-color: rgb(237,237,237);z-index: 0;}.lineWechat{width: 100px;height: 100px;padding: 0px;}
</style>
<body>
<div class="lineBox"><div class="lineItem"><i class="layui-icon"></i></div><div class="lineItem"><i class="layui-icon"></i><div class="lineTip lineWechat"><img class="lineWechat" src="https://img2020.cnblogs.com/blog/726254/202111/726254-20211103001029429-1411405207.png"/></div></div><div class="lineItem"><i class="layui-icon"></i><div class="lineTip">QQ:630892807</div></div><div class="lineItem"><i class="layui-icon"></i><div class="lineTip">QQ:630892807</div></div><div class="lineItem lineTop" id="launchTopButton"><i class="layui-icon"></i></div>
</div>
<script>$(function(){$("#launchTopButton").click(function() {$('body,html').scrollTop(0);});$(".lineItem").hover(function() {$(".lineTip").hide();$(this).find(".lineTip").show();});});
</script>
</body>
</html>

侧边悬浮在线客服咨询按钮-在线客服按钮代码实现相关推荐

在wordpress开发的网站中添加在线客服咨询功能代码教程
现在主流的PHP建站程序wordpress还是非常的流行,使用的人非常多如何在wordpress网站中增加在线客服咨询功能第一步:在唯一客服系统(gofly.v1kf.com)中注册账号,获取到客 ...
为你解锁微众银行在线客服咨询途径
为你解锁微众银行在线客服咨询途径微众银行采用纯线上的运营模式,用户在网上就能享受便捷的金融服务.为了方便用户咨询问题,微众银行设置有微众银行在线客服,今天小编就给大家介绍一下微众在线客服的咨询方法吧 ...
ttkefu迷你小窗口“在线客服咨询”文字怎么改?
登录网站后,左下角或右下角弹出的迷你对话框中,对话框的标题默认是中文"在线客服咨询",有客户问这个的标题可以修改吗,比如换成英文之类的,这个当然是可以的,那么要怎么修改呢?如图所示 ...
Live800：在线客服系统如何为客服减负？
和人直接打交道的工作都不会轻松.作为和客户联系最为密切的客服,承受的压力可想而知. 压力重.工作创造性低.重复度高.强度大,甚至还经常遇到骚扰客户不讲理还爱给差评,客服人心中一大堆苦水翻腾,就要溢出来 ...
在线云客服管理系统、会话管理、访客管理、客户管理、工单管理、会话记录、考勤统计、数据报表、工单设置、全局设置、转人工服务、自动回复、客户标签、客服监控、客服系统、前端会话、客服管理、在线客服、人工客服
在线云客服管理系统.会话管理.访客管理.客户管理.工单管理.会话记录.考勤统计.数据报表.工单设置.全局设置.转人工服务.自动回复.客户标签.客服监控.客服系统.前端会话.客服管理.在线客服 .人工客 ...
网站客服系统_网页客服系统安装使用_GOFLY在线客服系统
GOFLY提供网站客服系统,网页客服系统 GOFLY,一套可私有化部署的免费开源客服系统,基于Golang开发,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库, ...
在线云客服管理系统、会话管理、访客管理、客户管理、工单管理、会话记录、考勤统计、数据报表、工单设置、全局设置、人工服务、自动回复、客户标签、客服监控、客服系统、前端会话、客服管理、在线客服、人工客服
在线云客服管理系统.会话管理.访客管理.客户管理.工单管理.会话记录.考勤统计.数据报表.工单设置.全局设置.转人工服务.自动回复.客户标签.客服监控.客服系统.前端会话.客服管理.在线客服 .人工客 ...
中移在线携手华为联合打造云客服全栈自主创新样板点，输出客服能力，服务千行百业...
2023年6月16日,中国移动在线营销服务中心(以下简称"中移在线")与华为联合发布"中移云客服暨全栈自主创新展示厅"(简称"展示厅"),共 ...
在线计算机授课,在线计算机教育网站计蒜客改版推出算法竞赛课程
[赛迪网讯]4月16日消息,近日,新型在线计算教育平台计蒜客进行了重大改版,网站从底层架构到课程内容都进行了大幅调整.计蒜客新版除了服务速度和稳定性大幅提升外,还对用户的学习体验进行了优化:同时,计蒜 ...
51CTO移动客户端可以在线下载安装啦 - 51CTO博客开发 - 51CTO技术博客
51CTO移动客户端可以在线下载安装啦 - 51CTO博客开发 - 51CTO技术博客 51CTO移动客户端可以在线下载安装啦 - 51CTO博客开发 - 51CTO技术博客 51CTO移动客户端可以 ...

侧边悬浮在线客服咨询按钮-在线客服按钮代码实现

侧边悬浮在线客服咨询按钮-在线客服按钮代码实现相关推荐

最新文章

热门文章