直接在模板文件中添加（最常用、最灵活）
这是最推荐的方法,因为它可以让你精确地控制客服代码出现的位置（只在首页显示、只在内容页显示、或全局显示）。
（图片来源网络，侵删）
适用场景：
- 需要在特定页面（如首页、列表页、内容页）显示客服。
- 需要修改客服代码的样式或位置。
操作步骤：
-
获取客服代码： 从您的客服提供商（如阿里云、腾讯云、网易七鱼、53KF等）获取完整的在线客服代码，代码通常是一段 JavaScript，类似这样：
<script src='https://qiyukf.com/script/xxxxxxxxx.js'></script>
或者是一个包含样式和脚本的完整片段。
-
登录织梦后台： 使用您的管理员账号登录织梦CMS后台。
-
找到并修改模板文件： 根据您想显示客服的页面，找到对应的模板文件，织梦模板文件位于
/templets/目录下。- 网站首页：修改
/templets/default/index.htm - 列表页：修改
/templets/default/list_article.htm - 内容页（文章页）：修改
/templets/default/article_article.htm - 其他页面：根据实际情况找到对应的模板文件。
- 网站首页：修改
-
添加客服代码： 在模板文件中，将客服代码放置到您希望它出现的位置。
- 推荐位置：通常放在页面的
</body>标签之前，这样可以确保页面内容先加载，再加载客服脚本，提高页面加载速度。 - 其他位置：如果您希望客服浮动在页面上，可以放在
<body>标签之后，或者某个容器的末尾。
示例（在首页添加）： 打开
/templets/default/index.htm文件，在文件末尾找到</body>标签，在它前面粘贴您的客服代码。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{dede:global.cfg_webname/}</title> <!-- ... 其他 head 标签内容 ... --> </head> <body> <!-- ... 网站首页内容 ... --> <!-- ===== 在这里添加客服代码 ===== --> <script> (function(){ var widget_id = 'xxxxxxxxx'; _wh = document.createElement('script'); _wh.src = '//widget.7kf.com/widget/xxxxxxxxx.js'; _wh.type = 'text/javascript'; _wh.async = 'async'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(_wh, s); })(); </script> <!-- ============================= --> </body> </html> - 推荐位置：通常放在页面的
-
更新并生成：
- 保存修改后的模板文件。
- 为了让修改立即生效,建议到织梦后台的 “生成” -> “一键更新网站”，选择“更新所有”或“更新首页/栏目/内容”。
- 或者直接清空浏览器缓存,刷新您的网站查看效果。
通过全局标签 {dede:global} 添加（适合全站通用代码）
如果您想在网站的每一个页面都显示同一个客服代码，并且这个代码不常变动，可以使用这个方法。
适用场景：
- 客服代码需要全站显示。
- 固定,不需要频繁修改。
操作步骤：
- 登录织梦后台。
- 进入 “系统” -> “系统基本参数” -> “核心设置”。
- 找到 “网站版权信息” 这个选项（如果没有，可以在下方自定义一个全局变量）。
- 将您的客服代码完整地粘贴到“网站版权信息”的文本框中。
- 点击“保存”。
- 在模板中调用：
您需要在网站的模板文件中调用这个全局变量，这个信息被放在页脚（footer）模板中。
- 找到页脚模板文件,通常是
/templets/default/footer.htm。 - 在您希望显示客服代码的位置,添加以下标签：
{dede:global.cfg_powerby/} - 由于默认的
cfg_powerby是版权信息，如果您想用其他变量，可以：- 方法A：直接在
footer.htm里写死客服代码（不推荐，与方法一没区别）。 - 方法B：在“系统基本参数”里新建一个变量，例如命名为
cfg_kefu，然后在模板中调用{dede:global.cfg_kefu/}。
- 方法A：直接在
- 找到页脚模板文件,通常是
通过自定义函数或文件引入（适合高级用户）
如果客服代码比较复杂,或者您希望将所有外部脚本统一管理，可以使用这种方法。
适用场景：
- 客服代码逻辑复杂,包含多个JS和CSS文件。
- 希望将客服相关的代码与模板分离,方便管理和维护。
操作步骤：
-
创建一个独立的文件： 在您的网站根目录或
include目录下创建一个新的文件，kefu_code.htm。 -
粘贴代码： 将您的客服代码（包括
<script>和<style>标签）全部粘贴到kefu_code.htm文件中。 -
在模板中引入： 打开您需要显示客服的模板文件（如
index.htm），在相应位置使用PHP的include或织梦的dede:include标签来引入这个文件。使用PHP include（推荐）：
<?php include_once(DEDEROOT.'/kefu_code.htm'); ?>
使用织梦标签：
{dede:include file='kefu_code.htm'/}将这段代码放在模板文件的
</body>标签之前。
注意事项和最佳实践
- 代码位置：务必将
<script>代码放在</body>标签之前，这是现代网页优化的最佳实践，可以防止脚本加载阻塞页面内容的渲染，提升用户体验。 - 移动端适配：很多在线客服系统本身就有移动端适配功能，如果您使用的是浮动按钮，要确保它在手机上也能正常显示和点击，不会遮挡页面内容，有些客服系统会提供不同的代码用于PC和移动端，您可以根据设备判断来加载不同的代码。
- 测试：添加代码后，一定要在不同页面（首页、文章页、列表页）和不同设备（电脑、手机）上进行充分测试，确保客服功能正常。
- 性能影响：客服脚本通常需要从第三方服务器加载，可能会对网站的加载速度产生轻微影响，选择速度快、稳定的服务商很重要。
- 不要修改核心文件：不要直接修改
/dede/或/include/目录下的核心PHP文件来添加客服代码，这会给系统升级带来麻烦，始终通过修改模板文件来实现。
| 方法 | 优点 | 缺点 | 推荐度 |
|---|---|---|---|
| 修改模板文件 | 灵活、精确、最常用，可控制每个页面的显示 | 需要修改多个模板文件才能全站显示 | ⭐⭐⭐⭐⭐ |
| 全局变量 | 一次设置，全站生效，代码与模板分离 | 不灵活，难以针对特定页面定制 | ⭐⭐⭐ |
| 独立文件引入 | 代码管理清晰，适合复杂脚本 | 步骤稍多，需要一定的PHP基础 | ⭐⭐⭐⭐ |
对于绝大多数用户来说,方法一 是最简单、最直接、最有效的选择，希望这个详细的教程能帮助您成功添加在线客服！
