如何自定义在线状态样式？-腾讯企业产品

如何自定义在线状态样式？

在线状态生成见：//b.qq.com/wp/
共有四个风格，下面是修改风格样式的具体方法：

风格一和风格四：

js内嵌代码如下，以750000174为例：

简单修改：只需将img元素的粉红色的src的值改为用户自定义的图片url即可。
扩展修改：用户自定义wpa样式，只需在需要点击的方加入上述蓝色的onclick事件js代码即可。

风格二：

引用js界面相关代码如下：

var urlroot = "//im.bizapp.qq.com:8000/";

function kf_getPopupRightDivHtml(kfguin,reference, wpadomain)
{
var temp = "";

temp += '<div class="wpa_popup" style="width:90px; height:150px;">';
temp += '<div style="width:8px; height:150px; float:left; background:url('+urlroot+'bg_1.gif);"></div>';
temp += '<div style="float:left; width:74px; height:150px; background:url('+urlroot+'middle.jpg); background-position: center;">';
temp += '<div ><h1 style="line-height:17px; font-size:14px; color:#FFF; margin:0px; padding:10px 0 13px 8px;"> </h1></div>';
temp += '<div style="height:83px; padding:0 0 0 2px; clear:both;"><div style="width:70px; height:70px; float:left; background:url('+urlroot+'face.jpg);"></div></div>';
temp += '<div style="clear:both;"><a href="#" onclick="kf_openChatWindow(0,\''+wpadomain+'\',\''+kfguin+'\')" style="width:69px; height:21px; background:url('+urlroot+'btn_2.gif); margin:0 0 0 2px; display:block;"></a></div></div>';
temp += '<div style="width:8px; height:150px; float:left; background:url('+urlroot+'bg_1.gif) right;"></div></div>';

return temp;
}

简单修改：

下载//im.bizapp.qq.com:8000/kf.js到用户服务器js目录。
将urlroot的地址改为用户存放图片的服务器地址。
将上述粉红色的图片元素的src的值改为用户自定义的图片url即可(图片尺寸尽量与原图一致)。

bg_1.gif：背景圆角效果图片
middle.jpg：背景图片，图片包括在线客服文字
face.jpg：客服头像图片
btn_1.gif：下次再说按钮图片
btn_2.gif：QQ交谈按钮图片

扩展修改：

下载//im.bizapp.qq.com:8000/kf.js到用户服务器js目录。
将urlroot的地址改为用户存放图片的服务器地址。
自定义kf_getPopupRightDivHtml方法生成wpa样式，保证加入上述蓝色的onclick事件js代码即可。

风格三：

引用js界面相关代码如下：

var urlroot = "//im.bizapp.qq.com:8000/";

function kf_getPopupDivHtml(kfguin,reference,companyname,welcomeword, wpadomain)
{
var temp = '';
temp += '<div style="float: left;height: 150px;width: 8px;background-image: url('+urlroot+'bg_1.gif);"></div>';
temp += '<div style="font-family: Tahoma;text-align:left;float: left;height: 150px;width: 324px;background-image: url('+urlroot+'bg_2.gif);background-repeat: repeat-x;">';
temp += '<div><h1 style=" float:left;font-size: 14px;color: #FFFFFF;margin: 0px;padding: 10px 0 13px 2px;line-height:17px;">'+companyname+'</h1><a href="#" onclick="kf_hidekfpopup();return false;" style="background-image: url('+urlroot+'close.gif);float: right;height: 19px;width: 42px;" onmouseover="javascript:this.style.backgroundPosition=\'bottom\'" onmouseleave="javascript:this.style.backgroundPosition=\'top\'"></a></div>';
temp += '<div style="height:83px;padding: 0 0 0 2px;clear:both;">';
temp += '<div style="background-image: url('+urlroot+'face.jpg);height: 70px;width: 70px;float:left;"></div>';
temp += '<p style="font-family:Tahoma;font-size:12px;line-height:24px;width: 240px;margin:0px;padding: 0 0 0 12px;display:block;float:left;margin-top:2px;word-wrap:break-word;">'+welcomeword+'</p></div>';
temp += '<div style="clear: both;">';
temp += '<a onclick="kf_hidekfpopup();return false;" href="#" style="float:right;background-image: url('+urlroot+'btn_1.gif);margin: 0 0 0 5px;padding: 0px;border:0px;height: 21px;width: 69px;"></a>';
temp += '<a onclick="kf_openChatWindow(1,\''+wpadomain+'\',\''+kfguin+'\')" href="#" style="float:right;background-image: url('+urlroot+'btn_2.gif);margin: 0px;padding: 0px;border:0px;height: 21px;width: 69px;"></a></div>';
temp += '</div><div style="float: left;height: 150px;width: 8px;background-image: url('+urlroot+'bg_1.gif);background-position: right;"></div>';

return temp;
}

简单修改：

下载//im.bizapp.qq.com:8000/kf.js到用户服务器js目录。
将urlroot的地址改为用户存放图片的服务器地址。
将上述粉红色的图片元素的src的值改为用户自定义的图片url即可(图片尺寸尽量与原图一致)。

bg_1.gif：背景圆角效果图片
bg_2.gif：中间弹出窗口背景图片
middle.jpg：背景图片，图片包括在线客服文字
face.jpg：客服头像图片
btn_1.gif：下次再说按钮图片
btn_2.gif：QQ交谈按钮图片
close.gif：中间弹出窗口右上角关闭按钮图片

扩展修改：

下载//im.bizapp.qq.com:8000/kf.js到用户服务器js目录。
将urlroot的地址改为用户存放图片的服务器地址。
自定义kf_getPopupDivHtml方法生成wpa样式，保证加入上述蓝色的onclick事件js代码即可。

腾讯企业QQ