Integre el widget de chat del asistente de IA Clawdbot en su sitio web. Aprenda a configurar y personalizar la interfaz de chat web.

Descripción General del Chat Web de Clawdbot

El Chat Web le permite integrar una interfaz de chat en cualquier sitio web, permitiendo a los visitantes interactuar con su asistente Clawdbot directamente desde su navegador.

Características

Característica	Descripción
Integrable	Añadir a cualquier sitio web
Personalizable	Adaptar a su marca
Responsivo	Funciona en todos los dispositivos
Persistente	Continuidad de sesión
Tiempo real	Experiencia de chat en vivo

Inicio Rápido

Habilitar Chat Web

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

Añadir a su sitio web:

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

Configuración

Ajustes del Chat Web

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

Opción	Predeterminado	Descripción
`position`	`bottom-right`	Posición del widget
`width`	`400px`	Ancho de la ventana de chat
`height`	`600px`	Alto de la ventana de chat
`buttonSize`	`60px`	Tamaño del botón de inicio

Personalización

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();

// Cerrar chat
ClawdbotChat.close();

// Alternar chat
ClawdbotChat.toggle();

// Enviar mensaje programáticamente
ClawdbotChat.send("Hello!");

// Establecer información del usuario
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);
});

Gestión de Sesiones

Persistencia de Sesión

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

Invitado vs Autenticado

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

Seguridad

Configuración CORS

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

Límite de Velocidad

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

Soporte Móvil

Diseño Responsivo

El Chat Web se adapta automáticamente a pantallas móviles:

Pantalla completa en móvil
Interfaz táctil
Manejo del teclado

Configuración Móvil

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

Analíticas

Seguimiento de Uso

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

Próximos Pasos

Interfaz Web de Clawdbot - Vista general web
Interfaz de Control de Clawdbot - Guía del panel
Gateway de Clawdbot - Configuración del gateway

Chat Web de Clawdbot