在您的网站上嵌入 Clawdbot AI 助手聊天小部件。了解如何配置和自定义 webchat 界面。

Clawdbot Webchat 概述

Webchat 允许您在任何网站上嵌入聊天界面，使访问者能够直接从浏览器与您的 Clawdbot 助手交互。

功能

功能	描述
可嵌入	添加到任何网站
可自定义	匹配您的品牌
响应式	适用于所有设备
持久化	会话连续性
实时	实时聊天体验

快速开始

启用 Webchat

{
  "web": {
    "webchat": {
      "enabled": true,
      "path": "/chat"
    }
  }
}

嵌入小部件

添加到您的网站：

<script src="https://your-gateway.com/webchat.js"></script>
<script>
  ClawdbotChat.init({
    gateway: 'wss://your-gateway.com',
    theme: 'light'
  });
</script>

配置

Webchat 设置

{
  "web": {
    "webchat": {
      "enabled": true,
      "title": "与 AI 聊天",
      "placeholder": "输入您的消息...",
      "welcomeMessage": "您好！今天我能帮您什么？"
    }
  }
}

小部件选项

选项	默认值	描述
`position`	`bottom-right`	小部件位置
`width`	`400px`	聊天窗口宽度
`height`	`600px`	聊天窗口高度
`buttonSize`	`60px`	启动按钮大小

自定义

主题

{
  "webchat": {
    "theme": {
      "primary": "#007bff",
      "background": "#ffffff",
      "text": "#333333",
      "userBubble": "#007bff",
      "botBubble": "#f0f0f0"
    }
  }
}

自定义 CSS

{
  "webchat": {
    "customCSS": "/path/to/custom.css"
  }
}

品牌

{
  "webchat": {
    "logo": "/path/to/logo.png",
    "botAvatar": "/path/to/avatar.png",
    "botName": "助手"
  }
}

小部件 API

JavaScript API

// 打开聊天
ClawdbotChat.open();

// 关闭聊天
ClawdbotChat.close();

// 切换聊天
ClawdbotChat.toggle();

// 程序化发送消息
ClawdbotChat.send("你好！");

// 设置用户信息
ClawdbotChat.setUser({
  id: "user123",
  name: "张三",
  email: "[email protected]"
});

事件

ClawdbotChat.on('open', () => {
  console.log('聊天已打开');
});

ClawdbotChat.on('close', () => {
  console.log('聊天已关闭');
});

ClawdbotChat.on('message', (msg) => {
  console.log('新消息:', msg);
});

会话管理

会话持久化

{
  "webchat": {
    "session": {
      "persist": true,
      "storage": "localStorage",
      "expiry": 86400000
    }
  }
}

访客 vs 认证用户

{
  "webchat": {
    "auth": {
      "required": false,
      "methods": ["guest", "oauth"]
    }
  }
}

安全性

CORS 配置

{
  "webchat": {
    "cors": {
      "origins": ["https://yourdomain.com"]
    }
  }
}

速率限制

{
  "webchat": {
    "rateLimit": {
      "messages": 10,
      "window": 60000
    }
  }
}

移动端支持

响应式设计

Webchat 自动适应移动屏幕：

移动端全屏
触控友好界面
键盘处理

移动端配置

{
  "webchat": {
    "mobile": {
      "fullScreen": true,
      "hideOnKeyboard": false
    }
  }
}

分析

追踪使用

{
  "webchat": {
    "analytics": {
      "enabled": true,
      "events": ["open", "close", "message"]
    }
  }
}

下一步

Clawdbot Web 界面 - Web 概述
Clawdbot 控制 UI - 仪表板指南
Clawdbot 网关 - 网关配置

Clawdbot Webchat

On this page