任意页面加载聊天框组件（也可用于其他）

第一步：引入div

<div id="service"></div>

第二步：引入css

<link rel="stylesheet" href="qq.css">

qq.css内容：

body {
	   background: #f2f2f2;
}
.g-animateBar {
    width: 40px;
    height: 120px;
    position: fixed;
    right: 122px;
    z-index: 9999;
    bottom: 220px;
    background: url(data:image/png;base64,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);
    background-repeat: no-repeat;
	right: 120px;
}
.g-resetBar {
    width: 40px;
    height: 126px;
    position: fixed;
    z-index: 9999;
    right: 0px;
    bottom: 220px;
    background: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    display: none;
}
.g-toolsFixed {
    width: 120px;
    position: fixed;
    z-index: 999;
    right: 0px;
    bottom: 220px;
    background: #FFF;
}

.g-toolsFixed p {
    background-color: #2D8CF0 !important;
    height: 32px;
    text-align: center;
    line-height: 32px;
	margin: 0 0 11px;
}

.g-toolsFixed .u-qq a{
    color: #FFF;
    font-size: 16px;
    text-decoration: none;
}
.g-toolsFixed .u-qq-list {
    padding: 0;
    padding-top: 6px;
}
.g-toolsFixed ul {
    list-style: none;
}
.g-toolsFixed .u-qq-list li{
    margin-bottom: 6px;
    text-align: center;
    line-height: 23px;
    height: 25px;
}
.qq_icon {
    float: left;
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 22px;
    background: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    margin: 0px 0px 0px 14px;
}
.g-toolsFixed .u-qq-list li a {
    display: inline-block;
    font-size: 12px;
    border: 1px solid #f93f54;
    border-radius: 2px;
    width: 75px;
    height: 22px;
    overflow: hidden;
	border-color: #2D8CF0 !important;
    color: #2D8CF0 !important;
}

第二步：引入js 文件

<script src="qq.js"></script>

qq.js内容：

    var service = document.getElementById("service")
    var qq = 787592699;
    var linkman = '阿三';
    var wx = null;

    window.onload = function () {
        console.log(1);
        if (service) {
            var outservice_info =
                '<div class="service-container">\n\
	                <div class="g-animateBar"></div>\n\
	                <div class="g-resetBar"></div>\n\
	                <div class="g-toolsFixed">\n\
	                    <!-- 咨询客服 QQ -->\n\
			                <div class="m-showBox u-qq">\n\
				                <p><a href="javascript:void(0)">咨询客服</a></p>\n\
				                <ul class="u-qq-list">\n\
					                <li><div class="qq_icon"></div><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=' + qq + '&amp;site=qq&amp;menu=yes">' + linkman + '</a></li>\n\
				                </ul>\n\
			                </div>';
            if (wx && wx != '') {
                outservice_info += '<div style="padding-top:5px;position: absolute;"><img src="' + wx + '" alt="客服二维码" width="120" height="120"></div>';
            }
            outservice_info += '</div>\n\</div>';
            service.innerHTML = outservice_info;
        }

        $(".g-animateBar").click(function () {
            var e = $(".g-toolsFixed").width();
            $(".g-toolsFixed").animate({right: -e});
            $(".g-animateBar").animate({right: -e}, function () {
                $(".g-resetBar").show();
            });
        })

        $(".g-resetBar").click(function () {
            var e = $(".g-toolsFixed").width();
            $(".g-resetBar").hide();
            $(".g-toolsFixed").animate({right: 0});
            $(".g-animateBar").animate({right: e});
        })
    }