Embed Clawdbot AI assistant chat widget on your website. Learn how to configure and customize the webchat interface.

Clawdbot Webchat Overview

Webchat allows you to embed a chat interface on any website, enabling visitors to interact with your Clawdbot assistant directly from their browser.

Features

Feature	Description
Embeddable	Add to any website
Customizable	Match your brand
Responsive	Works on all devices
Persistent	Session continuity
Real-time	Live chat experience

Quick Start

Enable Webchat

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

Add to your website:

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

Configuration

Webchat Settings

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

Option	Default	Description
`position`	`bottom-right`	Widget position
`width`	`400px`	Chat window width
`height`	`600px`	Chat window height
`buttonSize`	`60px`	Launch button size

Customization

Themes

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

Custom CSS

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

Branding

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

JavaScript API

// Open chat
ClawdbotChat.open();

// Close chat
ClawdbotChat.close();

// Toggle chat
ClawdbotChat.toggle();

// Send message programmatically
ClawdbotChat.send("Hello!");

// Set user info
ClawdbotChat.setUser({
  id: "user123",
  name: "John",
  email: "[email protected]"
});

Events

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

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

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

Session Management

Session Persistence

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

Guest vs Authenticated

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

Security

CORS Configuration

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

Rate Limiting

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

Mobile Support

Responsive Design

Webchat automatically adapts to mobile screens:

Full-screen on mobile
Touch-friendly interface
Keyboard handling

Mobile Configuration

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

Analytics

Track Usage

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

Next Steps

Clawdbot Web Interface - Web overview
Clawdbot Control UI - Dashboard guide
Clawdbot Gateway - Gateway configuration

Clawdbot Webchat