Configuración

Personaliza la apariencia y el comportamiento del widget.

Opciones de init#

Opción	Por defecto	Descripción
agentId	obligatorio*	El ID único de tu agente. *Para widgets solo de humanos, basta con `channelId`.
channelId	—	ID del canal del widget. Selecciona qué configuración de widget (estilos, tooltips/banners salientes) se aplica cuando un mismo agente impulsa varios widgets, y es el único identificador para los widgets solo de humanos. Se requiere al menos uno de `agentId` / `channelId`.
position	bottom-right	`bottom-right` o `bottom-left`
primaryColor	#3B82F6	Color de marca para el botón y la cabecera del widget
title	Support	Texto del título de la cabecera
greeting	auto	Mensaje de bienvenida (cargado desde la configuración del panel por defecto)
language	page	Idioma del widget como código BCP-47 (`de`, `pt-BR`). Define la interfaz, el saludo y las preguntas rápidas. Si se omite, el widget sigue el `<html lang>` de la página: una página cuyo `lang` no sea `en` ahora arranca en ese idioma, sea cual sea el navegador del visitante. Un simple `<html lang="en">` se trata como valor de plantilla por defecto y se ignora: el visitante conserva el comportamiento anterior (elección recordada y, después, idioma del navegador). Pasa `'browser'` para ignorar `<html lang>` por completo y volver al comportamiento «solo navegador». Cámbialo en tiempo de ejecución con `Respondo.setLanguage('fr')`, útil para selectores de idioma que no recargan la página.
placeholder	—	Texto de placeholder personalizado para la entrada
quickQuestions	—	Array de preguntas sugeridas mostradas antes del primer mensaje
logoUrl	—	URL de tu logo mostrado en la cabecera del widget
avatarUrl	—	URL del avatar del agente de IA mostrado junto a los mensajes
identity	—	Identidad de usuario preestablecida en el momento del init (los mismos campos que `identify()`)
localStorageKey	—	Clave de localStorage desde la que leer automáticamente el `userId` (para configuraciones GTM / sin código)
chatSize	default	`compact`, `default`, o `large` — dimensiones de la ventana de chat
launcherSize	default	`small`, `default`, o `large` — tamaño del botón launcher
offsetBottom	20	Distancia desde el borde inferior (px)
offsetSide	20	Distancia desde el borde izquierdo/derecho (px)
borderRadius	20	Radio de borde de la ventana de chat (px)
zIndex	999999	z-index CSS para el contenedor del widget
customCSS	—	CSS personalizado inyectado en el Shadow DOM del widget para estilos avanzados
testMode	false	Marca las conversaciones como de prueba (ocultas de las vistas principales)

Configuración completa#

Configuración completajavascript

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  channelId: 'YOUR_CHANNEL_ID',
  position: 'bottom-right',        // 'bottom-right' | 'bottom-left'
  primaryColor: '#2563eb',
  language: 'de',                  // BCP-47; por defecto: <html lang> (en = señal débil), 'browser' lo ignora
  title: 'Help Center',
  greeting: 'How can we help?',
  placeholder: 'Ask anything...',
  logoUrl: 'https://yoursite.com/logo.png',
  avatarUrl: 'https://yoursite.com/avatar.png',
  quickQuestions: [
    'How do I get started?',
    'What are the pricing plans?',
    'How do I contact support?'
  ],
  testMode: false,
  localStorageKey: 'myapp_user_id', // lee automáticamente el userId desde localStorage (GTM / sin código)
  chatSize: 'default',              // 'compact' | 'default' | 'large'
  offsetBottom: 20,                 // distancia desde abajo (px)
  identity: {                      // opcional: establecer en el init si el usuario ya es conocido
    email: 'user@example.com',
    name: 'John Doe',
    userId: 'usr_123',
    properties: {                  // propiedades de contacto personalizadas
      account_type: 'enterprise',
      region: 'eu-west'
    }
  }
});

La mayoría de los ajustes (color, logo, saludo, preguntas rápidas) se gestionan desde el panel de Channels. El widget los obtiene en el momento de la carga — solo necesitas el par agentId/channelId del código de inserción.