今年的元宵节遇到情人节,挺不自量力的,呵呵,开篇给各位讲个段子,早上一美女同学在空间发说说道:“开工大吉 起床啦,卖元宵,卖玫瑰,卖避孕套啦~有木有一起去发财的小伙伴?Let’s go…”,对于此种长相尚可然后又喜欢说调皮话的女生,博主不会放弃任何调侃机会,立马评论道:“记得叫上我哦,赚的钱都归你,然后卖不完的避孕套一起消灭掉,何如?”,没一会儿,此同学找我聊天,各种问,毕业这几年过得怎么样?处对象木?……。只可惜,博主已有对象,过得还算凑合,最主要的博主虽然有时候讲话喜欢带点色彩,但骨子里是个十足的正经人。在此情人节之际,呼吁单身的园友们如若有喜欢的女神要大胆的表白,勇敢追寻自己的幸福,祝正在阅读此文的你双节日快乐!!!╮(╯3╰)╭

转正题了哦!由于公司的在线保险业务越做越大,用户量骤增,各种奇葩用户,各种小白式操作,各种低智商……。此种情况下,有迫切需要在公司网站侧边栏加了一排QQ客服。

查了查资料,QQ客服有两种表现形式,第一种是官方标准的,第二种是自定义的。

官方标准的是一段部署代码,根据qq的在线状态自动调用腾讯相关的图标,比较简单不做详细介绍,参见地址:http://shang.qq.com/widget/consult.php

普通青年可以选择官方标准的部署代码,第二种是根据qq在线状态调用自定义的图片,so,想做文艺青年的请继续跟着节奏,且听我慢慢细说。先上个效果图如下:

部署代码操作步骤如下:

1) 申请代码

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="" src="http://wpa.qq.com/pa?p=2:271569542:43 &r=0.4220318759840679" alt="点击这里给我发消息" title="点击这里给我发消息"></a>

2) 定义online数组,必须是online命名

<script>var online= new Array();</script>

3) 获取在线状态

<script>var online= new Array();</script>

可以获取多个,必须以冒号分隔,以冒号结尾,比如:

<script src="http://webpresence.qq.com/getonline?Type=1&271569542:78293657:123456:"></script>

online[0]=0,表示271569542离线

online[1]=1,表示78293657在线

online[2]=1,表示123456在线

填写号码的先后顺序,分别对应数组online的0、1、2

4) 添加代码

把src='http://wpa.qq.com/pa?p=1:80000805:1'替换为自己的图片,比如:

<script>if(online[]==){document.write('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="http://xxxxx/outline.jpg" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')}else{document.write('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="http://xxxxx/online.jpg" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')} </script>

完整代码示例如下(用到jquery和自定义图片,需下载源码文件然后替换自己的qq可演示):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flay {display: block;position: fixed;right:10px;width: 112px;height: 240px;overflow: hidden;z-index: ;padding:76px 17px;}
</style>
<script src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
var online = new Array();
</script>
<script src="http://webpresence.qq.com/getonline?Type=1&465358715:2546980218:2510876943:1349144603:"></script>
</head> <body>
<div id="flay" class="flay" > </div>
</body>
<script>
if (online[] == ) {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=373810510&site=qq&menu=yes"><img border="0" src="q1_g.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
} else {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=373810510&site=qq&menu=yes"><img border="0" src="q1.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
}
if (online[] == ) {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q2_g.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
} else {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q2.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
}
if (online[] == ) {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q3_g.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
} else {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q3.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
}
if (online[] == ) {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q4_g.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
} else {
$("#flay").append('<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=271569542&site=qq&menu=yes"><img border="0" src="q4.png" alt="点击这里给我发消息" title="点击这里给我发消息"></a>')
}
</script>
</html>

示例下载

如果您觉得此文对你有用,不要吝啬右边的推荐哦,大家的支持是我分享智慧的动力,同时欢迎朋友们和我微博互动交流:-)

正在看本人博客的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为!旁边有“推荐”二字,你就顺手把它点了吧,相得准,我分文不收;相不准,你也好回来找我!

