Configure la apariencia del chatbot con la marca de cada tenant

Aura Home separa la integración del cliente de la configuración visual. El SDK puede solicitar un tema aprobado, mientras que el Appearance Editor del panel permite a los operadores publicar de forma segura la configuración de color, tipografía, logotipo, hoja de estilo y modo para el runtime seleccionado.

Solicitud de tema desde el SDK

Use theme.id para solicitar al runtime un perfil por nombre, como cadisa. El runtime lo aplica solo cuando la sustitución de tema desde el SDK está habilitada y el ID figura en la lista de permitidos local del tenant.

const aura = AuraHome.init({
  container: "#aura-home",
  baseUrl: "https://your-aura-home-runtime.example/",
  theme: {
    id: "cadisa",
    mode: "system",
    cssVariables: {
      "--color-brand-primary": "#2F6FED",
      "--color-brand-primary-hover": "#1F56C6",
      "--color-brand-accent": "#8AB4F8",
      "--aura-home-loader-background": "#f5f9ff",
      "--aura-home-loader-text": "#0b1f4d",
      "--aura-chat-header-background": "#0b1f4d",
      "--aura-chat-title-font-family": "'Montserrat', system-ui, sans-serif",
      "--aura-card-accent": "#2F6FED",
      "--aura-card-action-background": "#2F6FED",
      "--aura-card-focus-ring": "#8AB4F8"
    },
    stylesheetUrl: "https://customer.example/aura-home-theme.css"
  }
});

El aislamiento entre tenants se determina mediante baseUrl, no mediante theme.id. Considere los ID de tema únicamente como indicaciones visuales.

Appearance Editor del panel

El modal Settings del panel incluye un espacio de trabajo Appearance para la conexión de agente seleccionada. Este espacio edita el runtime local del tenant de esa conexión, de modo que los operadores pueden administrar los perfiles visuales sin modificar el código del portal del cliente.

Elija perfiles integrados o publicados, incluidos default y cadisa.
Use la acción Default para devolver el runtime activo al perfil predeterminado integrado.
Edite el ID del tema, el nombre visible, la URL del logotipo, la URL de la hoja de estilo y el modo visual.
Cambie entre Light, Dark o System y vea cómo la vista previa en vivo se actualiza al instante.
Edite los tokens permitidos de marca, superficie, mensajes, editor de mensajes, tarjetas de resultados y tipografía.
Ajuste la tipografía de forma individual para los elementos de contenedor, título, mensaje, campo de entrada y botón.
Revise las pestañas de vista previa de las tarjetas de resultados, los metadatos del catálogo de renderizadores y la revisión de tema activa.
Guarde borradores, publique el tema activo o transfiera JSON controlado entre entornos.

Modelo de seguridad

Las cargas útiles de apariencia son configuración estructurada, no contenido de página sin procesar. El panel nunca envía HTML ni scripts sin procesar, y el runtime sigue siendo responsable de la validación segura de las URL, la lista de permitidos de tokens CSS y el comportamiento de respaldo.

Campo	Uso permitido	No permitido
`theme.id`	Solicitar un perfil visual aprobado.	Identidad del tenant, enrutamiento, autenticación o facturación.
`cssVariables`	Colores, estilo del indicador de carga, espaciado y tokens de tipografía incluidos en la lista de permitidos del runtime.	Credenciales, datos de usuarios, JavaScript o HTML sin procesar.
`cardTokens`	Estilo de superficie, borde, acento, acción y anillo de foco de las tarjetas de resultados, resuelto por el runtime.	Comportamiento de renderizadores no admitido, scripts o decisiones de enrutamiento de datos.
`stylesheetUrl`	Hoja de estilo opcional por HTTPS para ajustes aprobados del cliente.	Scripts no confiables, URL con contenido mixto o URL que contengan secretos.
`mode`	Vista previa y preferencia del runtime `light`, `dark` o `system`.	Seguridad o selección del tenant.

Tarjetas de resultados y metadatos del runtime

El SDK 1.2 expone la carga útil de apariencia resuelta para que los equipos de soporte al cliente puedan ver qué perfil visual, configuración de tarjetas de resultados, catálogo de renderizadores y revisión de tema publicada aplicó efectivamente el runtime.

const resolved = aura.getResolvedAppearance();

aura.on("appearanceResolved", (event) => {
  const metadata = event.payload;
  console.log(metadata?.features?.resultCardsEnabled);
  console.log(metadata?.rendererCatalog);
  console.log(metadata?.cardTokens);
  console.log(metadata?.themeRevision);
});

Metadatos	Uso
`features.resultCardsEnabled`	Confirma si las tarjetas enriquecidas de propiedades o resultados están activas.
`rendererCatalog`	Enumera las capacidades públicas de los renderizadores disponibles para el runtime integrado.
`cardTokens`	Registra los estados de acento, acción, borde, superficie y foco de las tarjetas después de resolver los valores de respaldo.
`themeRevision`	Identifica la revisión de apariencia publicada desde el panel que utiliza el runtime.

Perfil canónico de Cadisa

El perfil actual de Cadisa utiliza un encabezado azul marino profundo, acciones principales en azul Cadisa, un acento azul más claro para el foco y el énfasis secundario, superficies blancas y celeste pálido para un contraste sereno, y una tipografía legible Inter/Segoe UI, con Montserrat como opción para los títulos.

Respaldo operativo

Las variables de entorno del runtime pueden proporcionar el tema inicial o de respaldo. Una vez que el panel publica un perfil de apariencia, el tema publicado tiene prioridad sobre los valores de entorno equivalentes para ese runtime.