Saltearse al contenido
Atendium ISO

Chatbot Web

El Chatbot Web permite ofrecer el mismo agente de dos maneras:

  • Widget: se integra en tu sitio mediante un fragmento de código y aparece como un botón flotante.
  • Landing: abre el chat en una página pública de Atendium que podés compartir como enlace o código QR. No necesitás tener un sitio web.

Las dos opciones pertenecen al mismo canal Web, usan el mismo agente y comparten la configuración general del chat. No crean canales adicionales.

Elegir cómo publicar el chat

En Agente → Canales → Web, la sección Instalación y acceso tiene dos pestañas.

OpciónCuándo usarlaQué entrega
WidgetYa tenés una web y querés que el chat aparezca dentro de ella.Origins autorizados y código de instalación.
LandingQuerés compartir el chat directamente, imprimirlo o usarlo desde redes sociales.URL pública estable, botón para abrir y código QR descargable.

Configuración y personalización compartida

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.

Al guardar estos cambios se actualizan tanto el widget como el chat mostrado dentro de la landing.

Publicar como Widget

  1. Abrí la pestaña Widget.
  2. Indicá los dominios donde permitís que funcione el chat.
  3. Copiá el código de instalación.
  4. Pegalo antes del cierre de la etiqueta <body> de tu sitio.
  5. Guardá y probá el chat desde uno de los dominios autorizados.

Dominios autorizados

El widget valida el origin real de la página que lo contiene. Podés indicar uno o varios dominios separados por coma y usar subdominios comodín, por ejemplo *.empresa.com.

La URL pública de la landing no necesita agregarse a esta lista: Atendium reconoce la landing como una presentación oficial del mismo canal.

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.

Ejemplo 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: 'TOKEN_GENERADO_POR_ATENDIUM',
    agent: 'ID_DEL_AGENTE',
    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.

Publicar como Landing

  1. Abrí la pestaña Landing.
  2. Copiá la URL o presioná Abrir landing para probarla.
  3. Si querés compartirla visualmente, presioná Generar QR.
  4. Descargá el QR en PNG para imprimirlo o usarlo en piezas digitales.

La dirección tiene el formato:

https://chat.atendium.com/IDENTIFICADOR

El identificador se crea una sola vez y se conserva. Volver a abrir la pantalla o regenerar el QR no cambia la URL; el nuevo QR apunta al mismo enlace.

Identidad propia de la landing

La sección Identidad de la landing personaliza el banner superior de la página pública. Es independiente de la cabecera del widget y admite:

  • una imagen o logo opcional exclusivo para la landing;
  • un título de hasta 80 caracteres;
  • un texto descriptivo de hasta 180 caracteres.

Podés completar uno, dos o los tres elementos. Si dejás vacíos imagen, título y texto, el banner se oculta por completo y el chat aprovecha todo el espacio disponible. No se muestra ningún título o texto predeterminado en su lugar.

La landing mantiene abierta la ventana del chat y oculta el botón para cerrarla. La cabecera interna del chat sigue usando el logo, título, estado y colores generales configurados para el widget.

Generar y descargar el QR

  • El QR se genera desde la URL pública visible en la pestaña Landing.
  • Regenerar QR vuelve a crear la imagen, pero no modifica el enlace.
  • Descargar QR guarda un archivo PNG listo para compartir o imprimir.
  • Si modificás el branding, no necesitás reemplazar el QR: la URL continúa siendo la misma.

Qué configuración corresponde a cada presentación

ConfiguraciónWidgetLanding
Agente, rol y disponibilidadSíSí
Colores y cabecera interna del chatSíSí
Mensaje de bienvenida y multimediaSíSí
Botón flotante y apertura automáticaSíNo: el chat ya está abierto
Origins del sitioSíNo
Banner de identidad de la landingNoSí

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(...).
  • Para cartelería impresa, abrí la landing desde un navegador sin sesión iniciada antes de descargar el QR.
  • Usá textos breves en el banner de la landing; la conversación debe seguir siendo el foco principal.

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.
  • La landing utiliza un token temporal firmado, pero el enlace público estable no expone ese token en la URL.
  • En pantallas pequeñas la landing ocupa el alto disponible y se comporta como un chat móvil abierto.

Solución de problemas

La landing no abre

Confirmá que el canal esté activo y no esté pausado. Si el enlace fue copiado de forma incompleta, volvé a copiarlo desde la pestaña Landing.

El banner no aparece

El banner es opcional. Se oculta cuando imagen, título y texto están vacíos. Completá al menos uno de esos campos y guardá la configuración.

El QR abre una dirección anterior

Volvé a la pestaña Landing, verificá la URL visible y presioná Regenerar QR. No edites manualmente el contenido del QR.

El widget funciona en la landing pero no en mi sitio

Revisá los origins configurados en la pestaña Widget. El dominio real de tu sitio debe coincidir con uno de ellos; incluir la landing de Atendium no autoriza automáticamente otros dominios.