🌐

WebChat Integration

Connect OpenClaw to WebChat and embed AI assistance directly in your website.

TL;DR

  • ✓ Configure WebSocket Gateway in openclaw.json
  • ✓ Start OpenClaw with Gateway enabled
  • ✓ Embed the chat widget in your website
  • ✓ Time: ~5 minutes

Setup Steps

Step 1: Configure openclaw.json

{
  "channels": {
    "webchat": {
      "enabled": true,
      "gateway": {
        "port": 3000,
        "path": "/ws",
        "auth": {
          "enabled": true,
          "apiKeys": ["your-api-key-1", "your-api-key-2"]
        }
      }
    }
  }
}

Step 2: Start OpenClaw

openclaw start

The WebSocket Gateway will start on port 3000 by default.

Step 3: Embed Chat Widget

Add the OpenClaw chat widget to your website:

<script src="https://your-openclaw-server.com/widget.js"></script>
<script>
  OpenClaw.init({
    server: 'wss://your-openclaw-server.com/ws',
    apiKey: 'your-api-key',
    theme: {
      primaryColor: '#FF4500',
      position: 'bottom-right'
    }
  });
</script>

Features

Customizable

Fully customizable widget appearance.

API Keys

Secure authentication with API keys.

Real-time

WebSocket for instant responses.

Themes

Multiple theme options and dark mode.