为了方便客户自己维护网站在线客服QQ或旺旺或者MSN等。

我给客户做的网站，都会用“54kefu”在线客服系统，关注这家网站已经有很多年了。
【http://www.54kefu.net/】

还能一直存在，一直在经营，感觉挺不错的，还算靠谱的。

于是，我给客户做的网站，采用的漂浮窗口，用的都是他们公司的。如下图这个效果：

很多客户的网站，我都用了这个在线客服系统。但是每次都要教一遍，所以我专门为这个写了个教程。

【步骤①】：首先打开这个网站：http://www.54kefu.net/，申请注册一个账号。并且进入这个网站的管理后台，获取JS代码。放到网站首页和网站内页的代码前面。

这一步工作，如果你公司有IT，你的IT就可以自己帮你全部搞定了。也就不用往下看了。

我帮你前面工作都做好之后，直接给你管理员账号密码，你自己以后如何管理自己的在线客服联系方式。

请继续往下看。

【步骤②】：你打开http://www.54kefu.net/

找到管理登录框：，然后把我给你的账号密码输入进去，点击登录

如下图：

登录成功以后，可能会有短暂几秒的停顿，如下提示：

正式进入管理后台↓直接点击页面最下面的按钮“”，如下图：

【步骤③】：进入代码管理界面，你会看见一行信息，你直接点击“”按钮，如下图：

然后进入管理界面，如下图：

你可以先把默认显示的这3个删除掉。

然后点击“”按钮，把你公司的联系方式（比如QQ、旺旺、MSN）等，添加上去。

如下图的箭头指示顺序

如上图所示，你的客服显示的排列顺序，也是可以编辑的。

QQ或者旺旺或者MSN，都是可以在上面选择，并且编辑的。

加完以后，点击按钮“”。就算成功添加一个了。

回到上面的管理界面，你继续添加下1个，就再次点击按钮“”。就这么简单。

【步骤④】：因为现在QQ客服的在线代码有所更新，可能通过这样的方式添加的QQ客服代码。

在网页上会显示不正常，比如可能会有这样的“”的不正常显示。

那么你在界面，选择类型时，就不要选择“QQ”。

而是选择任意代码，如下图：

那么问题来了。这个QQ官网获取的加密QQ客服代码，从哪里得到呢？

很简单！请参照这个教程：获取QQ在线客服代码：http://www.ems-help.com/ems-help/992/d.htm

从这里获取到的，就添加在上面的“任意代码”位置。

这样你的QQ，不管是隐身，还是在线，都正常显示了。

如下图这个样子：

隐身：

在线：

【步骤⑤】：如果你想在悬浮框上，显示纯文字，比如电话号码，或者公司公告什么的。

你就在上一步的“类型”选项里，选择“文字”，如下图：

并且还可以编辑文字效果，字体颜色，字体大小等等。