web网页qq客服功能

需求：在网站首页的右侧中间位置悬放qq客服，可以进行在线qq交流

直接上代码，代码也是在网上找的一段，实测可用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页右侧悬浮深蓝色qq在线客服代码</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}.rides-cs {  font-size: 12px; background:#29a7e2; position: fixed; top: 250px; right: 0px; _position: absolute; z-index: 1500; border-radius:6px 0px 0 6px;}
.rides-cs a { color: #00A0E9;}
.rides-cs a:hover { color: #ff8100; text-decoration: none;}
.rides-cs .floatL { width: 36px; float:left; position: relative; z-index:1;margin-top: 21px;height: 181px;}
.rides-cs .floatL a { font-size:0; text-indent: -999em; display: block;}
.rides-cs .floatR { width: 130px; float: left; padding: 5px; overflow:hidden;}
.rides-cs .floatR .cn {background:#F7F7F7; border-radius:6px;margin-top:4px;}
.rides-cs .cn .titZx{ font-size: 14px; color: #333;font-weight:600; line-height:24px;padding:5px;text-align:center;}
.rides-cs .cn ul {padding:0px;}
.rides-cs .cn ul li { line-height: 38px; height:38px;border-bottom: solid 1px #E6E4E4;overflow: hidden;text-align:center;}
.rides-cs .cn ul li span { color: #777;}
.rides-cs .cn ul li a{color: #777;}
.rides-cs .cn ul li img { vertical-align: middle;}
.rides-cs .btnOpen, .rides-cs .btnCtn {  position: relative; z-index:9; top:25px; left: 0;  background-image: url(http://demo.lanrenzhijia.com/2014/service1031/images/lanrenzhijia.png); background-repeat: no-repeat; display:block;  height: 146px; padding: 8px;}
.rides-cs .btnOpen { background-position: 0 0;}
.rides-cs .btnCtn { background-position: -37px 0;}
.rides-cs ul li.top { border-bottom: solid #ACE5F9 1px;}
.rides-cs ul li.bot { border-bottom: none;}
</style>
</head>
<body style="height:2000px;">
<!--代码部分begin-->
<div id="floatTools" class="rides-cs" style="height:246px;"><div class="floatL"><a id="aFloatTools_Show" class="btnOpen" title="查看在线客服" style="top:20px;display:block" href="javascript:void(0);">展开</a><a id="aFloatTools_Hide" class="btnCtn" title="关闭在线客服" style="top:20px;display:none" href="javascript:void(0);">收缩</a></div><div id="divFloatToolsView" class="floatR" style="display: none;height:237px;width: 140px;"><div class="cn"><h3 class="titZx">懒人之家在线客服</h3><ul><li><span>客服1</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li><li><span>客服2</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li><li><span>客服3</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li><li><a href="http://www.lanrenzhijia.com/" target="_blank">懒人之家</a><a href="http://www.lanrenzhijia.com/js" target="_blank">懒人之家js</a><div class="div_clear"></div></li><li style="border:none;"><span>电话：400-000-0000</span> </li></ul></div></div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>$(function(){$("#aFloatTools_Show").click(function(){$('#divFloatToolsView').animate({width:'show',opacity:'show'},100,function(){$('#divFloatToolsView').show();});$('#aFloatTools_Show').hide();$('#aFloatTools_Hide').show();                });$("#aFloatTools_Hide").click(function(){$('#divFloatToolsView').animate({width:'hide', opacity:'hide'},100,function(){$('#divFloatToolsView').hide();});$('#aFloatTools_Show').show();$('#aFloatTools_Hide').hide();   });});
</script>
<!--代码部分end-->
</body>
</html>

只需要将上面代码中的3个客服的qq号码换成你自己的就可以了：

注意点：作为客服的qq号码必须开通设置客服功能：

设置方法：https://jingyan.baidu.com/article/b24f6c823425a586bfe5da1f.html

web网页qq客服功能相关推荐

H5页面使用qq客服功能
H5页面使用qq客服功能 pc端和移动端使用QQ在线客服进行聊天的一些坑和解决方案 tx官方通讯组件注册: 遇到的问题: 解决方案: pc端和移动端使用QQ在线客服进行聊天的一些坑和解决方案最近有一 ...
网站在线QQ客服功能
在线QQ客服功能 http://connect.qq.com/intro/wpa <a target="_blank" href="http://wpa.qq.co ...
腾讯提供的QQ在线样式——QQ客服功能，非浮动的！
经常在一些网站上看到qq客服的功能,一点击就会把相应的qq调出来. 先把相关代码贴出: 如下:href=tencent://message/?uin=429443535&Site=www.ct ...
实现QQ客服功能：qq的Tencent://Message/协议
网页中打开qq联系客服: <a target="blank" href="tencent://message/?uin=97792****&Site=咨询& ...
手机端qq客服代码点击弹出qq聊天窗http://www.51xuediannao.com/jiqiao/1026.html
手机端qq客服代码点击弹出qq聊天窗来源:web前端开发作者: 懒人建站日期:2016-12-02 人气:5256 在手机端qq客服代码点击弹出qq聊天窗怎么实现那?其实和web端qq客服代码一 ...
h5调起QQ客服的坑（PC端、移动端）
废话:最近运营要求研发增加qq客服功能,于是这个任务就交给了我这个前端小白,查了一下资料,跟着他们做,发现都不正确,自己研究之后,写下这个博客,希望大家不要踩坑! 不是任何一个QQ都直接加进那段代码里 ...
代码实现网页右侧固定的qq客服，微信，手机号，置顶的功能
实现网页右侧固定的qq客服,微信,手机号,置顶的功能 html代码部分图片路径改成自己的 <div id="right">& ...
腾讯QQ,msn,百度Hi,淘宝的用户链接及网页在线客服代码
腾讯QQ,msn 百度HI 等一些聊天工具的网页在线客服代码添加在个人还是商业网站尤为重要.如何添加属于自己的QQ网页链接?添加个人QQ 等链接是很简单的,但链接图片选择是否在线状态就麻烦了点. 先 ...
js、html唤起唤起qq客服，加群功能
文章目录一.唤起qq 二.加群功能唤起qq实际就是对qq推广工具的使用一.唤起qq 实际就是唤起指定的qq聊天窗口,如果没有该好友,会提示你添加 qq客服手机唤起: <a target= ...
php右侧弹窗QQ客服,JavaScript_网页右侧悬浮滚动在线qq客服代码示例，网页右侧悬浮滚动QQ在线客服 - phpStudy...
网页右侧悬浮滚动在线qq客服代码示例网页右侧悬浮滚动QQ在线客服代码 function myEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEve ...

web网页qq客服功能

web网页qq客服功能相关推荐

最新文章

热门文章