【情人节来一发】网站添加QQ客服功能的更多相关文章

  1. wpf 客户端 添加qq客服咨询

    使用qq推广 站点:http://shang.qq.com/v3/widget.html 复制里面的html代码: <a target=" src="http://wpa.q ...

  2. 页面中添加qq客服

    html页面 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  3. pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】

    转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...

  4. 企业QQ客服的添加

    商城项目需要用腾讯的企业QQ客服,但默认提供的是一个链接,点击后弹出一个新页面, 请确认 确认打开QQ与营销QQ4009928310对话? 点确认才弹出聊天窗口,并不是需求想要的效果,经过一番折腾联系 ...

  5. 网站QQ客服链接代码

    个人QQ客服代码 <a href="tencent://message/?uin=QQ号码">在线咨询</a> 企业QQ客服代码 <a href=&q ...

  6. 微信轻松接入QQ客服

    一直以来,大家都苦恼怎么实现微信公众帐号可以接入客服,也因此很多第三方接口平台也开发客服系统CRM系统,不过不是操作复杂就是成本太高.今天分享一个低成本又简便的方法,让你的公众帐号接入QQ客服.下面介 ...

  7. QQ客服出现“企业QQ在线咨询无权限在当前场景使用!” 问题

    加入了QQ“多客服”功能 会出现这个问题 解决办法: 在平台http://wp.qq.com/ 上设置,只需两步骤 步骤一:在http://wp.qq.com/set.html 里,安全级别选项,选择 ...

  8. jQuery网页右侧固定层显示隐藏在线qq客服代码

    CSS代码: @charset "utf-8"; ;;} html,body{font-size:12px;font-family:"微软雅黑";outline ...

  9. web页面接入QQ客服的方法

    在做微信二次开发的时候或者手机版网页的时候有人想在接qq客服,下面我就分享一下具体操作: 1,准备一个QQ号,可以是企业QQ,也可以是个人QQ.登录网址:http://shang.qq.com/wid ...

随机推荐

  1. workbench中safe update

    1.在workbench中表格显示为readonly ,更新时提示Error Code: 1175. You are using safe update mode and you tried to u ...

  2. LeakCanary Android 和 Java 内存泄露检测。

    开始使用 在 build.gradle 中加入引用,不同的编译使用不同的引用: dependencies { debugCompile 'com.squareup.leakcanary:leakcan ...

  3. android学习笔记57——Service_2

    Service生命周期 参考:http://codingnow.cn/android/515.html 应用程序启动服务的方式不同,其生命周期也有所不同. startService生命周期如下左图: ...

  4. HDU5806:NanoApe Loves Sequence Ⅱ(尺取法)

    题目链接:HDU5806 题意:找出有多少个区间中第k大数不小于m. 分析:用尺取法可以搞定,CF以前有一道类似的题目. #include<cstdio> using namespace ...

  5. RAC ORA-12170 ora-12535/tns-12535

    现象:开发人员抱怨RAC数据库出现了时连得上时连不上的情况,用SQLPLUS一试,果然有这样的情况: SQL> conn system/*******@bjyd 已连接. SQL> con ...

  6. Repeater控件

    一:http://www.cnblogs.com/foolin/archive/2011/08/31/2161342.html 二:http://www.cnblogs.com/shipfi/arch ...

  7. POJ 2240 Arbitrage(SPFA+邻接矩阵)

    ( ̄▽ ̄)" #include<iostream> #include<cstdio> #include<cmath> #include<algori ...

  8. [源码分析]ReentrantLock &amp; AbstractQueuedSynchronizer &amp; Condition

    首先声明一点: 我在分析源码的时候, 把jdk源码复制出来进行中文的注释, 有时还进行编译调试什么的, 为了避免和jdk原生的类混淆, 我在类前面加了"My". 比如把Reentr ...

  9. 非关系型数据库----MongoDB

    一.什么是MongoDB? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提 ...

  10. mysql 的一些事

    给mysql的root用户设置密码 1.刚安装好的mysql是没有设置密码的 2.设置密码 ****************************************************** ...