Ajustes de apariencia

La pestaña Appearance es donde el asistente obtiene su aspecto. Está organizada en cinco secciones plegables, desde opciones sencillas hasta un control completo a nivel de CSS: profundiza tanto como necesites.

Diseño y lanzador

Cuándo usar un botón flotante: siempre que integres el asistente en una web con su propio contenido y no quieras que el chat compita por el espacio. El botón se queda en una esquina y los visitantes lo abren cuando lo necesitan.

Cuándo integrarlo en la página: cuando el asistente es el contenido: una página de soporte dedicada, un portal de búsqueda, la portada de un centro de ayuda.

Tema base

El tema base es tu punto de partida. Elige el más parecido al aspecto de tu web y ajústalo a partir de ahí con la paleta o el editor de temas.

Sobrescribe la paleta de colores del tema

El editor de paleta muestra un selector de color para cada variable de color CSS que usa el asistente. Cada selector muestra el nombre de la variable (p. ej. --brand) y su valor hexadecimal actual. Solo tienes que definir las que quieras cambiar: todo lo demás mantiene el valor del tema base. Los colores se agrupan por zona:

Marca y bases: el aspecto principal: --brand (acento principal), --brand-2 (secundario), --accent, --bg-base (fondo base), --bg-deep, --surface, --surface-paper, --text, --text-strong, --text-muted, --link, --border, --error, --white.

Botón flotante y cabecera: --floating-button-bg, --floating-button-text, --floating-button-avatar-bg, --floating-header-bg, --floating-header-text, --floating-header-title.

Pie: --footer-bg, --footer-button-text, --footer-button-hover-text, --footer-secondary-hover-text.

Búsqueda y entrada: --header-bg, --search-box-bg, --search-input-text, --input-bg, --input-border.

Botones y acciones: --button-primary-bg, --button-primary-hover-bg, --button-hover, --scroll-button-bg, --scroll-button-hover-bg.

Mensajes: --assistant-avatar-bg, --assistant-avatar-text, --assistant-response-border, --user-message-bg, --user-message-text.

Sugerencias: --hint-text, --hint-border, --form-hint-bg, --form-hint-border.

Código y citas: --code-bg, --code-text, --blockquote-text, --blockquote-border, --blockquote-strong-text.

Tablas: --table-head-bg.

Pestañas: --tab-text, --tab-active-text, --tab-active-border.

Estado y reacciones: --success-bg, --success-border, --success-text, --reaction-hover-bg.

Barra de desplazamiento: --scrollbar-thumb-bg.

Modales y overlays: --modal-bg, --modal-backdrop-bg, --overlay-muted-bg, --overlay-backdrop-bg, --overlay-panel-bg, --overlay-header-text, --overlay-search-bg, --overlay-modal-bg.

Cristal y brillo: --glass-bg, --glass-border, --brand-glow, --accent-glow.

Ejemplo de paleta

Para adaptarlo a una marca con un azul principal sobre fondo blanco, define:

• --brand → #1a73e8
• --button-primary-bg → #1a73e8
• --accent → #1a73e8

Para que el botón flotante combine con una barra de navegación oscura:

• --floating-button-bg → #1e293b
• --floating-button-text → #ffffff
• --floating-header-bg → #1e293b
• --floating-header-text → #ffffff

Sobrescribe los ajustes del tema

Debajo de la paleta de colores, la sección Override theme settings expone las variables que no son colores (fuentes, dimensiones, bordes, sombras y efectos) como campos de texto agrupados por categoría:

Tipografía: --font-base (fuente principal), --font-code (bloques de código), --font-assistant (respuestas del asistente). Introduce una pila de fuentes CSS, p. ej. 'Inter', sans-serif.

Diseño y tamaño: --floating-bottom-offset, --floating-right-offset (posición del botón flotante), --container-width, --container-height (dimensiones del contenedor del asistente).

Bordes y contornos: --card-border-style, --article-table-border, --modal-header-border, --overlay-panel-border, --overlay-search-border, --loading-spinner-border.

Sombras y profundidad: --shadow-soft, --shadow-raised, --shadow-light, --shadow-subtle, --shadow-minimal, --shadow-elevated, --shadow-premium, --floating-button-shadow, --floating-button-hover-shadow, --overlay-panel-shadow.

