今年的元宵节遇到情人节,挺不自量力的,呵呵,开篇给各位讲个段子,早上一美女同学在空间发说说道:“开工大吉 起床啦,卖元宵,卖玫瑰,卖避孕套啦~有木有一起去发财的小伙伴?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. SharePoint暂时禁用事件触发

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsof ...

  2. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  3. 第二章 centos安装maven

    一.官网下载 apache-maven-3.3.9-bin.tar.gz 注意:需要jdk1.7及以上 二.上传 scp apache-maven-3.3.9-bin.tar.gz root@10.2 ...

  4. final

    final的变量的值不能被改变.(包括形参) final的方法不能被重写. final的类不能被继承.

  5. 对C++下struct 和 类默认继承的认识

    #include <iostream> using namespace std; struct struct1{ int data1 ; double data2 ; struct1(){ ...

  6. &lt;实训|第二天&gt;掌握linux6.7中安装vmware、vmware安装linux发行版本以及遇到的问题最后libreoffice的安装

    期待已久的linux运维.oracle"培训班"终于开班了,我从已经开始长期四个半月的linux运维.oracle培训,每天白天我会好好学习,晚上回来我会努力更新教程,包括今天学到 ...

  7. JDBC连接数据库程序

    废话少说,看了尚学堂的视频以及某大神的博客,总结出以下.(本文以oracle数据库为例) 创建一个JDBC连接数据库的程序,需要着手做以下几件事情: 注意,这里边使用了java.sql.Stateme ...

  8. 关于sg90舵机的,要知道!要注意!

    这类舵机的转向跟频率和占空比相关,两者缺一不可! 1.在一个特定的频率下,特定的占空比使得舵机会转到一个角度,占空比不变,则角度不会不会变化,所以想要舵机动,就要在国定的频率下不断改变占空比. 2.当 ...

  9. Yii2设计模式——简单工厂模式

    除了使用 new 操作符之外,还有更多的制造对象的方法.你将了解到实例化这个活动不应该总是公开进行,也会认识到初始化经常造成"耦合"问题. 应用举例 yii\db\mysql\Sc ...

  10. Python生成随机字符串

    利用Python生成随机域名等随机字符串. #!/usr/bin/env python# -*- coding: utf-8 -*- from random import randrange, cho ...