Estilo avanzado de chat
Las configuraciones de apariencia incorporadas colores, radios, sombras, divisores, espaciamiento cubren la mayoría de las necesidades de marca. Para cualquier cosa más allá de eso, hay una El producto CSS El campo en la configuración global de la aplicación de administración. <style> bloqueo en cada página de la tienda; no hay una versión por página o por bloque de ella.
CSS propiedades personalizadas que puede anotar
El widget establece su propia apariencia a través de CSS propiedades personalizadas en :root, y en sus propios contenedores también, así que todavía trabajan dentro de temas que usan la Sombra DOM. Anula cualquiera de estos directamente en lugar de luchar contra la especificidad:
:root {
--user-bg-color: #2C9AB4;
--user-text-color: #FFFFFF;
--bot-bg-color: #FFFFFF;
--bot-text-color: #1A1E23;
--chat-bubble-radius: 10px;
--input-button-radius: 10px;
--outer-radius: 20px;
--container-padding: 20px;
--chat-input-spacing: 20px;
--divider-spacing: 15px;
--divider-thickness: 1px;
--divider-color: rgba(0,0,0,0.1);
--container-border-color: #2C9AB4;
--container-border-width: 2px;
--container-border-radius: 20px;
--container-background-color: #FAFAFA;
--shadow-offset-x: 8px;
--shadow-offset-y: 8px;
--shadow-blur: 24px;
--shadow-opacity: 0.1;
--profile-image-size: 40px;
--bubble-size: 60px;
--chat-container-width: 980px;
--chat-container-padding: 20px;
--chat-container-margin: 20px;
--chat-max-height-desktop: 35vh;
--chat-max-height-mobile: 50vh;
}
La mayoría de estos ya tienen un campo de coincidencia en el Página de apariencia alcance para Custom CSS principalmente para cosas que la interfaz de configuración no expone.
Los verdaderos seleccionadores que vale la pena conocer
| Selector | Qué es |
|---|---|
#main-chat-container | El panel de chat principal |
.AIchatbot | Clase en el panel de chat principal |
[data-style-template="classic"] / .classic-style | Presente cuando Classic es la plantilla de estilo activo |
[data-style-template="bubbly"] / .bubbly-style | Presente cuando Bubbly Glow está activo |
[data-style-template="floaty"] | Presente cuando Floaty está activo |
#ai-ambient-wrapper | Envase exterior para las manchas de brillo ambiente Floaty y Bubbly Glow |
.chat-anchor-bubble-wrapper | Envase de posición fija alrededor de la burbuja flotante del lanzador |
.chat-anchor-bubble | La burbuja del lanzador circular en sí misma |
.desktop-heading | El encabezado de chat |
.chat-login-button | El botón de inicio de sesión invitado |
.show-border / .show-shadow | Aplicado a #main-chat-container cuando esas configuraciones están en |
Un pequeño ejemplo apretando la sombra de la burbuja y dar al encabezado un subrayado personalizado, sin tocar ningún otro ajuste:
.chat-anchor-bubble {
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.desktop-heading {
border-bottom: 2px solid var(--user-bg-color);
}
Unas pocas cosas que tener en cuenta
La burbuja flotante siempre es position: fixed, anclado abajo a la izquierda o abajo a la derecha, dependiendo de la Posición de la burbuja el establecimiento (véase Posicionamiento y diseño de chatPuedes reestilarlo con Custom . CSS, pero moverlo de una esquina fija no es compatible y probablemente se rompa en móvil.
El producto CSS es global un campo, aplicado al widget en cada página y cada bloque en la tienda, ya que vive en el mismo metaMantenga los selectores de alcance a las propias clases y ID del widget arriba, en lugar de selectores de etiquetas amplias, para que nada se filtra en el resto de su tema. Y si añade sus propias animaciones o anula los colores de texto, respete prefers-reduced-motion y mantener el contraste legible el widget no hace cumplir ninguno de ellos para usted en personalizado CSS.