Degradados y efectos: --brand-gradient-line, --brand-halo-welcome, --skeleton-shimmer, --glass-shimmer, --glass-blur.

Ejemplo de ajustes

Para usar una fuente personalizada y recolocar el botón flotante:

• --font-base → 'Inter', sans-serif
• --font-assistant → 'Inter', sans-serif
• --floating-bottom-offset → 24px
• --floating-right-offset → 24px

Para suavizar las sombras:

• --shadow-soft → 0 2px 8px rgba(0,0,0,0.06)
• --shadow-raised → 0 4px 16px rgba(0,0,0,0.08)

Editor de tema personalizado

Para un control completo a nivel de CSS, el Custom theme editor de la parte inferior de la pestaña Appearance abre un editor de código Monaco donde escribes un objeto de tema en JSON que se combina en profundidad por encima de todo lo demás. Aquí es donde apuntas a componentes concretos por sus selectores CSS, añades reglas responsive o sobrescribes cualquier propiedad de estilo.

Cargar los valores por defecto

Haz clic en Load default theme definition para rellenar el editor con el tema calculado actual: el resultado de tu tema base + paleta + ajustes, completamente desarrollado. Así tienes un punto de partida que funciona: busca la propiedad que quieres cambiar, edita su valor y guarda. Nunca tienes que escribir un tema desde cero.

Estructura

El objeto de tema usa sintaxis CSS-in-JS (propiedades en camelCase) y apunta a los componentes del asistente por sus selectores CSS:

{
  ":root": {
    "--brand": "#1a73e8",
    "--text": "#1e293b"
  },
  ".skdwn-assistant-response": {
    "backgroundColor": "#f8fafc",
    "borderRadius": "12px",
    "padding": "16px"
  },
  "#skdwn-floating-button": {
    "boxShadow": "0 4px 12px rgba(0,0,0,0.15)"
  },
  "@media (max-width: 600px)": {
    "#skdwn-main-container": {
      "fontSize": "14px"
    }
  }
}

A qué puedes apuntar

Ejemplo: burbujas redondeadas con una fuente personalizada

{
  ":root": {
    "--font-base": "'Inter', sans-serif",
    "--font-assistant": "'Inter', sans-serif"
  },
  ".skdwn-assistant-response": {
    "borderRadius": "16px"
  },
  ".skdwn-user-request": {
    "borderRadius": "16px"
  }
}

Ejemplo: botón flotante circular

{
  "#skdwn-floating-button": {
    "borderRadius": "50%",
    "width": "56px",
    "height": "56px"
  }
}

Cómo se combinan las cuatro capas

El asistente construye su aspecto final combinando cuatro capas en orden; cada una sobrescribe a la anterior:

1. Tema base: el predefinido que eliges (default, light, dark, purple, blue, otherBlue).
2. Paleta de colores: los selectores de color. Sobrescriben los colores del tema base.
3. Ajustes del tema: los campos de texto para fuentes, sombras, bordes y dimensiones.
4. JSON de tema personalizado: el editor de código. Se combina en profundidad por encima de todo, así que tiene la última palabra.

La mayoría de los asistentes solo necesitan un tema base y unos pocos colores de la paleta. Los ajustes del tema sirven para ajustar fuentes y espaciado sin escribir JSON. El editor de tema personalizado es para tener un control completo a nivel de CSS sobre componentes concretos.

Solución de problemas

• Si el texto se lee con dificultad, aumenta el contraste entre los colores del texto y del fondo en la paleta.
• Si el widget parece demasiado grande o demasiado pequeño, prueba a cambiar la plantilla base (default frente a overlay) o ajusta --container-width y --container-height en los ajustes del tema.
• Los colores se aplican al instante en la vista previa integrada: úsala para iterar rápido.
• Si el JSON del tema personalizado muestra errores, busca comas finales, comillas que faltan o llaves que no cierran. Usa Load default theme definition para partir de un objeto válido.
• En el editor de tema personalizado las propiedades CSS deben ir en camelCase (backgroundColor, no background-color), pero los nombres de las variables CSS conservan sus guiones (--brand, --text).

Documentación relacionada

• Abrir la vista previa integrada