三分钟接入教程
不管你的网站是 PHP、HTML 静态页、WordPress 还是其他程序,都能接入。
下面三种方式任选其一,效果完全一样,按你的情况挑最省事的。
① 下载模板文件
手动填参数
- 下载通用模板文件
- 需打开文件手动填 Key
- 再上传到你的服务器
- 适合想自己掌控文件内容
② 生成代码
不用下载文件
- 复制一行代码
- 粘贴到前台模板即可
- 组件由我们服务器提供
- 你不用维护任何文件
推荐
③ 下载已配置文件
参数已预填
- 后台填好站点信息
- 下载的文件已写好参数
- 不用打开文件修改
- 上传后加一行代码即可
方式③:下载已配置文件(推荐 · 参数已预填)
在客服中心把站点信息填好后,下载的文件里已经自动写好了你的 Key 和站点名称, 你不需要打开文件做任何修改,直接上传即可。
- 登录 客服中心 → 左侧菜单「对接设置」
- 填写站点名称、绑定域名、通知邮箱,点「保存设置」
- 在「方式③」区域点 ⬇ 下载已配置文件,得到
kefu-embed.js - 用 FTP 把它上传到你网站的根目录(比如
public_html/) - 在你网站前台模板的
</body>结束标签之前,加入这一行:
<script src="/kefu-embed.js"></script>
- 刷新你的网站,右下角出现客服悬浮按钮,即表示成功 🎉
方式②:生成代码(不用下载任何文件)
这是最省事的方式:复制下面那一行代码,粘贴到你网站前台模板的 </body> 前就行,
组件文件由我们的服务器提供,你不用上传和维护任何文件。
- 登录客服中心 → 「对接设置」复制你的接入 Key
- 把下面代码里的
YOUR_KEY换成你的 Key(或用下方生成器自动生成) - 粘贴到你网站前台模板的
</body>前
<script src="https://kefu.fele.eu.cc/widget.js?k=YOUR_KEY" async></script>
方式①:下载模板文件(需手动填参数)
下载的是通用模板,文件里 Key 是占位符 YOUR_KEY_HERE,
需要你用记事本/编辑器打开,手动把 Key 填进去再上传。
- 点下面按钮下载
kefu-embed-template.js - 打开文件,找到
var KF_KEY = "YOUR_KEY_HERE"; - 把
YOUR_KEY_HERE改成你自己的 Key;同理可改KF_SITE为你的站点名 - 保存 → 上传到你网站 → 前台加一行
<script src="/kefu-embed-template.js"></script>
智能代码生成器
填入你的 Key,自动生成两种方式的代码,可直接复制。
方式② 的代码(复制到前台模板):
方式③ 的代码(上传文件后复制到前台模板):
详细教程文档
上面的三种方式解决「怎么接上去」,下面这些文档解决「具体到我这种网站该怎么操作」, 以及接入后的邮件通知、机器人、多客服等进阶配置。
入门
建站程序
WordPress 网站接入教程
不用装插件,在主题设置里粘贴一行代码即可
纯 HTML 静态网站接入没有后台程序也能接,每个页面加一行或统一模板加
PHP 网站接入(原生 / ThinkPHP / Laravel)放在公共布局文件里,全站一次生效
进阶
排错
常见问题排查
| 现象 | 原因与解决办法 |
|---|---|
| 右下角没有出现按钮 | ① 确认代码加在 </body> 之前;② 按 F12 看控制台是否报错;③ 清除浏览器缓存和 CDN 缓存后重试;④ 确认文件路径正确(访问 你的域名/kefu-embed.js 能打开才对)。 |
| 按钮被其他元素挡住 | 组件使用了很高的 z-index(2147483000)。若仍被挡,检查你的网站是否有元素设置了更高的 z-index 或 position:fixed 覆盖层。 |
| HTTPS 站点按钮不显示 | HTTPS 页面不能加载 HTTP 资源。请确保客服系统地址是 HTTPS(方式②需把代码里的 http:// 改成 https://),或改用方式③(文件在你自己服务器上,同协议)。 |
| 点击按钮打不开/空白 | 检查 Key 是否正确且未失效;方式③请确认 iframe 地址能正常访问(把 /chat/window.php?k=你的KEY 粘到浏览器直接打开测试)。 |
| 访客发消息我收不到邮件 | ① 确认「对接设置」里通知邮箱填写正确且已保存;② 平台需配置发件邮箱(管理后台 → 系统设置),或在客服中心 → 邮箱设置里配置你自己的 SMTP;③ 检查垃圾邮件箱。 |
| 一个网站能用,另一个不行 | 每个网站需要各自注册一个账号获取独立 Key,多站点不能共用同一个 Key(否则会话会混在一起)。 |