Skip to main content
https://mintcdn.com/supervisorai/iWoOIU8ID8gU7JwA/images/icons/chat-widget.svg?fit=max&auto=format&n=iWoOIU8ID8gU7JwA&q=85&s=b1967d58adbd9bf08d41c7caf3a5c328
Este widget permite agregar un chat en tu web con mínimo esfuerzo. La autenticación del backend se mantiene segura en Agents Studio; no expongas tu API Key en el navegador.

​
Instalación rápida

  1. Entra a Agents Studio → Settings → Deploy → Chat Widget.
  2. Copia el snippet de instalación.
  3. Pégalo antes del cierre de </body> en tu sitio.
Ejemplo de snippet (placeholders): 
<script
  src="https://agents.studio.getsupervisor.ai/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-theme="auto"
  data-position="bottom-right"
  async
></script>
Parámetros comunes (data-attributes):
  • data-widget-id: identificador público del widget asociado a tu chatbot.
  • data-theme: “light” | “dark” | “auto”.
  • data-position: “bottom-right” | “bottom-left”.
  • data-primary-color: color principal (hex), opcional.
  • data-launcher-text: texto del botón flotante, opcional.
  • data-welcome-message: mensaje inicial opcional.

​
API del widget (opcional)

Cuando el script carga, expone un objeto global window.SupervisorChat: 
// abrir/cerrar
window.SupervisorChat.open();
window.SupervisorChat.close();
window.SupervisorChat.toggle();

// enviar mensaje programáticamente
window.SupervisorChat.sendMessage("Hola");

// escuchar eventos
window.SupervisorChat.on("ready", () => {
  /* listo */
});
window.SupervisorChat.on("open", () => {
  /* se abrió */
});
window.SupervisorChat.on("close", () => {
  /* se cerró */
});
window.SupervisorChat.on("message", (msg) => {
  /* mensaje entrante/saliente */
});
window.SupervisorChat.on("error", (err) => {
  /* manejar errores */
});

​
Sesiones y contexto

  • El widget administra una sessionId por navegador de forma automática.
  • Puedes pasar metadatos del usuario (si corresponde) de dos formas:
    • Atributos: data-user-id, data-user-name.
    • Vía API: window.SupervisorChat.setUser().
  • Para resetear la conversación: window.SupervisorChat.reset().

​
Estilos y branding

  • Soporta variables CSS para adaptar colores y tipografías.
:root {
  --supervisor-primary: #16a34a;
  --supervisor-text: #0f172a;
}
  • También puedes ajustar theme y primary color por data-attributes.

​
Seguridad

  • No coloques tu API Key en código cliente. El widget se comunica con Agents Studio de forma segura.
  • Si necesitas llamar tus propios endpoints, hazlo desde tu backend usando X-API-Key (ver API reference → Keys).
  • Recomendado: configurar allowlist de dominios del widget en Settings.

​
Resolución de problemas

  • El widget no carga:
    • Verifica el data-widget-id y que el dominio esté permitido.
    • Revisa la Content Security Policy de tu sitio.
  • Botón no visible: conflictos de CSS. Ajusta z-index del launcher.
  • Bloqueadores: algunos ad blockers pueden interferir; prueba en modo incógnito.

​
Siguientes pasos

  • Conecta Tools y rutas de diálogo en tu chatbot.
  • Para voz/telefonía o webhooks: revisa API reference → Endpoints.