在您的網站上嵌入 Clawdbot AI 助手聊天小工具。了解如何配置和自訂網頁聊天介面。

Clawdbot 網頁聊天概覽

網頁聊天讓您可以在任何網站上嵌入聊天介面，讓訪客可以直接透過瀏覽器與您的 Clawdbot 助手互動。

功能

功能	描述
可嵌入	添加到任何網站
可自訂	匹配您的品牌
響應式	適用於所有設備
持久化	會話連續性
即時	即時聊天體驗

快速開始

啟用網頁聊天

{
  "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>

配置

網頁聊天設定

{
  "web": {
    "webchat": {
      "enabled": true,
      "title": "Chat with AI",
      "placeholder": "Type your message...",
      "welcomeMessage": "Hello! How can I help you today?"
    }
  }
}

小工具選項

選項	預設值	描述
`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": "Assistant"
  }
}

小工具 API

JavaScript API

// 開啟聊天
ClawdbotChat.open();

// 關閉聊天
ClawdbotChat.close();

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

// 程式化發送訊息
ClawdbotChat.send("Hello!");

// 設定用戶資訊
ClawdbotChat.setUser({
  id: "user123",
  name: "John",
  email: "[email protected]"
});

事件

ClawdbotChat.on('open', () => {
  console.log('Chat opened');
});

ClawdbotChat.on('close', () => {
  console.log('Chat closed');
});

ClawdbotChat.on('message', (msg) => {
  console.log('New message:', 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": {
    "mobile": {
      "fullScreen": true,
      "hideOnKeyboard": false
    }
  }
}

分析

追蹤使用情況

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

後續步驟

Clawdbot 網頁介面 - 網頁概覽
Clawdbot 控制介面 - 儀表板指南
Clawdbot 閘道器 - 閘道器配置

Clawdbot 網頁聊天

On this page