Ichat
深度自由定制在线客服jQuery插件
Install / Use
/learn @iyangyuan/IchatREADME
ichat
可能是历史上最灵活的jQuery在线客服插件
简介：
ichat是一款开源免费在线客服jQuery插件，通过该插件，您可以自由的定制属于自己的在线客服代码。
ichat充分吸收传统在线客服插件的优点，并加上自身的独特设计，使得ichat可定制性异常强大。
ichat追求简单实用，走小清新路线，以便能够适应大多数网站风格。
ichat几乎全部由配置生成，使用简便，不需要写html，但需要写js，因为配置是json对象。
ichat体积小巧，代码高效，采用jQuery插件封装，与原有系统零冲突。
ichat兼容旧版本IE浏览器，例如：IE6、IE7等，虽然效果一般，但至少可以用，火狐、谷歌、360等浏览器更不在话下。
使用说明：
引用插件的js、css文件：
<link rel="stylesheet" href="css/ichat-1.0.min.css">
<!--ichat是jQuery插件，必须先引入jQuery-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/ichat-1.0.min.js"></script>
调用ichat插件，生成在线客服浮窗：
$("body").ichat({
//ichat配置
});
使用示例：
<!DOCTYPE html>
<html>
<head>
<title>ichat使用示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/ichat-1.0.min.css">
</head>
<body>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/ichat-1.0.min.js"></script>
<script>
$(document).ready(function(){
$("body").ichat(
{
//浮窗位置，取值：left|right
placement: "right",
//浮窗到页面顶部的距离相对于浏览器高度的比例，取值：1~100
//ie6、ie7下此项设置无效
top: 20,
//浮窗显示的文本
title: "在线客服",
//浮窗配色，取值：black|blue|red|green
color: "blue",
//以何种事件展开浮窗，取值：click|hover
trigger: "click",
//浮窗展开后的可见内容列表
items:[
{
//内容类型，取值：qq|tel|text
//qq用来显示客服QQ
type: "qq",
//内容标题
title: "客服QQ",
//内容以何种事件展开，取值：click|hover|none
trigger: "click",
//内容默认是否显示，取值：true|false
open: true,
//QQ列表
items: [
{
//QQ名称
title: "业务客服",
//QQ号码
qq: "1234567",
//自定义QQ图标绝对地址，图标尺寸必须为16x16，如果不想使用自定义图标，请不要写此属性
image: "http://www.kpdown.com/sexv/soft_.gif"
},
{
title: "技术客服",
qq: "1234568"
},
{
title: "售后客服",
qq: "1234569"
}
]
},{
//tel用来显示联系电话
type: "tel",
title: "联系电话",
trigger: "hover",
open: false,
//电话列表
items: [
{
//作为超链接的title属性，鼠标移到电话上显示
title: "总部号码",
//电话号码，直接显示在列表中
tel: "13200001111",
//自定义电话图标绝对地址，图标尺寸必须为16x16，如果不想使用自定义图标，请不要写此属性
image: "http://www.kpdown.com/sexv/soft_.gif"
},{
title: "朝阳区分机",
tel: "13200001112"
}
]
},
{
//text用来显示文本内容
//文本内容无图标，只有标题和内容
type: "text",
title: "其他信息",
trigger: "none",
open: true,
items: [
{
//标题即文本的开头，加粗显示；如果不想指定标题，请不要写此属性
title: "公告：",
//文本内容，紧跟标题
text: "关于服务器维护通知",
//文本内容链接地址，如果不希望文本是超链接，请不要写此属性
href: "http://www.baidu.com"
},
{
title: "联系地址：",
text: "北京市海淀区华强大厦Y座2-07B"
}
]
}
]
}
);
});
</script>
</body>
</html>
Related Skills
node-connect
352.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
111.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
352.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
352.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
