Встройте виджет чата ИИ-ассистента Clawdbot на ваш сайт. Узнайте, как настроить и кастомизировать интерфейс веб-чата.

Обзор веб-чата 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