在网站上添加 AI 聊天窗口是提升客户体验的最快方式之一。本指南涵盖从嵌入窗口到自定义外观和行为的所有内容。

什么是 AI 聊天窗口？

AI 聊天窗口是嵌入您网站的小型可嵌入聊天界面 — 通常作为右下角的浮动按钮。点击后打开由 AI 知识库驱动的对话窗口。

嵌入窗口

静态 HTML 网站

将嵌入脚本添加到 HTML 文件的 </body> 标签前。一行代码，窗口即上线。

WordPress

使用页眉/页脚插件全局插入嵌入代码，或添加到主题的 footer.php 文件。

React/Next.js 应用

将脚本标签添加到布局组件，或使用 useEffect 钩子动态加载窗口。

Shopify

进入 Online Store > Themes > Edit Code，将脚本添加到 theme.liquid 的 </body> 前。

自定义窗口

颜色和品牌 — 匹配网站配色方案和标志
欢迎语 — 设置友好的问候语，设定正确基调
位置 — 右下是标准，但可根据布局调整
触发行为 — 延迟自动打开，或等待用户点击
移动端优化 — 窗口自动适配移动屏幕

JavaScript 控制 API

嵌入窗口后，您可以通过全局 window.Kodda 对象从自己的网站以编程方式控制它。无需额外库。

基本控制

Kodda.open();    // 打开聊天面板
Kodda.close();   // 关闭聊天面板
Kodda.toggle();  // 切换开关
Kodda.isOpen();  // 返回 true/false

以编程方式发送消息

// 打开窗口并立即发送
Kodda.send("如何追踪我的订单？");

// 预填充输入框（窗口保持关闭）
Kodda.setText("如何追踪我的订单？");

// 发送当前输入框内容
Kodda.submit();

清空对话

Kodda.clear(); // 重置对话历史

监听事件

Kodda.on('ready', () => console.log('窗口已加载'));
Kodda.on('open', () => console.log('聊天已打开'));
Kodda.on('close', () => console.log('聊天已关闭'));

const off = Kodda.on('open', handler);
off(); // 移除监听

这些 API 在您希望从自定义按钮触发聊天、从应用预填上下文或构建更深入集成时特别有用。

查看完整 API 参考 →

性能考虑

Kodda 窗口轻量且异步加载 — 不会拖慢页面。使用懒加载，仅在用户交互时初始化。

最佳实践

将窗口放置在可见但不干扰的位置
上线前在多种设备和浏览器上测试
监控对话分析以发现改进机会
定期更新知识库保持答案最新

开始使用

准备好在网站上添加 AI 聊天窗口？免费注册 Kodda，配置机器人，几分钟内嵌入。

查看定价 | 使用场景