Flowsdone Webchat — integración

Integración

Cómo agregarlo a tu página

Cada cliente tiene su canal Chat web en la consola (sección Canales), con su clave pública (wc_…) y el fragmento listo para copiar. Tres pasos: cargar el CSS y el JS del widget, definir la configuración antes de que el script corra, y listo — se auto-inicializa solo.

Cargá el CSS y el script del widget

Van en cualquier parte de tu <head> o antes de cerrar </body>. Se sirven desde nuestro dominio, no hace falta alojarlos vos.

<link rel="stylesheet" href="https://chat.flowsdone.com/agent-chat-widget.css" />
<script src="https://chat.flowsdone.com/agent-chat-widget.js"></script>

Definí `window.AgentChatConfig` antes del script

El widget busca esta variable global apenas carga y se auto-inicializa. El único campo obligatorio es channelKey, la clave del canal Chat web del cliente. Si el canal tiene dominios permitidos, el chat solo funciona en esas webs.

<script>
  window.AgentChatConfig = {
    wsUrl: "wss://chat.flowsdone.com/ws",
    channelKey: "wc_TU_CLAVE",      // obligatorio: la clave del canal Chat web
    title: "Mi Asistente",
    initialMessage: "¡Hola! ¿En qué te puedo ayudar?",
    launcherColor: "#4F46E5",
    sendButtonColor: "#10B981"
  };
</script>
<link rel="stylesheet" href="https://chat.flowsdone.com/agent-chat-widget.css" />
<script src="https://chat.flowsdone.com/agent-chat-widget.js"></script>

(Opcional) Inicializá manualmente

Si preferís no usar window.AgentChatConfig — por ejemplo, para crear el widget después de una acción del usuario — llamá a init() a mano con el script cargado con defer.

<script defer src="https://chat.flowsdone.com/agent-chat-widget.js"></script>
<script>
  window.addEventListener("load", function () {
    window.AgentChat.init({ wsUrl: "wss://chat.flowsdone.com/ws", channelKey: "wc_TU_CLAVE" });
  });
</script>

Referencia

Variables de configuración disponibles

Todo lo que acepta AgentChatConfig / AgentChat.init(options), agrupado por para qué sirve. Ninguna es obligatoria salvo channelKey.

Conexión

Variable	Default	Qué hace
`channelKey`	—	Obligatorio. Clave pública del canal Chat web del cliente (`wc_…`), en la consola → Canales. Decide qué agente responde; las conversaciones cuentan como las de cualquier canal.
`wsUrl`	auto	Endpoint del WebSocket. Por defecto se arma a partir del dominio de la página (`wss://tu-dominio/ws`), así que en la web del cliente hay que indicarlo: `wss://chat.flowsdone.com/ws` (el fragmento de la consola ya lo incluye).
`sessionId`	auto	Id de sesión del visitante. Se genera y persiste en `localStorage` si no lo pasás.
`conversationId`	auto	Id de conversación, también persistido en `localStorage`. Pasalo vos si necesitás controlar cuándo empieza una conversación nueva.

Textos y contenido

Variable	Default	Qué hace
`title`	`AI Assistant`	Título en el header del chat.
`initialMessage`	"Hi! How can I help you today?"	Primer mensaje que muestra el bot al abrir.
`inputPlaceholder`	"Type your message..."	Placeholder del campo de texto.
`sendLabel`	`Send`	Texto accesible (aria-label) del botón de enviar.
`openLabel` / `closeLabel`	`Open chat` / `Close chat`	Textos accesibles del botón flotante y del botón de cerrar.
`messages`	objeto con defaults en inglés	Sobrescribí `socketConnecting`, `socketConnected`, `socketDisconnected`, `genericError` y/o `queuedError` para traducir los mensajes de estado.

Tamaño y posición

Variable	Default	Qué hace
`width`	`420px`	Ancho de la ventana del chat abierta.
`height`	`680px`	Alto de la ventana del chat abierta.
`maxHeight`	`80vh`	Tope de alto relativo al viewport, para pantallas chicas.
`position`	`bottom-right`	`bottom-right` o `bottom-left`.
`bottom`	`20px`	Separación desde el borde inferior de la pantalla.
`sideOffset`	`20px`	Separación desde el borde lateral (derecho o izquierdo según `position`).
`launcherSize`	`60px`	Diámetro del botón flotante.

Colores y tema

Variable	Default	Qué hace
`launcherColor`	`#4F46E5`	Color de fondo del botón flotante.
`launcherIconColor`	`#ffffff`	Color del ícono dentro del botón flotante.
`launcherIconAccentColor`	`#111827`	Color de acento secundario del ícono por defecto.
`launcherIconUrl`	—	URL de una imagen propia para reemplazar el ícono SVG por defecto del botón flotante.
`headerColor`	`#111827`	Color de fondo del header del chat.
`headerTextColor`	`#ffffff`	Color del texto del header.
`userMessageColor` / `userMessageTextColor`	`#4F46E5` / `#ffffff`	Fondo y texto de las burbujas del usuario.
`botMessageColor` / `botMessageTextColor`	`#E5E7EB` / `#111827`	Fondo y texto de las burbujas del bot.
`sendButtonColor`	`#10B981`	Color del botón de enviar.

Comportamiento

Variable	Default	Qué hace
`mode`	`widget`	`widget` (botón flotante + ventana popup) o `fullscreen` (el chat ocupa toda la pantalla, sin botón flotante).
`autoOpen`	`false`	Si es `true`, el chat se abre solo 100ms después de cargar la página.
`showLauncher`	`true`	Ponelo en `false` para ocultar el botón flotante por completo (útil si vos disparás la apertura desde otro elemento).
`closeOnEsc`	`true`	Cierra el chat con la tecla Esc (no aplica en modo `fullscreen`).
`focusInputOnOpen`	`true`	Enfoca el campo de texto automáticamente al abrir el chat.
`toastDuration`	`4500` (ms)	Cuánto tiempo queda visible un mensaje de error tipo toast.

Animación

Variable	Default	Qué hace
`animation`	`slide-up`	`slide-up`, `scale`, `fade` o `none`. Efecto al abrir/cerrar la ventana del chat.
`animationDuration`	`280ms`	Duración de esa transición.

Reconexión del WebSocket

Variable	Default	Qué hace
`reconnectInterval`	`1500` (ms)	Espera inicial antes de reintentar la conexión si el WebSocket se corta.
`maxReconnectInterval`	`15000` (ms)	Tope del backoff exponencial entre reintentos.