Saltearse al contenido
Atendium ISO

Chatbot Web

El Chatbot Web es una solución “plug & play” que permite integrar tu asistente inteligente directamente en cualquier sitio web oficial con solo pegar un fragmento de código.

Configuración y Personalización

Desde el panel de Atendium, puedes adaptar el Chatbot Web a la identidad de tu marca y a las necesidades de tu negocio:

  • Personalidad por Canal: Elige el agente (character) específico que atenderá este canal y asígnale un nombre personalizado. Esto te permite tener diferentes “expertos” según el punto de contacto.
  • Pausa con un Clic: Puedes interrumpir temporalmente las respuestas del agente en tu sitio web con un solo clic desde el panel, y reactivarlo instantáneamente cuando lo desees.
  • Mensaje de Bienvenida: Configura una frase de apertura para que el bot inicie la conversación automáticamente, o mantén el chat en modo espera hasta que el usuario escriba primero.
  • Identidad Visual: Personaliza colores, imágenes del header y del botón flotante, ancho del FAB, texto del encabezado y si el botón debe mostrarse con borde interno o sin borde.
  • Apertura Automática: Puedes hacer que el chat se abra solo después de X segundos en la primera visita del usuario. Esta apertura se guarda por navegador y solo se ejecuta una vez.
  • Seguridad por Origins: Puedes definir uno o varios dominios/origins autorizados para que el chatbot funcione. También se permiten wildcards como *.tu-dominio.com.
  • Moderación: Si una IP infringe reiteradamente las políticas del agente, puede quedar bloqueada y luego desbloquearse desde el panel.

Qué incluye el snippet

El código de integración que entrega Atendium ya incluye:

  • un token firmado para ese canal,
  • el agent asociado al widget,
  • la URL del WebSocket,
  • y soporte para enviar contexto adicional mediante context.

No hace falta construir el snippet manualmente. Lo normal es copiarlo desde el panel del canal web.

Instrucciones de Instalación

Para activar el chatbot, simplemente copia el siguiente bloque de código y pégalo dentro de la etiqueta <body> de tu sitio web:

<div id="atendoo-widget"></div>
<script type="text/javascript" src="https://atendoo.s3.us-east-1.amazonaws.com/widget/atendoo-widget.iife.js"></script>
<script>
  const atendooContext = {
    // Esta información es opcional y depende del contexto de tu negocio
    // userId: 'USER-ID',
    // email: 'customer@your-domain.com',
    // plan: 'premium'
  };


  window.AtendooWidget.init({
    serverUrl: 'wss://ws.atendium.com/chat',
    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI0ZDJkN2JhYS04NmYzLTQzZjEtOTZmNy1kMzEzYzFlYzY2NDQiLCJjaGFubmVsSWQiOiIyZjdmODNjNy1jNWYyLTRjM2QtOTVhYi1kNzIxYmUwMDFhM2EiLCJhZ2VudElkIjoiYWNkMTg5YzgtYWUyMy00MmM3LWFjNDQtNDc5NjA2OWI5ODZmIiwiaWF0IjoxNzY4MzM3MDEyLCJleHAiOjE3OTk4NzMwMTJ9.B-YLcxVtdhYxa3DY-9OTsgAkUHPpit0f-kBbA65nzu4',
    agent: 'acd189c8-ae23-42c7-ac44-4796069b986f',
    context: atendooContext,
  });


  // Puedes actualizar el contexto en cualquier momento si obtienes más datos del usuario
  // window.AtendooWidget.updateContext({ cartTotal: 99, locale: navigator.language });
</script>

Integraciones Complejas con atendooContext

La variable atendooContext es una herramienta potente para integraciones personalizadas. Puedes utilizarla para pasar variables dinámicas (como el ID de un usuario logueado, su plan actual o productos en su carrito) directamente al agente.

Esto permite que el bot tenga un conocimiento profundo del contexto del usuario, ofreciendo respuestas mucho más precisas y personalizadas.

Buenas prácticas de configuración

  • Usa origins específicos siempre que sea posible. Si necesitas varios sitios, sepáralos por coma.
  • Si trabajas con subdominios, utiliza wildcards como *.empresa.com.
  • Mantén el mensaje de bienvenida corto y accionable.
  • Si activas la apertura automática, úsala con moderación para no resultar invasivo.
  • Si tu web ya conoce datos del usuario, envíalos por context y actualízalos cuando cambien con window.AtendooWidget.updateContext(...).

Comportamiento técnico relevante

  • El widget valida el origin real del sitio contra los domains/origins configurados en el canal.
  • El contexto enviado por context viaja al agente como metadata y puede actualizarse durante la sesión.
  • La apertura automática se aplica por navegador, no por sesión.
  • La personalización visual se toma desde la configuración del canal, por lo que al guardar cambios no necesitas editar el snippet.