Personalizar tema

Hay dos niveles de personalización:

1. Remoto (recomendado): editas en el Admin SPA → cambios se propagan sin redeploy del sitio.
2. Local: override en Zengine.init({ theme: {...} }). Tiene prioridad sobre el remoto.

Tokens disponibles

Zengine.init({
  tenantId: '...',
  widgetId: '...',
  theme: {
    colors: {
      primary:        '#005FCC',
      primaryHover:   '#0048A6',
      onPrimary:      '#FFFFFF',
      surface:        '#FFFFFF',
      surfaceVariant: '#F5F7FA',
      onSurface:      '#1A1F2E',
      border:         '#E1E5EA',
      success:        '#16A34A',
      danger:         '#DC2626',
      bubbleUserBg:   '#005FCC',
      bubbleUserFg:   '#FFFFFF',
      bubbleBotBg:    '#F0F2F5',
      bubbleBotFg:    '#1A1F2E'
    },
    typography: {
      fontFamily: 'Inter, system-ui, sans-serif',
      fontSize:   14
    },
    radius: {
      button: 9999,   // burbuja redonda
      panel:  16,
      bubble: 12
    },
    layout: {
      width:  380,
      height: 600,
      offset: { right: 24, bottom: 24 }
    },
    avatar: 'https://cdn.zen.zervizdev.com/tenants/iplacex/avatar.png'
  }
});

Dark mode

El widget respeta prefers-color-scheme por defecto. Para forzar:

Zengine.init({
  // ...
  colorScheme: 'dark'   // 'light' | 'dark' | 'auto'
});

CSS overrides (avanzado)

El widget vive dentro de Shadow DOM para aislamiento. Si necesitas overrides finos, usa custom properties:

zengine-widget {
  --zen-color-primary: #FF6B00;
  --zen-radius-panel: 24px;
}

No inyectes <style> global esperando alcanzar el interior del Shadow DOM — no funcionará. Sólo las custom properties cruzan el shadow boundary.

Reusar i18n

Sobreescribe strings:

Zengine.init({
  // ...
  copy: {
    greeting:     '¡Hola! Soy el asistente de Acme.',
    placeholder:  'Escribe tu consulta...',
    sendButton:   'Enviar',
    offlineError: 'No pudimos conectar. Reintenta.',
    closeButton:  'Cerrar chat'
  }
});