Incorpore o widget de chat do assistente de IA Clawdbot em seu site. Aprenda como configurar e personalizar a interface de webchat.

Visão Geral do Webchat do Clawdbot

O Webchat permite incorporar uma interface de chat em qualquer site, permitindo que os visitantes interajam com seu assistente Clawdbot diretamente pelo navegador.

Recursos

Recurso	Descrição
Incorporável	Adicionar a qualquer site
Personalizável	Combinar com sua marca
Responsivo	Funciona em todos os dispositivos
Persistente	Continuidade de sessão
Tempo real	Experiência de chat ao vivo

Início Rápido

Habilitar Webchat

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

Adicionar ao seu site:

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

Configuração

Configurações do Webchat

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

Opção	Padrão	Descrição
`position`	`bottom-right`	Posição do widget
`width`	`400px`	Largura da janela de chat
`height`	`600px`	Altura da janela de chat
`buttonSize`	`60px`	Tamanho do botão de iniciar

Personalização

Temas

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

CSS Personalizado

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

Marca

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

API JavaScript

// Abrir chat
ClawdbotChat.open();

// Fechar chat
ClawdbotChat.close();

// Alternar chat
ClawdbotChat.toggle();

// Enviar mensagem programaticamente
ClawdbotChat.send("Hello!");

// Definir informações do usuário
ClawdbotChat.setUser({
  id: "user123",
  name: "John",
  email: "[email protected]"
});

Eventos

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

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

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

Gerenciamento de Sessões

Persistência de Sessão

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

Visitante vs Autenticado

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

Segurança

Configuração CORS

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

Limite de Taxa

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

Suporte Mobile

Design Responsivo

O Webchat se adapta automaticamente a telas móveis:

Tela cheia em dispositivos móveis
Interface amigável ao toque
Tratamento do teclado

Configuração Mobile

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

Analytics

Rastrear Uso

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

Próximos Passos

Interface Web do Clawdbot - Visão geral da web
Interface de Controle do Clawdbot - Guia do painel
Gateway do Clawdbot - Configuração do gateway

Webchat do Clawdbot