帝国CMS如何添加网站客服功能？比如本站右侧客服窗口

介样子的。

第一步：

依次点击：模板 > 公共模板变量 > 管理模板变量

第二步：增加一个模板变量，名字叫：kefu

其中有两个地方需要修改：

1、QQ号码（需要到https://shang.qq.com/v3/index.html  开通QQ推广功能）

2、微信二维码图片URL

HTML代码如下：

<div class="kf">
    <h2><span id="closed"></span>客服在线</h2>
    <ul>
        <li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=572540770&amp;site=qq&amp;menu=yes" target="_blank"
               class="qqservice_list_link">QQ客服</a></li>
    </ul>
    <ul class="kfdh">
        <p class="kftext">客服微信扫码</p>
        <p class="kfnum"><img src="http://codernavcom.gitee.io/imagestore/20190828231417.jpg"></p>
    </ul>
    <p class="kftext">服务时间</p>
    <p class="kftime">周一至周日 9:00-21:00</p>
</div>

第三步：

找到footer模板

在该模板内引入刚才新建的kefu模板

第四步：添加JS方法

/www/wwwroot/upload/skin/menhu/js/main.js

为什么加到这个JS文件中？因为该js文件被所有页面引用。首页、列表页、内容页都引入了main.js这个文件，所以在这个文件中添加代码。在其他的帝国CMS模板中，未必有该文件，只要找到符合条件的js文件放进去代码就行。

JS内容如下：

//客服JS
$("#closed").click(function(){
    $(".kf").addClass("closed");
 });

第五步：添加CSS样式

/www/wwwroot/upload/skin/menhu/css/base.css

CSS内容如下：

/*客服kf*/
.kf {
    position: fixed;
    right: 20px;
    top: 30%;
    color: #fff;
    z-index: 999;
    background: #212121;
    border: #1c2327 3px solid;
    width: 150px;
    border-radius: 3px;
    text-align: center;
}

.kf h2 {
    background: #212121;
    font-size: 15px;
    color: #FFF;
    font-weight: normal;
    line-height: 30px;
    padding-left: 5px;
}

.kf h2 span {
    display: block;
    background: url(http://codernavcom.gitee.io/imagestore/20200622160109.gif) no-repeat;
    width: 25px;
    height: 25px;
    float: right
}

.kf ul li {
    margin: 15px 0 0 0;
    font-size: 14px
}

.kf ul li span {
    margin: 0 5px
}

.kf ul li img {
    display: inline-block;
    vertical-align: middle
}

.kfdh {
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222222;
    margin: 10px 0
}

.kftext {
    font-size: 12px;
    padding-left: 5px;
    padding-top: 5px;
}

.kfnum img {
    margin: 10px auto 0;
    max-width: 140px;
}

p.kftime {
    font-size: 12px;
    text-align: center;
    padding: 5px 0 30px;
}

.closed {
    display: none
}

a.qqservice_list_link {
    width: 80%;
    display: block;
    text-align: center;
    margin: auto;
    padding: 5px 0;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(to right, #2e74e5 0%, #00c1de 100%);
}

@media only screen and (max-width: 480px) {
    .kf {
        display: none
    }
}

注意上面css中引入了一个gif格式的图片，可以把这个图片下载下来放到你自己的服务器上，我这里是直接放到七牛云OSS上了。

第六步：刷新后台及浏览器缓存。